javascript实现双向数据绑定
2018-06-24 01:57:24来源:未知 阅读 ()
双向数据绑定已经是面试中经常被问到的点,需要对原理和实现都要有一定了解。
下面是实现双向绑定的两种方法:
- 属性劫持
- 脏数据检查
一、属性劫持
主要是通过Object对象的defineProperty方法,重写data的set和get函数来实现的。
在属性劫持中,主要通过 _observe(重定义get、set方法,实现数据变化更新视图)、_compile(实现视图初始化、并对元素绑定事件)、_updata(实现具体更新视图方法) 三个方法完成双向绑定。
__observe方法中,_binding储存数据相关更新的watcher对象列表,set函数触发回更新所有相关的绑定视图对象:
1 MyVue.prototype._observe = function (data) { 2 const _this = this 3 Object.keys(data).forEach(key => { 4 if (data.hasOwnProperty(key)) { 5 let value = data[key] 6 this._binding[key] = { 7 _directives: [] 8 } 9 this._observe(value) 10 11 Object.defineProperty(data, key, { 12 enumerable: true, 13 configurable: true, 14 get() { 15 return value 16 }, 17 set(newValue) { 18 if (value !== newValue) { 19 value = newValue 20 _this._binding[key]._directives.forEach(item => { 21 item._updata() 22 }) 23 } 24 } 25 }) 26 } 27 }) 28 }
_compile方法中,会对DOM中的绑定命令进行解析,并绑定相关的处理函数:
1 MyVue.prototype._compile = function (root) { 2 const _this = this 3 const nodes = root.children; 4 Object.values(nodes).forEach(nodeChild => { 5 if (nodeChild.children.length) { 6 this._compile(nodeChild) 7 } 8 9 if (nodeChild.hasAttribute('v-click')) { 10 nodeChild.addEventListener('click', (function (params) { 11 const attrVal = nodeChild.getAttribute('v-click'); 12 return _this.$methods[attrVal].bind(_this.$data) 13 })()) 14 } 15 16 if (nodeChild.hasAttribute('v-model') && (nodeChild.tagName = 'INPUT' || nodeChild.tagName == 'TEXTAREA')) { 17 nodeChild.addEventListener('input', (function (params) { 18 var attrVal = nodeChild.getAttribute('v-model'); 19 _this._binding[attrVal]._directives.push( 20 new Watcher({ 21 el: nodeChild, 22 vm: _this, 23 exp: attrVal, 24 attr: 'value' 25 }) 26 ) 27 28 return function () { 29 _this.$data[attrVal] = nodeChild.value; 30 } 31 })()) 32 } 33 34 if (nodeChild.hasAttribute('v-bind')) { 35 const attrVal = nodeChild.getAttribute('v-bind'); 36 _this._binding[attrVal]._directives.push( 37 new Watcher({ 38 el: nodeChild, 39 vm: _this, 40 exp: attrVal, 41 attr: 'innerHTML' 42 }) 43 ) 44 } 45 }) 46 }
_updata函数,主要在_compile函数中调用进行视图初始化和set函数调用更新绑定数据的相关视图:
1 function Watcher({ el, vm, exp, attr }) { 2 this.el = el 3 this.vm = vm 4 this.exp = exp 5 this.attr = attr 6 7 this._updata() 8 } 9 10 Watcher.prototype._updata = function () { 11 this.el[this.attr] = this.vm.$data[this.exp] 12 }
网上的一张属性劫持的运行图:
- Observer 数据监听器,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者,内部采用Object.defineProperty的getter和setter来实现。
- Compile 指令解析器,它的作用对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数。
- Watcher 订阅者, 作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数。
- Dep 消息订阅器,内部维护了一个数组,用来收集订阅者(Watcher),数据变动触发notify 函数,再调用订阅者的 update 方法。
完整的代码请参考 Two Way Binding
二、脏数据检查
主要通过执行一个检测来遍历所有的数据,对比你更改了地方,然后执行变化。
在脏检查中,作用域scope对象中会维护一个“watcher”数组,用来存放所以需要检测的表达式,以及对应的回调处理函数。
对于所有需要检测的对象、属性,scope通过“watch”方法添加到“watcher”数组中:
1 Scope.prototype.watch = function(watchExp, callback) { 2 this.watchers.push({ 3 watchExp: watchExp, 4 callback: callback || function() {} 5 }); 6 }
当Model对象发生变化的时候,调用“digest”方法进行脏检测,如果发现脏数据,就调用对应的回调函数进行界面的更新:
1 Scope.prototype.digest = function() { 2 var dirty; 3 4 do { 5 dirty = false; 6 7 for(var i = 0; i < this.watchers.length; i++) { 8 var newVal = this.watchers[i].watchExp(), 9 oldVal = this.watchers[i].last; 10 11 if(newVal !== oldVal) { 12 this.watchers[i].callback(newVal, oldVal); 13 dirty = true; 14 this.watchers[i].last = newVal; 15 } 16 } 17 } while(dirty); 18 19 }
完整的代码请参考 Two Way Binding
如果喜欢请关注我的Github,给个Star吧,我会定期分享一些JS中的知识,^_^
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- javascript面向对象入门基础详细介绍 2020-03-29
- js防止表单重复提交实现代码 2020-03-29
- 基于JQuery的多标签实现代码 2020-03-29
- js实现翻页后保持checkbox选中状态的实现方法 2020-03-25
- JavaScript函数表达式详解及实例 2020-03-25
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash