vue.js最初的数据绑定实验解析

正文：

源码来源于vuejs的commit记录：a5e27b1174e9196dcc9dbb0becc487275ea2e84c

作者在getset-revits-style.html和getset.html中简单实验了一下数据绑定。

模板：

    <div id="test">
        <p>{{msg}}</p>
        <p>{{msg}}</p>
        <p>{{msg}}</p>
        <p>{{what}}</p>
        <p>{{hey}}</p>
    </div>

js

    var app = new Element('test', {
        msg: 'hello'
    })

和vue官网的例子几乎一毛一样。下面来看下实现源码，我觉得可以分为以下几个点：

1. 获取需要进行数据绑定的dom

   var self     = this,
       el = self.el = document.getElementById(id)

2. 模板解析替换，作者通过正则/\{\{(.*)\}\}/g来找到那些被{{}}标记的地方，并且替换成带有标记的span标签, 然后将这些标记存在bindings中。

   var bindingMark = 'data-element-binding'
   var content  = el.innerHTML.replace(/\{\{(.*)\}\}/g, markToken)
   
   function markToken (match, variable) {
       bindings[variable] = {}
       return '<span ' + bindingMark + '="' + variable +'"></span>'
   }
   
   el.innerHTML = content

3. 利用Object.defineProperty劫持数据来进行数据绑定

   for (var variable in bindings) {
       bind(variable)
   }
   
   function bind (variable) {
       bindings[variable].els = el.querySelectorAll('[' + bindingMark + '="' + variable + '"]')
       ;[].forEach.call(bindings[variable].els, function (e) {
           e.removeAttribute(bindingMark)
       })
       Object.defineProperty(data, variable, {
           set: function (newVal) {
               [].forEach.call(bindings[variable].els, function (e) {
                   bindings[variable].value = e.textContent = newVal
               })
           },
           get: function () {
               return bindings[variable].value
           }
       })
   }

   首先遍历bindings中的标记，并且在bindings中记录带有标记的DOM节点，然后遍历节点将标记删除，最后就是劫持data中对应的属性了。
   关于Object.defineProperty的原理不作赘述，我们只看看他set和get都分别作了什么。

   set: 遍历含有当前标记的节点， 把新值赋值给当前dom的e.textContent，并在bindings中对应标记里记录这个值。

   get: 直接获取内存中存储的值。

---