脚本宝典收集整理的这篇文章主要介绍了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官网的例子几乎一毛一样。下面来看下实现源码,我觉得可以分为以下几个点:
获取需要进行数据绑定的dom
var self = this,
el = self.el = document.getElementById(id)
模板解析替换,作者通过正则/{{(.*)}}/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
利用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
: 直接获取内存中存储的值。

以上是脚本宝典为你收集整理的vue.js最初的数据绑定实验解析全部内容,希望文章能够帮你解决vue.js最初的数据绑定实验解析所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。