何為雙向數據綁定?
雙向數據綁定即為
1、當與用户交互時,用户修改視圖上的數據(如文本框等),model中的數據也會跟着改變;
2、當model數據發生改變時,視圖上渲染了該數據的地方也會跟着更新。
如何實現雙向數據綁定?
數據劫持、觀察者Observer、訂閲者Watcher、Compile解析器
頁面初次渲染
1、使用遞歸劫持數據,為每個對象以及每個對象的屬性添加getter和setter方法(使用ES5的Object.defineProperty);
2、compile解析模板,將模板的變量解析成data中的數據;
3、為節點添加監聽數據的訂閲者watcher,並且自身還有update更新函數。
view改變->model更新
1、view更新,觸發事件;
2、在事件回調中調用數據的setter方法,更新model中的數據;
3、在setter方法中,數據的oberve觀察到了數據的變化,向訂閲者們發出通知dep.notice();
4、訂閲者們收到通知,並調用自身的update()方法,觸發Compile中綁定的回調,重新解析模板。
model改變->view更新
以上的3-4步
(自己的理解,如有問題,請指出!)