-
主流的mvc(vm)框架都实现了单向数据绑定,即数据(model)变化主动触发ui(view)变化
-
而双向绑定则是,数据(model)变化主动触发ui(view)变化,同时ui(view)变化主动触发数据(model)变化,当然这里的ui变化指定表单中的用户输入,可通俗的理解为:在单向绑定的基础上给可输入元素(input、textarea等)添加change(input)事件,来动态修改model和view
双向绑定的简单实现
首先通过输入框和P标签展示,通过Object.defineProperty实现一个简易双向绑定的案例来进行理解
<h1>极简的双向绑定</h1>
<input type="text" id='txt_id' />
<p id="p_id"></p>
<script type="text/javascript">
/*
简单介绍下Object.defineProperty,有三个参数
第一个参数:属性所在的对象
第二个参数:是你要操作的属性
第三个参数:被操作属性的的特性,这个参数的格式是,{}
一般是两个
get,读取属性时触发;
set,写入属性时触发;
*/
var _xxObj = {};
Object.defineProperty(_xxObj,'xx_val',{
get:function() {
console.log('gggg')
return 'xx123'
},
set:function(_n) {
console.log(_n)
document.getElementById('txt_id').value = _n;
document.getElementById('p_id').innerHTML = _n;
}
})
document.addEventListener('keyup',function(e){
// console.log(e.target.value)
_xxObj.xx_val = e.target.value;
})
</script>
对vue双向绑定的理解:
Vue.js是采用数据劫持结合发布者-订阅者模式的方式。
通过Object.defineProperty()来劫持各个属性的setter和getter,在数据变动时发布消息给订阅者,触发相应的监听回调
实现的思路及步骤总结:
- 实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
- 实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模版替换数据,以及绑定相应的更新函数
- 实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应的回调函数,从而更新视图
- mvvm入口函数,整合以上三者
参考具体实现的源码及文章如下:https://github.com/DMQ/mvvm