试着用Proxy 实现一个简单mvvm

2,015 阅读5分钟

Proxy、Reflect的简单概述

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

例如:

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,去读写它的属性,就会得到下面的结果。

obj.count = 1
//  setting count!
++obj.count
//  getting count!
//  setting count!
//  2
var proxy = new Proxy(target, handler);

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

注意,要使得Proxy起作用,必须针对Proxy实例(上例是proxy对象)进行操作,而不是针对目标对象(上例是空对象)进行操作。

Reflect对象与Proxy对象一样,也是 ES6 为了操作对象而提供的新API

Reflect对象的方法与Proxy对象的方法一一对应,只要是Proxy对象的方法,就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法,完成默认行为,作为修改行为的基础。也就是说,不管Proxy怎么修改默认行为,你总可以在Reflect上获取默认行为。

同样也放上阮一峰老师的链接es6.ruanyifeng.com/#docs/refle…

初始化结构

看到这里,我就当大家有比较明白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就是上面代码的配置,里面有eldatacomputed~~

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实例。

在代理里面,拦截了getsetget函数里面,返回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赋了一个新值
                        // 而值的改变会调用setset中又会调用notify,notify中调用watcher的update方法实现了更新操作
                        vm[exp] = e.target.value
                    })
                }
            });
+       }
        ...
        ...
    }
  }

上面的方法就是,让我们的input节点绑定一个input事件,然后当input事件触发的时候,改变我们的值,而值的改变会调用setset中又会调用notifynotify中调用watcherupdate方法实现了更新操作。

然后我们看一下,界面

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

计算属性

先把<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,谢谢大佬

最后附上,源代码地址,直接下载运行就可以啦。

源码地址:github.com/naihe138/pr…

预览地址:gitblog.naice.me/proxy-mvvm/…