昨天被導師叫去研究了一下vue的雙向數據綁定原理。。。本來以為原理的東西都非常高深,沒想到vue的雙向綁定真的很好理解啊。。。自己動手寫了一個。

傳送門

雙向綁定的思想

雙向數據綁定的思想就是數據層與UI層的同步,數據再兩者之間的任一者發(fā)生變化時都會同步更新到另一者。

雙向綁定的一些方法

目前,前端實現(xiàn)數據雙向數據綁定的方法大致有以下三種:

1.發(fā)布者-訂閱者模式(backbone.js)

思路:使用自定義的data屬性在HTML代碼中指明綁定。所有綁定起來的JavaScript對象以及DOM元素都將“訂閱”一個發(fā)布者對象。任何時候如果JavaScript對象或者一個HTML輸入字段被偵測到發(fā)生了變化,我們將代理事件到發(fā)布者-訂閱者模式,這會反過來將變化廣播并傳播到所有綁定的對象和元素。

2.贓值檢測(angular.js)

思路:通過輪詢的方式檢測數據變動。才特定的事件觸發(fā)時進入贓值檢測。

大致如下:

?   DOM事件,譬如用戶輸入文本,點擊按鈕等。( ng-click )

?   XHR響應事件 ( $http )

?   瀏覽器Location變更事件 ( $location )

網友評論