我們成功將內容都綁定到了輸入框與文本節點上！
4、實現任務2——【view => model
對于此任務，我們從輸入框考慮，輸入框的問題，輸入框如何改變data。我們通過事件監聽器keyup，input等，來獲取到最新的value，然后通過Object.defineProperty將獲取的最新的value，賦值給實例vm的text，我們把vm實例中的data下的text通過Object.defineProperty設置為訪問器屬性，這樣給vm.text賦值，就觸發了set。set函數的作用一個是更新data中的text，另一個等到任務三再說。
首先實現一個響應式監聽屬性的函數。一旦有賦新值就發生變化
然后，實現一個觀察者，對于一個實例 每一個屬性值都進行觀察。
改寫編譯函數，注意由于改成了訪問器屬性，訪問的方法也產生變化，同時添加了事件監聽器，把實例的text值隨時更新
實例函數中，觀察data中的所有屬性值，注意增添了observe
最終我們改變input中的內容能改變data中的數據，單頁面卻沒有刷新
4、實現任務3——【model => view】
通過修改vm實例的屬性 該改變輸入框的內容 與 文本節點的內容。
這里涉及到一個問題 需要我們注意，當我們修改輸入框，改變了vm實例的屬性，這是1對1的。
但是，我們可能在頁面中多處用到 data中的屬性，這是1對多的。也就是說，改變1個model的值可以改變多個view中的值。
這就需要我們引入一個新的知識點：
訂閱/發布者模式
訂閱發布模式（又稱觀察者模式）定義了一種一對多的關系，讓多個觀察者同時監聽某一個主題對象，這個主題對象的狀態發生改變時就會通知所有觀察者對象。
發布者發出通知 => 主題對象收到通知并推送給訂閱者 => 訂閱者執行相應操作
1
舉個例子：
之前提到的set函數的第二個作用 就是來提醒訂閱者 進行noticy操作，告訴他們：“我的text變了！” 文本節點變成了訂閱者，接到消息后，立馬進行update操作
回顧一下，每當 new 一個 Vue，主要做了兩件事：第一個是監聽數據：observe(data)，第二個是編譯 HTML：nodeToFragement(id)。
在監聽數據的過程中，我們會為 data 中的每一個屬性生成一個主題對象 dep。
在編譯 HTML 的過程中，會為每個與數據綁定相關的節點生成一個訂閱者 watcher，watcher 會將自己添加到相應屬性的 dep 容器中。
我們已經實現：修改輸入框內容 => 在事件回調函數中修改屬性值 => 觸發屬性的 set 方法。
接下來我們要實現的是：發出通知 dep.notify() => 觸發訂閱者的 update 方法 => 更新視圖。
這里的關鍵邏輯是：如何將 watcher 添加到關聯屬性的 dep 中。
注意： 我把直接賦值的操作改為了 添加一個 Watcher 訂閱者
那么，Watcher又該做些什么呢？
首先，將自己賦給了一個全局變量 Dep.target；
其次，執行了 update 方法，進而執行了 get 方法，get 的方法讀取了 vm 的訪問器屬性，從而觸發了訪問器屬性的 get 方法，get 方法中將該 watcher 添加到了對應訪問器屬性的 dep 中；
再次，獲取屬性的值，然后更新視圖。
最后，將 Dep.target 設為空。因為它是全局變量，也是 watcher 與 dep 關聯的唯一橋梁，任何時刻都必須保證 Dep.target 只有一個值。
最終我們就實現了這個雙向數據綁定功能，雖然很繁瑣，但我相信，你多打幾遍，一定會對你有所幫助，加油吧!!
在javascript中并沒有原生的創建或者實現接口的方式，或者判定一個類型是否實現了某個接口，我們只能利用js的靈活性的特點，模擬接口。
在javascript中實現接口有三種方式：注釋描述、屬性驗證、鴨子模型。
note：因為我看的是英文書，翻譯水平有限，不知道有些詞匯如何翻譯，大家只能領會精神了。
1. 注釋描述 （Describing Interfaces with Comments）
例子：
復制代碼 代碼如下:
/*
interface Composite {
function add(child);
function remove(child);
function getChild(index);
}
interface FormItem {
function save();
}
*/
var CompositeForm = function(id, method, action) { // implements Composite, FormItem
...
};
//Implement the Composite interface.
CompositeForm.prototype.add = function(child) {
...
};
CompositeForm.prototype.remove = function(child) {
...
};
CompositeForm.prototype.getChild = function(index) {
...
};
// Implement the FormItem interface.
CompositeForm.prototype.save = function() {
...
};
模擬其他面向對象語言，使用interface 和 implements關鍵字，但是需要將他們注釋起來，這樣就不會有語法錯誤。
這樣做的目的，只是為了告訴其他編程人員，這些類需要實現什么方法，需要在編程的時候加以注意。但是沒有提供一種驗證方式，這些類是否正確實現了這些接口中的方法，這種方式就是一種文檔化的作法。
2. 屬性驗證（Emulating Interfaces with Attribute Checking）
例子：
復制代碼 代碼如下:
/* interface
Composite {
function add(child);
function remove(child);
function getChild(index);
}
interface FormItem {
function save();
}
*/
var CompositeForm = function(id, method, action) {
this.implementsInterfaces = ['Composite', 'FormItem'];
...
};
...
function addForm(formInstance) {
if(!implements(formInstance, 'Composite', 'FormItem')) {
throw new Error("Object does not implement a required interface.");
}
...
}
// The implements function, which checks to see if an object declares that it
// implements the required interfaces.
function implements(object) {
for(var i = 1; i < arguments.length; i++) {
// Looping through all arguments
// after the first one.
var interfaceName = arguments[i];
var interfaceFound = false;
for(var j = 0; j < object.implementsInterfaces.length; j++) {
if(object.implementsInterfaces[j] == interfaceName) {
interfaceFound = true;
break;
}
}
if(!interfaceFound) {
return false;
// An interface was not found.
}
}
return true; <