利用jquery實現雙向數據綁定

首先我們要明確數據綁定的定義：數據綁定指的是將一個用戶界面元素（控件）的屬性綁定到一個類型（對象）實例上的某個屬性，當對象的屬性發生變化時能夠同時改變對應的UI。

在不瞭解原理就直接使用過前端框架的開發者眼中，數據綁定的效果即是某個變量和某個輸入框的數據能保持同步，一者變另一者隨之改變，這種效果用簡單的js語句即可實現，1是當變量改變時將變量賦值給輸入框，2是給輸入框添加change或input事件。這僅僅是實現數據綁定的基礎，真正意義上的數據綁定是封裝內部操作過程，做到當變量變化時綁定了該變量的所有元素都自動更新。

目前主流的框架都實現了單向數據綁定，而雙向數據綁定不過是在單向數據綁定的基礎上，給可輸入元素添加change或input事件。

實現數據綁定的方式大致有如下三種：1、觀察者模式，2、髒值檢查，3、數據劫持。本文采用第一種方式實現數據綁定。觀察者模式又名發佈-訂閱模式，GOF給觀察者模式如下定義：定義對象間的一種一對多的依賴關係，當一個對象的狀態發生改變時，所有依賴於它的對象都得到通知並被自動更新。

通過jQuery實現數據雙向數據綁定的方法就是使用自定義的data屬性作為HTML代碼中需要綁定的屬性，所有被綁定在一起的JavaScript對象和DOM元素都會訂閱一個PubSub對象。只要JavaScript對象或者一個HTML輸入元素監聽到數據的變化時，就會觸發綁定到PubSub對象上的事件，從而其他綁定的對象和元素都會做出相應的變化。

html代碼：

html

js代碼：

pubSub

以下代碼簡單的實現一個User模型:

User

將User模型屬性綁定到UI上:

綁定

最終輸入值會自動映射到user對象的name屬性，反之亦然。