MVVM双向绑定实现之Object.defineProperty

　　随着web应用的发展，直接操作dom的应用已渐行渐远，取而代之的是时下越来越流行的MVVM框架，dom操作几乎绝迹，这里面自然是框架底层封装的结果。MVVM框架的双向数据绑定使开发效率大大提高；然后在实现这些双向数据绑定时，使用ES7原生的Object.observe方法则是完美解决方案，但是遗憾的是该方法目前还是ES7的草案阶段，各浏览器还不支持，目前chrome 36+支持该方法。

　　既然Object.observe不被支持，但是其替代方案是ECMAScript 262v5带来的新东西Object.defineProperty和Object.defineProperties方法也可以很优雅的实现双向数据绑定。主要是利用在定义一个对象的属性时，可以设置其set和get方法，用于对对象的该属性进行设置或者读取时的“拦截”操作，类似于"钩子"，即在一定的情况下执行特定的逻辑；目前使用该方案实现的MVVM框架有avalon、vue等，但是目前比较流行的angularjs框架缺使用为人诟病的"脏检查"机制实现，这也是其性能遭人吐槽低的一个原因，据说目前angularjs2会改造这一实现机制。

好了，言归正传，接下来看看defineProperty的使用

1、用法

语法： Object.defineProperty(obj, attr, descriptor)

从语法可以看出，该方法接受三个参数:

　　obj 为属性attr所属的对象；

　　attr 为obj对象新定义或者修改的属性名；

　　descriptor 为该对象属性的描述符，其中其有6个配置项：

• value: 属性的值，默认undefined
• configurable: 默认为false，true表示当前属性是否可以被改变或者删除，其中”改变“是指属性的descriptor的配置项configurable、enumerable和writable的修改
• enumerable：默认为false，true表示当前属性能否被for...in或者Objectk.keys语句枚举
• writable：默认为false，true表示当前属性的值可以被赋值重写
• get：默认undefined，获取目标属性时执行的回调方法，该函数的返回值作为该属性的值
• set：默认undefined，目标属性的值被重写时执行的回调

从上面的用法可以知道：可以通过设置get和set方法对属性的读取和修改进行拦截，通过将实现数据和视图同步的逻辑置于这两个方法中，从而实现数据变更视图也可以跟着同步，反之则需要配合事件了；

var obj = {};

Object.defineProperty(obj, 'name', {
    "value": "wonyun",
    "configurable": false
});

Object.getOwnPropertyDescriptor(obj, 'name') //Object {value: "wonyun", writable: false, enumerable: false, configurable: false}

2、注意事项

　　上面介绍了Object.defineProperty的用法，但是其使用还是有很多注意的地方，一不留心就会出错。

• 不允许同一个属性存在两个及以上的存取访问器配置，所以writable或者value不能与get/set同时配置，否则报错。

  var obj = {};
  
  Object.defineProperty(obj, 'name', {
      "writable": false,
      "get": function(){},
      "set": function(){}
  });

  执行上面代码，会发现控制台报错”Uncaught TypeError: Invalid property.  A property cannot both have accessors and be writable or have a value“，

  

  

• configurable和writable设置为false的区别是：前者不能在对目标属性的configurable、enumerable和writable进行修改，修改也是无效；
  后者不能对目标属性重写赋值,赋值也无效；
  
  
• 在使用Obejct.defineProperty方法定义对象属性时，若是属性描述符没有配置的，configurable、enumerable和writable默认为false，value默认为undefined，而get/set则不会配置；而在使用非Object.defineProperty方法定义对象属性，其configurable、enumerable和writable均为true，value为赋的值，get/setb不会配置；
  
  

3、兼容性

　　就如本文开头说的，Obejct.defineProperty方法ECMAScript 262v5带来的新特性，支持ES5的浏览器才可使用该方法；当然这就涉及到其使用的浏览器兼容性问题；目前非IE浏览器的标准浏览器都支持该特性了，当然在天朝，你懂得还有些不少ie6-8的用户，这些低版本的IE浏览器是不支持Object.defineProperty的。话说回来，随着微软自己放弃维护这些低版本的ie浏览器，ie6-8的使用占比是越来越低，这也是当前一些前端框架不在支持ie6、7、8浏览器的一大原因，像angularjs、vuejs都不支持低版本ie浏览器，看来低版本的ie6也快走到尽头。

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	4.0	5	9	11.60	5.1

4、Object.defineProperties(obj, descriptors)

　　Object.defineProperty方法只能定义单个对象的属性，当然也就有批量定义对象属性的方法，Object.defineProperties方法就是干这个的：在一个对象添加或者修改一个或者多个属性。它与Object.defineProperty不同的地方是它只有两个参数，其中第二参数为一个配置对象，其键值为对象的属性名，其值为属性名的配置项，如：

var obj = {}

Object.defineProperties(obj, {
  name: {
        value: "wonyun",
        writable: true,
        enumerable: true,
        configurable: true
    },
  age: {
        value: 20,
        writable: true
    }
})

5、Object.defineProperty在avalon中的运用

　　avalon中的利用Object.defineProperty,为其定义一个accessor来同步视图，每次改变或者读取vmodel对象中的属性时候，会调用accessor方法用于同步视图和其他操作。

 function modelFactory($scope, $special, $model) {

       //省略初始化代码
        ...
        ...
         var $vmodel = {} //要返回的对象, 它在IE6-8下可能被偷龙转凤
         $model = $model || {} //vmodels.$model属性
         var $events = {} //vmodel.$events属性
         var watchedProperties = {} //监控属性
         var computedProperties = [] //计算属性
         for (var i in $scope) {
             (function(name, val) {
                 $model[name] = val
                 ... //省略其他无关代码

                 //总共产生三种accessor
                 var accessor
                 var valueType = avalon.type(val)
                 $events[name] = []
                 //总共产生三种accessor
                 if (valueType === "object" && isFunction(val.get) && Object.keys(val).length <= 2) {
                     var setter = val.set
                     var getter = val.get
                     //第1种对应计算属性， 因变量，通过其他监控属性触发其改变
                     accessor = function(newValue) {
                         var $events = $vmodel.$events
                         var oldValue = $model[name]
                         if (arguments.length) {
                             if (stopRepeatAssign) {
                                 return
                             }
                             if (isFunction(setter)) {
                                 var backup = $events[name]
                                 $events[name] = [] //清空回调，防止内部冒泡而触发多次$fire
                                 setter.call($vmodel, newValue)
                                 $events[name] = backup
                             }
                         } else {
                             if (avalon.openComputedCollect) { // 收集视图刷新函数
                                 collectSubscribers($events[name])
                             }
                         }
                         newValue = $model[name] = getter.call($vmodel) //同步$model
                         if (!isEqual(oldValue, newValue)) {
                             withProxyCount && updateWithProxy($vmodel.$id, name, newValue) //同步循环绑定中的代理VM
                             notifySubscribers($events[name]) //同步视图
                             safeFire($vmodel, name, newValue, oldValue) //触发$watch回调
                         }
                         return newValue
                     }

                 .... // 省略无关代码

                 } else if (rcomplexType.test(valueType)) {
                     //第2种对应子ViewModel或监控数组
                     accessor = function(newValue) {
                         var childVmodel = accessor.child
                         var oldValue = $model[name]
                         if (arguments.length) {
                             if (stopRepeatAssign) {
                                 return
                             }
                             if (!isEqual(oldValue, newValue)) {
                                 childVmodel = accessor.child = updateChild($vmodel, name, newValue, valueType)
                                 newValue = $model[name] = childVmodel.$model //同步$model
                                 var fn = rebindings[childVmodel.$id]
                                 fn && fn() //同步视图
                                 safeFire($vmodel, name, newValue, oldValue) //触发$watch回调
                             }
                         } else {
                             collectSubscribers($events[name]) //收集视图函数
                             return childVmodel
                         }
                     }
                     var childVmodel = accessor.child = modelFactory(val, 0, $model[name])
                     childVmodel.$events[subscribers] = $events[name]
                 } else {
                     //第3种对应简单的数据类型，自变量，监控属性
                     accessor = function(newValue) {
                         var oldValue = $model[name]
                         if (arguments.length) {
                             if (!isEqual(oldValue, newValue)) {
                                 $model[name] = newValue //同步$model
                                 withProxyCount && updateWithProxy($vmodel.$id, name, newValue) //同步代理VM
                                 notifySubscribers($events[name]) //同步视图
                                 safeFire($vmodel, name, newValue, oldValue) //触发$watch回调
                             }
                         } else {
                             collectSubscribers($events[name])
                             return oldValue
                         }
                     }
                 }
                 watchedProperties[name] = accessor
             })(i, $scope[i])
         }

         ... //省略无关代码

         $vmodel = defineProperties($vmodel, descriptorFactory(watchedProperties), $scope) //生成一个空的ViewModel

        ... //省略无关代码
         return $vmodel
     } 

 //生成avalon的vmodel的Object.defineProperty方法

 var descriptorFactory = W3C ? function(obj) {
         var descriptors = {}
         for (var i in obj) {
             descriptors[i] = {
                 get: obj[i],
                 set: obj[i],
                 enumerable: true,
                 configurable: true
             }
         }
         return descriptors
     } : function(a) {
         return a
     }

参考文献：

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
• http://segmentfault.com/a/1190000003109392