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进行修改,修改也是无效;
    后者不能对目标属性重写赋值,赋值也无效;

    MVVM双向绑定实现之Object.defineProperty_第1张图片

  • 在使用Obejct.defineProperty方法定义对象属性时,若是属性描述符没有配置的,configurable、enumerable和writable默认为false,value默认为undefined,而get/set则不会配置;而在使用非Object.defineProperty方法定义对象属性,其configurable、enumerable和writable均为true,value为赋的值,get/setb不会配置;

    MVVM双向绑定实现之Object.defineProperty_第2张图片

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 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方法用于同步视图和其他操作。

  1 function modelFactory($scope, $special, $model) {
  2         
  3       //省略初始化代码
  4        ...
  5        ...
  6         var $vmodel = {} //要返回的对象, 它在IE6-8下可能被偷龙转凤
  7         $model = $model || {} //vmodels.$model属性
  8         var $events = {} //vmodel.$events属性
  9         var watchedProperties = {} //监控属性
 10         var computedProperties = [] //计算属性
 11         for (var i in $scope) {
 12             (function(name, val) {
 13                 $model[name] = val
 14                 ... //省略其他无关代码
 15 
 16                 //总共产生三种accessor
 17                 var accessor
 18                 var valueType = avalon.type(val)
 19                 $events[name] = []
 20                 //总共产生三种accessor
 21                 if (valueType === "object" && isFunction(val.get) && Object.keys(val).length <= 2) {
 22                     var setter = val.set
 23                     var getter = val.get
 24                     //第1种对应计算属性, 因变量,通过其他监控属性触发其改变
 25                     accessor = function(newValue) {
 26                         var $events = $vmodel.$events
 27                         var oldValue = $model[name]
 28                         if (arguments.length) {
 29                             if (stopRepeatAssign) {
 30                                 return
 31                             }
 32                             if (isFunction(setter)) {
 33                                 var backup = $events[name]
 34                                 $events[name] = [] //清空回调,防止内部冒泡而触发多次$fire
 35                                 setter.call($vmodel, newValue)
 36                                 $events[name] = backup
 37                             }
 38                         } else {
 39                             if (avalon.openComputedCollect) { // 收集视图刷新函数
 40                                 collectSubscribers($events[name])
 41                             }
 42                         }
 43                         newValue = $model[name] = getter.call($vmodel) //同步$model
 44                         if (!isEqual(oldValue, newValue)) {
 45                             withProxyCount && updateWithProxy($vmodel.$id, name, newValue) //同步循环绑定中的代理VM
 46                             notifySubscribers($events[name]) //同步视图
 47                             safeFire($vmodel, name, newValue, oldValue) //触发$watch回调
 48                         }
 49                         return newValue
 50                     }
 51                     
 52                 .... // 省略无关代码
 53     
 54                 } else if (rcomplexType.test(valueType)) {
 55                     //第2种对应子ViewModel或监控数组 
 56                     accessor = function(newValue) {
 57                         var childVmodel = accessor.child
 58                         var oldValue = $model[name]
 59                         if (arguments.length) {
 60                             if (stopRepeatAssign) {
 61                                 return
 62                             }
 63                             if (!isEqual(oldValue, newValue)) {
 64                                 childVmodel = accessor.child = updateChild($vmodel, name, newValue, valueType)
 65                                 newValue = $model[name] = childVmodel.$model //同步$model
 66                                 var fn = rebindings[childVmodel.$id]
 67                                 fn && fn() //同步视图
 68                                 safeFire($vmodel, name, newValue, oldValue) //触发$watch回调
 69                             }
 70                         } else {
 71                             collectSubscribers($events[name]) //收集视图函数
 72                             return childVmodel
 73                         }
 74                     }
 75                     var childVmodel = accessor.child = modelFactory(val, 0, $model[name])
 76                     childVmodel.$events[subscribers] = $events[name]
 77                 } else {
 78                     //第3种对应简单的数据类型,自变量,监控属性
 79                     accessor = function(newValue) {
 80                         var oldValue = $model[name]
 81                         if (arguments.length) {
 82                             if (!isEqual(oldValue, newValue)) {
 83                                 $model[name] = newValue //同步$model
 84                                 withProxyCount && updateWithProxy($vmodel.$id, name, newValue) //同步代理VM
 85                                 notifySubscribers($events[name]) //同步视图
 86                                 safeFire($vmodel, name, newValue, oldValue) //触发$watch回调
 87                             }
 88                         } else {
 89                             collectSubscribers($events[name])
 90                             return oldValue
 91                         }
 92                     }
 93                 }
 94                 watchedProperties[name] = accessor
 95             })(i, $scope[i])
 96         }
 97 
 98         ... //省略无关代码
 99 
100         $vmodel = defineProperties($vmodel, descriptorFactory(watchedProperties), $scope) //生成一个空的ViewModel
101         
102        ... //省略无关代码
103         return $vmodel
104     } 
105 
106 //生成avalon的vmodel的Object.defineProperty方法
107 
108 var descriptorFactory = W3C ? function(obj) {
109         var descriptors = {}
110         for (var i in obj) {
111             descriptors[i] = {
112                 get: obj[i],
113                 set: obj[i],
114                 enumerable: true,
115                 configurable: true
116             }
117         }
118         return descriptors
119     } : function(a) {
120         return a
121     }
View Code

 

参考文献:

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

你可能感兴趣的:(MVVM双向绑定实现之Object.defineProperty)