緣起
前幾天在看一些流行的迷你mvvm框架（例如avalon.js、 vue.js 這種較輕的框架，而非Angularjs、Emberjs這種較重的框架）的實作。現代流行的mvvm框架一般都會將資料雙向綁定（two-ways data binding）做掉，作為框架自身的一個賣點（ Ember.js 貌似是不支援資料雙向綁定的。），而且每種框架雙向數據綁定的實作方式都不太一致，例如Anguarjs內部使用的是髒檢查，而avalon.js內部實作方式的本質是設定屬性存取器。
這裡不打算具體的討論各個框架對雙向資料綁定的具體實現，僅說一下前端實現雙向資料綁定的幾種常用方法，並著重講一下avalon.js實現雙向資料綁定的技術選型。
雙向資料綁定的常規實作方式
首先我們來說一下何為前端的 雙向資料綁定 。簡單的來說，就是框架的控制器層（這裡的控制器層是一個泛指，可以理解為控制view行為和聯繫model層的中間件）和UI展示層（view層）建立一個雙向的資料通道。當這兩層中的任何一方發生變化時，另一層將會立即（或看起來是 立即 ）自動作出相應的變化。
一般來說要實現這種雙向資料綁定關係（控制器層與展示層的關聯過程），在前端目前會有三種方式，
1.髒檢查
2.觀察機制
3.封裝屬性存取器
髒檢查
我們說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;
}
};登入後複製
从上面的代码中我们可以管中窥豹，比如 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)
登入後複製
其中，
obj ，待修改的对象
prop ，带修改的属性名称
descriptor ，待修改属性的相关描述
descriptor 要求传入一个对象，其默认值如下，
/**
* @{param} descriptor
*/
{
configurable: false,
enumerable: false,
writable: false,
value: null,
set: undefined,
get: undefined
}登入後複製
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
});
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, 属性删除的动作也是无效的登入後複製
经过上述的示例，正常情况下 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;
}
});登入後複製
上面的代码看起来貌似是没有什么问题，但是真正执行时会报错，报错如下，
TypeError: Invalid property. A property cannot both have accessors and be writable or have a value, #<Object>
登入後複製
因为这里的 name 属性同时声明了 value 特性和 set 及 get 特性，这两者提供了两种对 name 属性的读写控制。这里如果不声明 value 特性，而是声明 writable 特性，结果也是一样的，同样会报错。
