缘起
头几天在看一些盛行的迷你mvvm框架（比方avalon.js、 vue.js 这类较轻的框架，而非Angularjs、Emberjs这类较重的框架）的完成。当代盛行的mvvm框架平常都会将数据双向绑定（two-ways data binding）做掉，作为框架本身的一个卖点（ Ember.js 貌似是不支撑数据双向绑定的。），而且每种框架双向数据绑定的完成体式格局都不太一致，比方Anguarjs内部运用的是 脏搜检，而avalon.js内部完成体式格局的实质是设置 属性接见器 。

这里不盘算详细的议论各个框架对双向数据绑定的详细完成，仅说一下前端完成双向数据绑定的几种经常使用要领，并着重讲一下avalon.js完成双向数据绑定的手艺选型。

双向数据绑定的通例完成体式格局
起首我们来讲一下作甚前端的 双向数据绑定 。简朴的来讲，就是框架的掌握器层（这里的掌握器层是一个泛指，能够理解为掌握view行动和联络model层的中间件）和UI展现层（view层）竖立一个双向的数据通道。当这两层中的任何一方发作变化时，另一层将会马上（或许看起来是 马上）自行动出响应的变化。

平常来讲要完成这类双向数据绑定关联（掌握器层与展现层的关联历程），在前端现在会有三种体式格局，

脏搜检
视察机制
封装属性接见器
脏搜检
我们说Angularjs（这里特指AngularJS 1.x.x版本，不代表AngularJS 2.x.x版本）双向数据绑定的手艺完成是脏搜检，大抵的道理就是，Angularjs内部会保护一个序列，将一切须要监控的属性放在这个序列中，当发作某些特定事宜时（注重，这里并非定时的而是由某些特别事宜触发的），Angularjs会挪用 $digest 要领，这个要领内部做的逻辑就是遍历一切的watcher，对被监控的属性做对照，对照其在要领挪用前后属性值有无发作变化，假如发作变化，则挪用对应的handler。网上有很多理会Angularjs双向数据绑定完成道理的文章，比方 这篇 ，再比方 这篇 ，等等。

这类体式格局的瑕玷很明显，遍历轮训watcher是异常斲丧机能的，特别是当单页的监控数目到达一个数目级的时刻。

视察机制
博主之前有一篇转载翻译的文章， Object.observe()带来的数据绑定革新 ，说的就是运用ECMAScript7中的 Object.observe 要领对对象（或许其属性）举行监控视察，一旦其发作变化时，将会实行响应的handler。

这是现在监控属性数据变动最圆满的一种要领，言语（浏览器）原生支撑，没有什么比这个更好了。唯一的遗憾就是现在支撑广度还不可，有待全面推广。

封装属性接见器
在php中有 把戏要领 如许一种观点，比方php中的 __get() 和 __set() 要领。在javascript中也有相似的观点，不过不叫把戏要领，而是叫做接见器。我们来看个示例代码，

var data = {
 name: "erik",
 getName: function() {
 return this.name;
 },
 setName: function(name) {
 this.name = name;
 }
};
</pre>

从上面的代码中我们能够坐井观天，比方 data 中的 getName() 和 setName() 要领，我们能够简朴的将其算作 data.name 的接见器（或许叫做 存取器 ）。

实在，针对上述的代码，越发严厉一点的话，不允许直接接见 data.name 属性，一切对 data.name 的读写都必需经由过程 data.getName() 和 data.setName() 要领。所以，设想一下，一旦某个属性不允许对其举行直接读写，而必需是经由过程接见器举行读写时，那末我固然经由过程重写属性的接见器要领来做一些分外的情，比方属性值变动监控。运用属性接见器来做数据双向绑定的道理就是在此。

这类要领固然也有弊病，最凸起的就是每增加一个属性监控，都必需为这个属性增加对应接见器要领，不然这个属性的变动就没法捕捉。

Object.defineProperty 要领
国产mvvm框架avalon.js完成数据双向绑定的道理就是属性接见器。不过它固然不会像上述示例代码一样原始。它运用了ECMAScript5.1（ECMA-262）中定义的规范属性 Object.defineProperty 要领。针对国内行情，部份还不支撑 Object.defineProperty 初级浏览器采纳VBScript作了圆满兼容，不像其他的mvvm框架已逐步摒弃对低端浏览器的支撑。

我们先来MDN上对 Object.defineProperty 要领的定义，

The Object.defineProperty() method defines a new property directly on an object, or modifies an existing property on an object, and returns the object.

意义很明白， Object.defineProperty 要领供应了一种直接的体式格局来定义对象属性或许修正已有对象属性。其要领原型以下，

Object.defineProperty(obj, prop, descriptor)
</pre>

</figure>

个中，

obj ，待修正的对象
prop ，带修正的属性称号
descriptor ，待修正属性的相干形貌
descriptor 请求传入一个对象，其默认值以下，

 * @{param} descriptor
 */
   　　}//迎接到场全栈开辟交换圈一同进修交换：582735936
  　　]//面向1-3年前端职员
　　}   //协助打破手艺瓶颈，提拔思维能力
{
 configurable: false,
 enumerable: false,
 writable: false,
 value: null,
 set: undefined,
 get: undefined
}
</pre>

</figure>
configurable ，属性是不是可设置。可设置的寄义包含：是不是能够删除属性（ delete ），是不是能够修正属性的 writable 、 enumerable 、 configurable 属性。
enumerable ，属性是不是可罗列。可罗列的寄义包含：是不是能够经由过程 for...in 遍历到，是不是能够经由过程 Object.keys() 要领猎取属性称号。
writable ，属性是不是可重写。可重写的寄义包含：是不是能够对属性举行从新赋值。
value ，属性的默认值。
set ，属性的重写器（临时这么叫）。一旦属性被从新赋值，此要领被自动挪用。
get ，属性的读取器（临时这么叫）。一旦属性被接见读取，此要领被自动挪用。

下面来一段示例代码，

var o = {};
Object.defineProperty(o, 'name', {
 value: 'erik'
});

console.log(Object.getOwnPropertyDescriptor(o, 'name')); // Object {value: "erik", writable: false, enumerable: false, configurable: false}

Object.defineProperty(o, 'age', {
 value: 26,
 configurable: true,
 writable: true
});
   　　}//迎接到场全栈开辟交换圈一同进修交换：582735936
  　　]//面向1-3年前端职员
　　}   //协助打破手艺瓶颈，提拔思维能力
console.log(o.age); // 26

o.age = 18;
console.log(o.age); // 18. 由于age属性是可重写的

console.log(Object.keys(o)); // []. name和age属性都不是可罗列的

Object.defineProperty(o, 'sex', {
 value: 'male',
 writable: false
});

o.sex = 'female'; // 这里的赋值实际上是不起作用的
console.log(o.sex); // 'male';

delete o.sex; // false, 属性删除的行动也是无效的
</pre>

</figure>

经由上述的示例，一般情况下 Object.definePropert() 的运用都是比较简朴的。

不过照样有一点须要分外注重一下， Object.defineProperty() 要领设置属性时，属性不能同时声明接见器属性（ set 和 get ）和 writable 或许 value 属性。 意义就是，某个属性设置了writable 或许 value 属性，那末这个属性就不能声明 get 和 set 了，反之亦然。

由于 Object.defineProperty() 在声明一个属性时，不允许同一个属性涌现两种以上存取接见掌握。

示例代码，

var o = {},
 myName = 'erik';
Object.defineProperty(o, 'name', {
 value: myName,
 set: function(name) {
 myName = name;
 },
 get: function() {
 return myName;
 }
});
</pre>

</figure>

上面的代码看起来貌似是没有什么问题，然则真正实行时会报错，报错以下，

TypeError: Invalid property.  A property cannot both have accessors and be writable or have a value, #<Object>
</pre>

</figure>
由于这里的 name 属性同时声清楚明了 value 特征和 set 及 get 特征，这两者供应了两种对 name 属性的读写掌握。这里假如不声明 value 特征，而是声明 writable 特征，效果也是一样的，同样会报错。