时隔好久没有进来做笔记。做一篇已经写烂了的双向绑定原理，笔记。

文章末尾会放上原文链接：

双向绑定的原理：
思路：对数据进行劫持，我们需要设置一个监听器 Observe。

用来监听所有属性。如果属性上发生变化了，就需要告诉订阅者Watcher 看是否需要更新。因为订阅者有很多个，

我们需要 一个Dep 来专门收集这些订阅者，然后在监听器Observe 和 订阅者Watcher 之间进行统一管理。

接着还需要一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化一个订阅者的Watcher，并替换模板数据或者绑定相应的函数。此时当订阅者Watcher 接收到相应的属性的变化，就会执行对应的更新函数，从而更新视图。

所以 第一步：监听器（Observe）订阅者（Watcher） 订阅器--专门搜集订阅（Dep）解析器（Comoile） 这一套上来，第一眼看着略蒙蔽。

所以 分步走 进行挨个实现

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

大致就是这么个逻辑，当然这个是没有实现性能优化的，包括diff算法都没有，啥也没有。

第一步,先看一眼实现 Object.defineProperty

function defineReactive(data, key, val) {
    observe(val) // 递归遍历所有子属性
    Object.defineProperty(data, key, {
        enumerable: true  // 默认为是false ，true的时候认为目标可枚举
        configurable: true // 默认为false， true的时候改属性描述符可以被改变，同时改属性也能从对应的对象上删除
        get: function() {
            return val;
        },
        set: function() {
            var = newVal;
            console.log('属性'+ key + '已经被监听了，现在值为:"' + newVal.toString() + '"')
        }                  
    })
}
function observe(data) {
    if(!data || typeof data != 'object'){
        return;
    }
    Object.keys(data).forEach(function(key){
        defineReactive(data, key, data[key])
    })
}
var library = {
    book1:{
        name:''
    },
    book2:''
}
observe(library)
library.book1.name = 'vue权威指南'
library.book2 = '没有此书籍'

Object.defineProperty 的 get 方法 set 方法 对属性进行了劫持
实际上就对 library 进行了监听，如果说 library 对象属性发生了变化。会触发更新 set 方法。 想对改方法进行测试的话具体去查看文档吧。这里暂不做进一步说明。

思路分析中，需要创建一个可以容纳订阅者消息的Dep。

订阅器Dep 主要负责收集订阅者。

然后再属性变化的时候执行对应订阅者的更新函数。

需要一个容器list，将上面的Observer 改造， 植入消息订阅器。

function defineReactive(data, key, val) {
    observe(val) // 递归遍历所有子属性
    Object.defineProperty(data, key, {
        enumerable: true  // 默认为是false ，true的时候认为目标可枚举
        configurable: true // 默认为false， true的时候改属性描述符可以被改变，同时改属性也能从对应的对象上删除
        get: function() {
            if (是否需要添加订阅者) {
                dep.addSub(watcher);  // 在这里添加一个订阅者
            }
            return val;
        },
        set: function(newVal) {
            if(val === newVal){
               return;
            }
            val = newVal;
            console.log('属性'+ key + '已经被监听了，现在值为:"' + newVal.toString() + '"')
            dep.notify(); // 如果数据变化通知订阅者
        }                  
    })
}

funtion Dep () {
    this.subs = []
}

Dep.prototype = {
    addSub: function(sub){
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub){
            sub.update();
        })
    }
}

到这应该还没啥问题，在get 监听上触发添加订阅者， 在 set 方法上对订阅者进行通知更新。

从代码上来看，订阅器Dep 添加一个订阅者设计在getter 里面。

这是为了让Watcher 初始化进行触发。

因此需要判断是否要添加订阅者。

至于具体设计方案，下文会详细说明。

在setter函数里面，如果数据变化，就会去通知所有订阅者，订阅者们就会去执行对应的更新函数。

到此为止，一个比较完整Observer 已经实现。 接下面的是Watcher。

订阅者Watcher 在初始化的时候需要将自己添加进订阅器Dep中。

在Watcher 初始化的时候触发对应的get函数去执行添加订阅者Wather的操作即可。

那么如何触发get函数，只要获取对应的属性值就可以触发了。

核心原因就是因为我们使用Object.defineProperty() 进行数据监听。

这里还有一个细节点需要处理。

我们只要在订阅者Watcher初始化的时候才需要添加订阅者。

因此在订阅器上做下手脚：在Dep.target 上缓存下订阅者，添加成功之后然后再将其去掉就可以了。订阅者实现如下：

function Watcher(vm, exp, cb){
    this.cb = cb
    this.vm = vm
    this.exp = exp
    this.value = this.get(); // 将自己添加到订阅器的操作
}

Watcher.prototype = {
    update: function() {
        this.run()
    },
    run: function() {
        var value = this.vm.data[this.exp]
        var oldVal = this.value
        if (value !== oldVal){
            this.value = value
            this.cb.call(this.vm, value, oldVal)
        }
    },
    get: function () {
        Dep.target = this // 缓存自己
        var value = this.vm.data[this.exp]  // 强制执行监听器里面的get函数
        Dep.target = null // 释放自己
        return value
    }
}

这个时候，我们需要对监听器Observer 也做一个稍微调整，主要是对应Watcher类原型上get函数。需要调整地方在defineReactive 函数：

function defineReactive(data, key, val) {
    observe(val) // 递归遍历所有子属性
    Object.defineProperty(data, key, {
        enumerable: true  // 默认为是false ，true的时候认为目标可枚举
        configurable: true // 默认为false， true的时候改属性描述符可以被改变，同时改属性也能从对应的对象上删除
        get: function() {
            if (Dep.target) { // 判断是否需要添加订阅者
                dep.addSub(Dep.target);  // 在这里添加一个订阅者
            }
            return val;
        },
        set: function(newVal) {
            if(val === newVal){
               return;
            }
            val = newVal;
            console.log('属性'+ key + '已经被监听了，现在值为:"' + newVal.toString() + '"')
            dep.notify(); // 如果数据变化通知订阅者
        }                  
    })
}

funtion Dep () {
    this.subs = []
}

Dep.prototype = {
    addSub: function(sub){
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub){
            sub.update();
        })
    }
}
Dep.target = null

目前为止实现了一个简易版本，可以模板写死进行测试了。

<body>
    <h1 id='name'>{{name}}</h1>
</body>

Obsever 和 Watcher 进行关联

function SelfVue ( data, el, exp){
    this.data = data
    observe(data)
    el.innerHTML = this.data[exp] ; // 初始化模板值
    new Watcher(this, exp, function (value) {
        el.innerHTML = value;
    });
    return this
}

在 页面上new 以下SelfVue 类，就可以实现双向绑定了

<body>
    <h1 id='name'> {{name}} <h1>
<body>
<script src='js/observe.js'></script>
<script src='js/watcher.js'></script>
<script src='js/index.js'></script>
<script type='text/javascript'>
var ele = document.querySelector('#name')
var self = new SelfVue({
    name = 'hello world'
},ele,'name')
window.setTimeout(function (){
    console.log('值改变了')
    SelfVue.data.name = 'colorRed'
}, 2000)
</script>

目前来说实现的是效果进去是'hello word', 2秒之后值改变为 'colorRed', 但是我们目前变更的时候 使用了 SelfVue.data.name 这个严重不符合我们需求。

所以我我需要在外围加一层渲染包装，

function SelfVue ( data, el, exp){
    this.data = data
    observe(data)
    el.innerHTML = this.data[exp] ; // 初始化模板值
    new Watcher(this, exp, function (value) {
        el.innerHTML = value;
    });
    return this
}

SelfVue.prototype = {
    proxyKeys: function (key){
        var self = this;
        Object.defineProperty(this, key, {
            emumerable: false,
            configurable: true,
            get: funtion proxyGetter(){
                return self.data[key]
            },
            set: funtion proxySetter(newVal){
                self.data[key] = newVal
            }                  
        })
    }
}

由于挂载了包装 selfVue.name = 'colorRed' 可以直接使用

实现Compile

虽然上面已经实现了双向绑定的例子。
但是整个过程都没有去解析dom节点。
而是直接固定某个节点进行替换数据的。
所以接下来要实现一个解析器Compile来做解析和绑定的工作。
解析器Compile 实现步骤：

1.解析模板指令，并替换模板数据，初始化视图

2.将模板指令对应的节点绑定对应的更新函数，初始化相应的订阅器。

为了解析模板，首先需要获取dom元素，然后对含有dom元素上含有指令的节点进行处理，因此这个环节需要对dom操作比较频繁，所以可以先建一个fragment片段，将需要解析的dom节点存入fragment片段里再进行处理：

function nodeToFragment (el) {
    var fragment = document.createDocumentFragment();
    var child = el.firstChild;
    while (child) {
        // 将Dom元素移入fragment 中
        fragment.appendChild( child );
        child = el.firstChild
    }
    return fragment;
}

接下来的是需要遍历各个节点，对含有有关指定的节点进行特殊处理，现在先处理简单情况，只对带有'{{ 变量 }}'
这种形式的指令进行处理，之后在考虑多指令的情况。

function compoileElement (el) {
    var childNodes = el.childNodes
    var self = this;
    
}

function compileText( node, exp ){
    var self = this
    var initText = this.vm[exp]
    updateText( node, initText ) // 将初始化的数据初始化到视图中
    new Watcher( this.vm, exp, function (value){ // 生成订阅器并绑定更新函数
        self.updateText(node, value)
    })
}

function updateText ( node, value ) {
    node.textContent = typeof value == 'undefined' ? '': value
}

获取到最外层节点后，调用compoilElement( ) 函数，对所有子节点进行判断，如果节点是文本节点且匹配{{ }}

这种形式指令的节点就开始进行编译处理，编译处理首先要初始化视图数据，
对应上面所说的步骤

1.接下去需要生成一个并绑定更新函数的订阅器，对应上面所说的步骤

2.这样就完成指令的解析、 初始化、 编译三个过程，一个解析器Compile也就可以正常的工作了.

为了将解析器Compile与监听器Observer 和订阅者Watcher关联起来，我们需要在修改下类SelfVue函数：

function SelfVue (options) {
    var self = this
    this.vm = this
    this.data = options
    
    Object.keys( this.data ).forEach( function(key){
        self.proxyKeys( key )
    })
    
    observe(this.data)
    new Compile( options, this.vm )
    return this
}

更改后，我们就不要像之前通过传入固定的元素值进行双向绑定了，可以随便命名各种变量进行双向绑定了：

<body>
    <div id = "app">
        <h2>{{title}}</h2>
        <h1>{{name}}</h1>
    </div>
</body>
<script src="js/observer.js"></script>
<script src="js/watcher.js"></script>
<script src="js/compile.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript">
    var selfVue = new SelfVue({
        el: '#app',
        data: {
            title: 'hello world',
            name: ''
        }
    });
    
    window.setTimeout(function () {
        selfVue.title = '你好'
    }, 2000)
    
    window.setTimeout( function () {
        selfVue.name = 'canfoo'
    }, 2500)
    
</script>

如上代码，在页面上可以观察到，刚开始titile 和 name 分别被初始化为'hello world'和 空，2s 后title被替换成'你好' 3s 后name 被替换成 'canfoo'

接着继续，
到这里，一个数据双向绑定功能已经基本完成了。
接下去就是需要完善更多的指令编译解析。
在哪里进行更多指令处理呢？

答案很明显， 只要在上文说的compileElement 函数加上对其他指令节点进行判断。

然后遍历其所有属性，看是否有匹配的指令属性，如果有的话，就对其进行解析编译。

这里我们再添加一个v-model 指令 和 事件指令的解析编译，对于这些节点我们使用compile 进行解析处理：

然后下面上代码：

function compile (node) {
    var nodeAttrs = node.attributes;
    var self = this;
    Array.prototype.forEach.call(nodeAttrs, function(attr) {
        var attrName = attr.name;
        if ( self.isDirective( attrName )){
            var exp = attr.value;
            var dir = attrName.substring(2);
            if (self.isEventDirective(dir)){ // 事件指令  exp要处理的名字, dir需要处理的模式 on:click
                self.compileEvent( node, self.vm, exp, dir );
            } else { // v-model 指令
                self.compileModel( node, self.vm, exp, dir );
            }
            node.removeAttribute( attrName )
        }
    })
}

上面的compile 函数 是挂载 Compile 原型上的。

它首先遍历所有节点属性，然后在判断属性是否是指令属性。

如果是的话再区分是哪种指令，再进行相应的处理，处理方法相对比较简单

最后我们在稍微改造下类SelfVue，使它更像vue的用法：

function SelfVue (options) {
    var self = this;
    this.data = options.data;
    this.methods = options.methods;

    Object.keys(this.data).forEach(function(key){
        self.proxyKeys(key)；
    })

    observe(this.data);

    new Compile(options.el, this);
    options.mounted.call(this)  // 所有事情处理好后执行mounted 函数
}

下面真正的测试

<body>
    <div id = "app">
      <h2>{{title}}</h2>
      <input v-model="name">
      <h1>{{name}}</h1>
      <button v-on:click="clickMe">click me!</button>
     </div>   
</body>
<script src="js/observer.js"></script>
<script src="js/watcher.js"></script>
<script src="js/compile.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript">
    new SelfVue({
        el:'#app',
        data:{
            title: 'hello world',
            name: 'canfoo'
        },
        methods: {
            clickMe: function () {
                this.title = 'hello world';
            }
        },
        mounted: function () {
            window.setTimeout(() => {
                this.title = '你好'
            },1000)
        }
    });
</script>

最终的完成品

引用，博客地址

https://www.cnblogs.com/canfoo/p/6891868.html

github 地址

https://github.com/canfoo/self-vue

实现双向绑定Proxy 比 defineproperty 优劣如何？

https://juejin.im/post/5acd0c8a6fb9a028da7cdfaf

关于 之后的引申的