關(guān)于javascript實(shí)現(xiàn)數(shù)據(jù)雙向綁定的三種方法分享

前端數(shù)據(jù)的雙向綁定方法

前端的視圖層和數(shù)據(jù)層有時(shí)需要實(shí)現(xiàn)雙向綁定(two-way-binding)，例如mvvm框架，數(shù)據(jù)驅(qū)動(dòng)視圖，視圖狀態(tài)機(jī)等，研究了幾個(gè)目前主流的數(shù)據(jù)雙向綁定框架，總結(jié)了下。目前實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要有以下三種。

1、手動(dòng)綁定

比較老的實(shí)現(xiàn)方式，有點(diǎn)像觀察者編程模式，主要思路是通過(guò)在數(shù)據(jù)對(duì)象上定義get和set方法(當(dāng)然還有其它方法)，調(diào)用時(shí)手動(dòng)調(diào)用get或set數(shù)據(jù)，改變數(shù)據(jù)后出發(fā)UI層的渲染操作；以視圖驅(qū)動(dòng)數(shù)據(jù)變化的場(chǎng)景主要應(yīng)用與input、select、textarea等元素，當(dāng)UI層變化時(shí)，通過(guò)監(jiān)聽(tīng)dom的change，keypress，keyup等事件來(lái)出發(fā)事件改變數(shù)據(jù)層的數(shù)據(jù)。整個(gè)過(guò)程均通過(guò)函數(shù)調(diào)用完成。

2、臟檢查機(jī)制

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

3、前端數(shù)據(jù)劫持(Hijacking)

第三種方法則是avalon等框架使用的數(shù)據(jù)劫持方式。基本思路是使用Object.defineProperty對(duì)數(shù)據(jù)對(duì)象做屬性get和set的監(jiān)聽(tīng)，當(dāng)有數(shù)據(jù)讀取和賦值操作時(shí)則調(diào)用節(jié)點(diǎn)的指令，這樣使用最通用的=等號(hào)賦值就可以了。具體實(shí)現(xiàn)如下：

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

4、小結(jié)

首先這里的例子只是簡(jiǎn)單的實(shí)現(xiàn)，讀者可以深入感受三種方式的異同點(diǎn)，復(fù)雜的框架也是通過(guò)這樣的基本思路滾雪球滾大的。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com