前端流行的MVVM框架中,双向绑定算是比较大快人心的机制了.实现绑定的机制大致有几种

1.发布订阅模式:

　　使用html中的自定义data属性在代码中绑定数据,绑定以后的值在订阅中一个发布对象中,数值变化的时候被检测到发生了变化.发布订阅模式对广播到绑定的元素

 

2.脏值检测

　　代表作就是angular.js 以后补充

 

3.数据劫持

　　数据劫持时利用object的defineProperty来劫持各个属性,数据发生变化后触发回调函数

　　语法

　　Object.defineProperty(obj, prop, descriptor)

　　参数

　　obj
　　要在其上定义属性的对象。
　　prop
　　要定义或修改的属性的名称。
　　descriptor
　　将被定义或修改的属性描述符。

　　返回值

    　　被传递给函数的对象。

　　ES6

    　　在ES6中，由于 Symbol类型的特殊性，用Symbol类型的值来做对象的key与常规的定义或修改不同，而　　　　                     Object.defineProperty 是定义key为Symbol的属性的方法之一。

举个例子

var obj = {};
    Object.defineProperty(obj, 'huashao', {
        get: function() {
            console.log('get val:'+ getvalue);
            return val;
     　 },
    　　set: function(setvalue) {
            console.log('set val:'+ setvalue);
        }
    });
obj.huashao='huashao';
obj.huashao;

　　

 实现双向绑定

<!DOCTYPE html>
 <head></head>
 <body>
  <div id="app">
    <input type="text" id="a">
    <span id="b"></span>
  </div>

  <script type="text/javascript">
   var obj = {};
   Object.defineProperty(obj, 'huashao', {
       get: function() {
           console.log('get val:'+ getvalue);
           return val;
       },
       set: function(setvalue) {
            console.log('set val:'+ val);
            document.getElementById('a').value = setvalue;
            document.getElementById('b').innerHTML = setvalue;
       }
    });
    document.addEventListener('keyup', function(e) {
      obj.huashao= e.target.value;
    });
   </script>
  </body>
</html>