前端數據的雙向綁定方法

前端的視圖層和數據層有時需要實現雙向綁定(two-way-binding)，例如mvvm框架，數據驅動視圖，視圖狀態機等，研究了幾個目前主流的數據雙向綁定框架，總結了下。目前實現數據雙向綁定主要有以下三種。

1、手動綁定

比較老的實現方式，有點像觀察者編程模式，主要思路是通過在數據對象上定義get和set方法(當然還有其它方法)，調用時手動調用get或set數據，改變數據后出發UI層的渲染操作；以視圖驅動數據變化的場景主要應用與input、select、textarea等元素，當UI層變化時，通過監聽dom的change，keypress，keyup等事件來出發事件改變數據層的數據。整個過程均通過函數調用完成。

2、臟檢查機制

以典型的mvvm框架angularjs為代表，angular通過檢查臟數據來進行UI層的操作更新。關于angular的臟檢測，有幾點需要了解些： - 臟檢測機制并不是使用定時檢測。 - 臟檢測的時機是在數據發生變化時進行。 - angular對常用的dom事件，xhr事件等做了封裝， 在里面觸發進入angular的digest流程。 - 在digest流程里面， 會從rootscope開始遍歷， 檢查所有的watcher。 （關于angular的具體設計可以看其他文檔，這里只討論數據綁定），那我們看下臟檢測該如何去做：主要是通過設置的數據來需找與該數據相關的所有元素，然后再比較數據變化，如果變化則進行指令操作

3、前端數據劫持(Hijacking)

第三種方法則是avalon等框架使用的數據劫持方式。基本思路是使用Object.defineProperty對數據對象做屬性get和set的監聽，當有數據讀取和賦值操作時則調用節點的指令，這樣使用最通用的=等號賦值就可以了。具體實現如下：

但值得注意的是defineProperty支持IE8以上的瀏覽器，這里可以使用defineGetter 和 defineSetter 來做兼容但是瀏覽器兼容性的原因，直接用defineProperty就可以了。至于IE8瀏覽器仍需要使用其它方法來做hack。如下代碼可以對IE8進行hack，defineProperty支持IE8。例如使用es5-shim.js就可以了。（IE8以下瀏覽器忽略）

4、小結

首先這里的例子只是簡單的實現，讀者可以深入感受三種方式的異同點，復雜的框架也是通過這樣的基本思路滾雪球滾大的。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com