脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

正文:

源码来源于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



总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过