檸檬影視劇2017-12-15 09:27:29首先你要弄明白什麼是雙向資料繫結，雙向資料繫結就是檢視層發生變化，能實時反應到資料層，資料層發生變化也能實時響應到檢視層。現在的各種javascript的UI框架，很多都是實現了資料雙向繫結的，backbone，angular，vue，react等等。那麼實現雙向資料繫結有哪些方法呢，目前我知道的有釋出訂閱者模式，資料劫持，資料髒檢查，下面我就說最普遍的釋出訂閱者模式吧。
我們知道javascript本身就是一門事件驅動語言，它的事件驅動特性是解決很多問題的最佳實踐。我們可以給檢視層繫結事件，一般來說，像input，select，textarea等表單控制元件發生變化，可以觸發input，change等事件，當觸發事件時，在事件處理函數里面把資料更新到資料層就可以。資料層的話，我們可以透過自定義事件來觸發變化，比如說你自定義了一個dataUpdate事件，當從ajax返回資料時，可以把觸發dataUpdate事件，在事件處理函數里面，把新資料更新到檢視層就可以了。其實發布訂閱者模式可以想象成是報社和訂閱報紙的人，你只要釋出了報紙，那麼訂閱這個報紙的人就能接收到
點贊什麼的，大家開心就好
蘑菇頭MTV2018-10-26 18:52:56js實現資料雙向繫結，需要用到Object。defineProperty（）這個物件方法，這是一個比較神奇的方法，它的作用是用於配置物件值的屬性，比如：物件的某個屬性是否可配置、可讀寫、可列舉等。它也是vue框架底層，實現資料雙向繫結的核心方法。
重寫物件屬性的setter、getter
用Object。defineProperty（）建立一個全域性物件obj，並設定一個屬性name，然後重寫這個屬性的get、set方法。在設定obj物件name屬性值時，set方法會自動呼叫；在讀取obj物件name屬性時，get方法會自動呼叫。
監聽文字框資料事件，並更新資料
繫結文字框的輸入事件，在事件中設定obj物件的name值，此時set方法會自動呼叫，在set方法中，攔截資料val，把val的值賦給name屬性，並更新span元素顯示name的值。
執行效果如下：
可以看到，物件obj的name屬性值，在隨著文字框內容的改變而改變。
改變物件屬性值，更新文字框顯示
在set方法中，監聽到obj物件name屬性值的改變，攔截資料val，把資料更新到文字框中顯示。
執行並改變obj的name值，效果如下：
可以看到，在控制檯中，改變obj的name屬性值，左邊文字框中的內容也發生了改變，這樣，我們就實現了一個簡單的，資料雙向繫結操作。
完整程式碼截圖：
碼字、做圖不易，覺得不錯的盆友，望多點贊轉發，謝謝支援。
暢哥聊技術2019-05-05 14:12:56比如vue2。0裡面是使用的是object。defineProperty來實現物件的屬性在發生變化的時候進行劫持 從而去更新dom 來實現雙向資料繫結的，但是這個有一個問題就是 它無法檢測到陣列中的變化 ，這個時候vue3。0用proxy解決了這個問題 也可以實現資料劫持 從而實現資料雙向繫結的。具體的可以去頭條搜尋vue2。x 和vue3。x 雙向資料繫結的區別一文。
汙斑兔2019-05-06 12:56:17ES5使之前自定義函式處理，ES5使用defineProperty，ES6推薦使用proxy處理。
ES版本高，向下相容，反之不成立。
具體實現請自行Google。
JoelChu2018-01-31 11:44:40angularjs （1。x）年代，用的方式叫60fps engine，說穿了其實就是有一個loop不停的在查輸了，輸出的資料是否有變。有用過angularjs都知道所有資料都會自動帶key的（不像某R庫，要閣下自理。）
這方法有好有壞，就像世上任何事情。
所以，其實只要利用event，就可以（當然許多細節，不是像許多人說，用一招defineProperty就完事）
如果細想一下，Javascript的event只有幾類：
1。使用者發起，滑鼠，輸入等等。
2。URL改變
3。自定義event
4。 CSS animation
5。 push notification 和 ajax （嚴格來說ajax不是event，但是因為時間差距，和處理event相似）
從這思路出發，就不難自己做個解決方案。