试着用Proxy 实现一个简单mvvm

时间 2019-11-09

标签试着 proxy 实现一个简单 mvvm 繁體版

原文原文链接

Proxy、Reflect的简单概述

Proxy 能够理解成，在目标对象以前架设一层“拦截”，外界对该对象的访问，都必须先经过这层拦截，所以提供了一种机制，能够对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操做，能够译为“代理器”。
出自阮一峰老师的ECMAScript 6 入门，详细点击 http://es6.ruanyifeng.com/#docs/proxy

例如：html

var obj = new Proxy({}, {
  get: function (target, key, receiver) {
    console.log(`getting ${key}!`);
    return Reflect.get(target, key, receiver);
  },
  set: function (target, key, value, receiver) {
    console.log(`setting ${key}!`);
    return Reflect.set(target, key, value, receiver);
  }
});

上面代码对一个空对象架设了一层拦截，重定义了属性的读取（get）和设置（set）行为。这里暂时先不解释具体的语法，只看运行结果。对设置了拦截行为的对象obj，去读写它的属性，就会获得下面的结果。vue

obj.count = 1
//  setting count!
++obj.count
//  getting count!
//  setting count!
//  2

var proxy = new Proxy(target, handler);

这里有两个参数，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。node

注意，要使得 Proxy起做用，必须针对 Proxy实例（上例是 proxy对象）进行操做，而不是针对目标对象（上例是空对象）进行操做。

Reflect对象与Proxy对象同样，也是 ES6 为了操做对象而提供的新 API。git

Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。这就让Proxy对象能够方便地调用对应的Reflect方法，完成默认行为，做为修改行为的基础。也就是说，无论Proxy怎么修改默认行为，你总能够在Reflect上获取默认行为。es6

一样也放上阮一峰老师的连接http://es6.ruanyifeng.com/#docs/reflectgithub

初始化结构

看到这里，我就当你们有比较明白Proxy（代理）是作什么用的，而后下面咱们看下要作最终的图骗。
设计模式

看到上面的图片，首先咱们新建一个index.html，而后里面的代码是这样子滴。很简单数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单版mvvm</title>
</head>
<body>
<div id="app">
    <h1>开发语言：{{language}}</h1>
    <h2>组成部分：</h2>
    <ul>
        <li>{{makeUp.one}}</li>
        <li>{{makeUp.two}}</li>
        <li>{{makeUp.three}}</li>
    </ul>
    <h2>描述：</h2>
    <p>{{describe}}</p>
    <p>计算属性：{{sum}}</p>
    <input placeholder="123" v-module="language" />
</div>
<script>
// 写法和Vue同样
const mvvm = new Mvvm({
    el: '#app',
    data: {
        language: 'Javascript',
        makeUp: {
            one: 'ECMAScript',
            two: '文档对象模型（DOM）',
            three: '浏览器对象模型（BOM）'
        },
        describe: '没什么产品是写不了的',
        a: 1,
        b: 2
    },
    computed: {
        sum() {
        return this.a + this.b
    }
})
</script>
</body>
</html>

看到上面的代码，大概跟vue长得差很少，下面去实现Mvvm这个构造函数浏览器

实现Mvvm这个构造函数

首先声明一个Mvvm函数，options看成参数传进来，options就是上面代码的配置，里面有el、data、computed~~app

function Mvvm(options = {}) {
    // 把options 赋值给this.$options
    this.$options = options
    // 把options.data赋值给this._data
    let data = this._data = this.$options.data
    let vm = initVm.call(this)
    return this._vm
}

上面Mvvm函数很简单，就是把参数options 赋值给this.$options、把options.data赋值给this._data、而后调用初始化initVm函数,并用call改变this的指向，方便initVm函操做。而后返回一个this._vm，这个是在initVm函数生成的。

下面继续写initVm函数，

function initVm () {
    this._vm = new Proxy(this, {
        // 拦截get
        get: (target, key, receiver) => {
            return this[key] || this._data[key] || this._computed[key]
        },
        // 拦截set
        set: (target, key, value) => {
            return Reflect.set(this._data, key, value)
        }
    })
    return this._vm
}

这个init函数用到Proxy拦截了，this对象，生产Proxy实例的而后赋值给this._vm，最后返回this._vm，

上面咱们说了，要使得 Proxy起做用，必须针对 Proxy实例。

在代理里面，拦截了get和set，get函数里面，返回this对象的对应的key的值，没有就去this._data对象里面取对应的key，再没有去this._computed对象里面去对应的key值。set函数就是直接返回修改this._data对应key。

作好这些各类拦截工做。咱们就能够直接从实力上访问到咱们相对应的值了。（mvvm使咱们第一块代码生成的实例）

mvvm.b // 2
mvvm.a // 1
mvvm.language // "Javascript"

如上图看控制台。能够设置值，能够获取值，可是这不是响应式的。

打开控制台看一下

能够详细的看到。只有_vm这个是proxy，咱们须要的是，_data下面全部数据都是有拦截代理的；下面咱们就去实现它。

实现全部数据代理拦截

咱们首先在Mvvm里面加一个initObserve，以下

function Mvvm(options = {}) {
    this.$options = options
    let data = this._data = this.$options.data
    let vm = initVm.call(this)
+   initObserve.call(this, data) // 初始化data的Observe
    return this._vm
}

initObserve这个函数主要是把，this._data都加上代理。以下

function initObserve(data) {
    this._data = observe(data) // 把全部observe都赋值到 this._data
}

// 分开这个主要是为了下面递归调用
function observe(data) {
    if (!data || typeof data !== 'object') return data // 若是不是对象直接返回值
    return new Observe(data) // 对象调用Observe
}

下面主要实现Observe类

// Observe类
class Observe {
    constructor(data) {
        this.dep = new Dep() // 订阅类，后面会介绍
        for (let key in data) {
            data[key] = observe(data[key]) // 递归调用子对象
        }
        return this.proxy(data)
    }
    proxy(data) {
      let dep = this.dep
      return new Proxy(data, {
        get: (target, key, receiver) => {
          return Reflect.get(target, key, receiver)
        },
        set: (target, key, value) => {
          const result = Reflect.set(target, key, observe(value)) // 对于新添加的对象也要进行添加observe
          return result  
        }
      })
    }
  }

这样子，经过咱们层层递归添加proxy，把咱们的_data对象都添加一遍，再看一下控制台

很不错，_data也有proxy了，很王祖蓝式的完美。

看到咱们的html的界面，都是没有数据的，上面咱们把数据都准备好了，下面咱们就开始把数据结合到html的界面上。

套数据，实现hmtl界面

先把计算属性这个html注释掉，后面进行实现

<!-- <p>计算属性：{{sum}}</p> -->

而后在Mvvm函数中增长一个编译函数，➕号表示是添加的函数

function Mvvm(options = {}) {
    this.$options = options
    let data = this._data = this.$options.data
    let vm = initVm.call(this)
+   new Compile(this.$options.el, vm) // 添加一个编译函数
    return this._vm
}

上面咱们添加了一个Compile的构造函数。把配置的el做为参数传机进来，把生成proxy的实例vm也传进去，这样子咱们就能够拿到vm下面的数据，下面咱们就去实现它。顺序读注释就能够了，很好理解

// 编译类
class Compile {
    constructor (el, vm) {
        this.vm = vm // 把传进来的vm 存起来，由于这个vm.a = 1 没毛病
        let element = document.querySelector(el) // 拿到 app 节点
        let fragment = document.createDocumentFragment() // 建立fragment代码片断
        fragment.append(element) // 把app节点 添加到 建立fragment代码片断中
        this.replace(fragment) // 套数据函数
        document.body.appendChild(fragment) // 最后添加到body中
    }
    replace(frag) {
        let vm = this.vm // 拿到以前存起来的vm
        // 循环frag.childNodes
        Array.from(frag.childNodes).forEach(node => {
            let txt = node.textContent // 拿到文本 例如："开发语言：{{language}}"
            let reg = /\{\{(.*?)\}\}/g // 定义匹配正则
            if (node.nodeType === 3 && reg.test(txt)) {
            
                replaceTxt()
                
                function replaceTxt() {
                    // 若是匹配到的话，就替换文本
                    node.textContent = txt.replace(reg, (matched, placeholder) => {
                        return placeholder.split('.').reduce((obj, key) => {
                            return obj[key] // 例如：去vm.makeUp.one对象拿到值
                        }, vm)
                    })
                }
            }
            // 若是还有字节点，而且长度不为0 
            if (node.childNodes && node.childNodes.length) {
                // 直接递归匹配替换
                this.replace(node)
            }
        })
    }
}

上面的编译函数，总之就是一句话，想方设法的把{{xxx}}的占位符经过正则替换成真实的数据。

而后刷新浏览器，铛铛档铛铛档，就出现咱们要的数据了。

很好很好，可是咱们如今的数据并非改变了就发生变化了。还须要订阅发布和watcher来配合，才能作好改变数据就发生变化了。下面咱们先实现订阅发布。

实现订阅发布

订阅发布实际上是一种常见的程序设计模式，简单直白来讲就是:

把函数push到一个数组里面，而后循环数据调用函数。

例如：举个很直白的例子

let arr = [] 
let a = () => {console.log('a')}

arr.push(a) // 订阅a函数
arr.push(a) // 又订阅a函数
arr.push(a) // 双订阅a函数

arr.forEach(fn => fn()) // 发布全部

// 此时会打印三个a

很简单吧。下面咱们去实现咱们的代码

// 订阅类
class Dep {
    constructor() {
        this.subs = [] // 定义数组
    }
    // 订阅函数
    addSub(sub) {
        this.subs.push(sub)
    }
    // 发布函数
    notify() {
        this.subs.filter(item => typeof item !== 'string').forEach(sub => sub.update())
    }
}

订阅发布是写好了，可是在何时订阅，何时发布？？这时候，咱们是在数据获取的时候订阅watcher，而后在数据设置的时候发布watcher，在上面的Observe类里面里面,看➕号的代码。 .

... //省略代码
...
proxy(data) {
    let dep = this.dep
    return new Proxy(data, {
        // 拦截get
        get: (target, prop, receiver) => {
+           if (Dep.target) {
                // 若是以前是push过的，就不用重复push了
                if (!dep.subs.includes(Dep.exp)) {
                    dep.addSub(Dep.exp) // 把Dep.exp。push到sub数组里面，订阅
                    dep.addSub(Dep.target) // 把Dep.target。push到sub数组里面，订阅
                }
+           }
            return Reflect.get(target, prop, receiver)
        },
        // 拦截set
        set: (target, prop, value) => {
            const result = Reflect.set(target, prop, observe(value))
+           dep.notify() // 发布
            return result  
        }
    })
}

上面代码说到，watcher是什么鬼？而后发布里面的sub.update()又是什么鬼？？

带着一堆疑问咱们来到了watcher

实现watcher

看详细注释

// Watcher类
class Watcher {
    constructor (vm, exp, fn) {
        this.fn = fn // 传进来的fn
        this.vm = vm // 传进来的vm
        this.exp = exp // 传进来的匹配到exp 例如："language"，"makeUp.one"
        Dep.exp = exp // 给Dep类挂载一个exp
        Dep.target = this // 给Dep类挂载一个watcher对象，跟新的时候就用到了
        let arr = exp.split('.')
        let val = vm
        arr.forEach(key => {
            val = val[key] // 获取值，这时候会粗发vm.proxy的get()函数，get()里面就添加addSub订阅函数
        })
        Dep.target = null // 添加了订阅以后，把Dep.target清空
    }
    update() {
        // 设置值会触发vm.proxy.set函数，而后调用发布的notify，
        // 最后调用update，update里面继续调用this.fn(val)
        let exp = this.exp
        let arr = exp.split('.')
        let val = this.vm
        arr.forEach(key => {
            val = val[key]
        })
        this.fn(val)
    }
}

Watcher类就是咱们要订阅的watcher，里面有回调函数fn，有update函数调用fn，

咱们都弄好了。可是在哪里添加watcher呢？？以下代码

在Compile里面

...
...
function replaceTxt() {
    node.textContent = txt.replace(reg, (matched, placeholder) => {
+       new Watcher(vm, placeholder, replaceTxt);   // 监听变化，进行匹配替换内容
        return placeholder.split('.').reduce((val, key) => {
            return val[key]
        }, vm)
    })
}

添加好有所的东西了，咱们看一下控制台。修改发现果真起做用了。

而后咱们回顾一下全部的流程，而后看见古老(我也是别的地方弄来的)的一张图。

帮助理解嘛

响应式的数据咱们都已经完成了，下面咱们完成一下双向绑定。

实现双向绑定

看到咱们html里面有个<input placeholder="123" v-module="language" />，v-module绑定了一个language，而后在Compile类里面的replace函数，咱们加上

replace(frag) {
    let vm = this.vm
    Array.from(frag.childNodes).forEach(node => {
        let txt = node.textContent
        let reg = /\{\{(.*?)\}\}/g
        // 判断nodeType
+       if (node.nodeType === 1) {
            const nodeAttr = node.attributes // 属性集合
            Array.from(nodeAttr).forEach(item => {
                let name = item.name // 属性名
                let exp = item.value // 属性值
                // 若是属性有 v-
                if (name.includes('v-')){
                    node.value = vm[exp]
                    node.addEventListener('input', e => {
                        // 至关于给this.language赋了一个新值
                        // 而值的改变会调用set，set中又会调用notify，notify中调用watcher的update方法实现了更新操做
                        vm[exp] = e.target.value
                    })
                }
            });
+       }
        ...
        ...
    }
  }

上面的方法就是，让咱们的input节点绑定一个input事件，而后当input事件触发的时候，改变咱们的值，而值的改变会调用set，set中又会调用notify，notify中调用watcher的update方法实现了更新操做。

而后咱们看一下，界面

双向数据绑定咱们基本完成了，别忘了，咱们上面还有个注释掉的计算属性。

计算属性

先把<p>计算属性：{{sum}}</p>注释去掉，觉得上面一开始initVm函数里面，咱们加了这个代码return this[key] || this._data[key] || this._computed[key]，到这里你们都明白了，只须要把this._computed也加一个watcher就行了。

function Mvvm(options = {}) {
    this.$options = options
    let data = this._data = this.$options.data
    let vm = initVm.call(this)
    initObserve.call(this, data)
+   initComputed.call(this) // 添加计算函数，改变this指向
    new Compile(this.$options.el, vm)
    return this._vm
}


function initComputed() {
    let vm = this
    let computed = this.$options.computed // 拿到配置的computed
    vm._computed = {}
    if (!computed) return // 没有计算直接返回
    Object.keys(computed).forEach(key => {
        // 至关于把sum里的this指向到this._vm，而后就能够拿到this.a、this、b
        this._computed[key] = computed[key].call(this._vm)
        // 添加新的Watcher
        new Watcher(this._vm, key, val => {
            // 每次设置的时候都会计算
            this._computed[key] = computed[key].call(this._vm)
        })
    })
}

上面的initComputed 就是添加一个watcher，大体流程：

this._vm改变 ---> vm.set() ---> notify() -->update()-->更新界面

最后看看图片

一切彷佛没什么毛病~~~~

添加mounted钩子

添加mounted也很简单

// 写法和Vue同样
let mvvm = new Mvvm({
    el: '#app',
    data: {
        ...
        ...
    },
    computed: {
        ...
        ...
    },
    mounted() {
        console.log('i am mounted', this.a)
    }
})

在new Mvvm里面添加mounted，
而后到function Mvvm里面加上

function Mvvm(options = {}) {
    this.$options = options
    let data = this._data = this.$options.data
    let vm = initVm.call(this)
    initObserve.call(this, data)
    initComputed.call(this)
    new Compile(this.$options.el, vm)
+   mounted.call(this._vm) // 加上mounted，改变指向
    return this._vm
}

// 运行mounted
+ function mounted() {
    let mounted = this.$options.mounted
    mounted && mounted.call(this)
+ }

执行以后会打印出

i am mounted 1

完结~~~~撒花

ps：编译里面的，参考到这个大神的操做。@chenhongdong，谢谢大佬

最后附上，源代码地址，直接下载运行就能够啦。

源码地址：https://github.com/naihe138/proxy-mvvm

预览地址：http://gitblog.naice.me/proxy-mvvm/index.html