我們成功將內容都綁定到了輸入框與文本節點上!
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; <