正文:

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

作者在getset-revits-style.htmlgetset.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: 直接获取内存中存储的值。


clipboard.png



本文固定链接: http://www.js-code.com/vue-js/vue-js_27239.html