关于前端，有时候须要完成视图层和数据层的双向绑定(two-way-binding), 比方当前盛行的种种框架和类库:Vue.js、Angular.js、React.js。 但是，他们最原始的完成体式格局实在都相对比较简朴，只不过是厥后跟着种种Bug的涌现，才一如滚雪球般地被不停优化和强大。
所以，不要怕惧，多多进修并摄取它们的英华。
这里, 我也愿望经由过程简朴的思绪让你对数据的双向绑定有个也许相识，然后去看种种MVVM框架中关于数据双向绑定的完成才不会一头雾水。
先温习个知识点
Nodes 和 Elements 的区分
Element继续了Node,而Element是浩瀚Node范例中的个中一个, nodeType === 1, 所以,属于Node的属性能够用于Element，但Element的属性没法用于Node，听起来好拗口，看一下代码吧.
<div class="demo">
<p>大</p>
<p>轰</p>
</div>
var el = document.querySelector('.demo');
// true
console.log(el.children[0] instanceof Node);
// true
console.log(el.children[0] instanceof Element);
// true
console.log(el.childNodes[0] instanceof Node);
// false
console.log(el.childNodes[0] instanceof Element);
// undefined
console.log(typeof el.childNodes[0].children);
// object
console.log(typeof el.childNodes[0].childNodes);什么是数据和视图的双向绑定？
双向绑定关于明白Flux等架构所首倡的单向数据流特征有很好的协助, 简朴点说，就是将数据的变化绑定到UI, 同时UI的变化又和数据同步。如许一来，假如你是全站Ajax,你不必去管数据对UI的影响,同时也不必去管UI变化形成的数据变化,一致了数据操纵的进口,异常轻易保护。(不知道如许明白对不对, 望斧正)
总而言之，双向数据绑定的底层完成也许有两种:
1、手动绑定,同时运用dirty check去轮回监听。(Angular.js为代表)
2、前端数据挟制。(运用defineProperty, Vue.js貌似就是运用这类)
手动绑定 轮回监听触发 （一）
这类要领的完成相似**定阅者形式**,完成思绪是经由过程DOM的*keydown* *keyup*
*keypress* *change*等事宜触发*dirty check*(固然你也能够用setTimeout),
然后轮回监听并将value写入某实例变量内里,同时更新DOM。假如有时间,引荐去看一下Angular.js文档中关于digest / $watch的引见。
https://jsfiddle.net/fondadam/sdxhhoLx/2/embedded/js,html,result
前端数据挟制 (二)
第三种要领则是Vue.js等框架运用的数据挟制体式格局。基本思绪是运用Object.defineProperty对数据对象做属性get和set的监听，当有数据读取和赋值操纵时则挪用节点的指令，如许运用最通用的=等号赋值就能够触发了。
https://jsfiddle.net/fondadam/a4qhp06s/embedded/js,html,result
