Java教程

对双向绑定的理解和总结

本文主要是介绍对双向绑定的理解和总结,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
  • 主流的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

这篇关于对双向绑定的理解和总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!