很多的前端框架都支持?jǐn)?shù)據(jù)雙向綁定了，最近正好在看雙向綁定的實(shí)現(xiàn)，就用Javascript寫了幾個(gè)簡(jiǎn)單的例子。

幾個(gè)例子中嘗試使用了下面的方式實(shí)現(xiàn)雙向綁定：

  1. 發(fā)布/訂閱模式

  2. 屬性劫持

  3. 臟數(shù)據(jù)檢測(cè)

發(fā)布/訂閱模式

實(shí)現(xiàn)數(shù)據(jù)雙向綁定最直接的方式就是使用PubSub模式：

  • 當(dāng)model發(fā)生改變的時(shí)候，觸發(fā)Model change事件，然后通過響應(yīng)的事件處理函數(shù)更新界面

  • 當(dāng)界面更新的時(shí)候，觸發(fā)UI change事件， 然后通過相應(yīng)的事件處理函數(shù)更新Model，以及綁定在Model上的其他界面控件

根據(jù)這個(gè)思路，可以定義'ui-update-event'和'model-update-event'兩個(gè)事件，然后針對(duì)Model和UI分別進(jìn)行這兩個(gè)事件訂閱和發(fā)布。

UI更新

對(duì)于所有支持雙向綁定的頁面控件，當(dāng)控件的“值”發(fā)生改變的時(shí)候，就觸發(fā)'ui-update-event'，然后通過事件處理函數(shù)更新Model，以及綁定在Model上的其他界面控件

處理控件“值”的改變，發(fā)布“ui-update-event”事件，（這里只處理包含“t-binding”屬性的控件）：

        		
網(wǎng)友評(píng)論