随身笔记
随身笔记

avalon.js原理以及Object.defineProperty

avalon.js是基于Object.defineProperty实现的双向数据绑定的,但是对于IE6/7/8浏览器的不兼容就使用VBscript做兼容处理,这里就不考虑VB了,来介绍下Object.defineProperty封装属性访问器。

Object.defineProperty(obj, prop, descriptor)  //待修改的对象,带修改的属性名称,待修改属性的相关描述

例子:

var obj={};

Object.defineProperty(obj, "name", {  //作用对象是obj,设置name属性(可能是修改或者添加属性名)
  value:undefined, //属性的默认值
  writable:false, //属性是否可重写。可重写的含义包括:是否可以对属性进行重新赋值
  enumerable:false, //属性是否可枚举。可枚举的含义包括:是否可以通过 for...in 遍历到,是否可以通过 Object.keys() 方法获取属性名称。
  configuration:false, //属性是否可配置。可配置的含义包括:是否可以删除属性( delete ),是否可以修改属性的 writable 、 enumerable 、 configurable 属性
  set:function(){ 
      //属性的重写器(暂且这么叫)。一旦属性被重新赋值,此方法被自动调用
  },
  get:function(){
      //属性的读取器(暂且这么叫)。一旦属性被访问读取,此方法被自动调用
  }
});

注意:某个属性设置了 writable 或者 value 属性,那么这个属性就不能声明 get 和 set 了,反之亦然。

原作者地址还简单介绍了其他mvvm的实现原理感谢蛋糕仙人: http://blog.gejiawen.com/2015/04/02/2-way-data-binding-and-define-property/

 

更多的Object.defineProperty参数中的descriptor介绍:

http://www.jb51.net/article/48594.htm

https://sdeno.com/?p=5007

 

MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

随身笔记

avalon.js原理以及Object.defineProperty
avalon.js是基于Object.defineProperty实现的双向数据绑定的,但是对于IE6/7/8浏览器的不兼容就使用VBscript做兼容处理,这里就不考虑VB了,来介绍下Object.defineProperty封装属性访问器…
扫描二维码继续阅读
2016-04-27