js雙向綁定實例是什麼,js如何實現雙向綁定

本文目錄一覽：

• 1、js中的雙向數據綁定是什麼意思
• 2、js設計模式-觀察者模式來模擬vue的雙向數據綁定
• 3、實現雙向數據綁定
• 4、AngularJS的數據雙向綁定是怎麼實現的
• 5、js實現數據雙向綁定
• 6、Vue.js入門教程（三）雙向綁定和數據渲染

js中的雙向數據綁定是什麼意思

雙向數據綁定指的就是，綁定對象屬性的改變到用戶界面的變化的能力，反之亦然。換種說法，如果我們有一個user對象和一個name屬性，一旦我們賦了一個新值給user.name,在UI上就會顯示新的姓名了。同樣地，如果UI包含了一個輸入用戶姓名的輸入框，輸入一個新值就應該會使user對象的name屬性做出相應的改變。

詳細的解釋和例子可以看下這篇文章，，希望對你有幫助

js設計模式-觀察者模式來模擬vue的雙向數據綁定

vue的雙向數據綁定大家應該很熟悉了，當一方的值發生改變時，另一方綁定的值也會隨之變化，用起來是挺嗨的。

但是在原生中我們怎麼使用這種機制呢？

最近有個需求是通過對接websocket獲取後台服務器實時變化的值，推送給web端使用。

基於這個需求，我使用到了js中的設計模式-觀察者模式。

那麼，讓我們來一起了解一下吧。

先來看看具體機制：

這裡對象定義了四個屬性，分別綁定四個函數。

1、訂閱：訂閱方通過傳遞迴調函數，觀察者模式把這個回調函數push到自身的訂閱功能里，以此來得知誰訂閱了，然後判斷是否要推送。

2、退訂：找到對應的回調函數，然後在自身的訂閱功能里把當前函數刪除掉

3、發布：循環所有的訂閱方，當發布方進行發送的時候，把對應的數據推送給訂閱方

4、發布訂閱：定義一個對象，使其具備訂閱並且發布的功能

流程是這樣，說起來頭頭是道的，問題是怎麼使用？

舉個栗子：

我想定義一個對象，使其具備發布訂閱功能，發布方數值改變的時候，訂閱方得到平方值得變化

這裡通過input框的change事件，模擬了數據的實時變更，然後把當前值進行發布，這邊一發布，訂閱方就能通過回調函數得到實時變化的值，然後得到值進行相應的操作。

效果：

這樣就能簡單實現數據變更推送功能了。

註：文件中引入的observer的js是最上面提到的觀察者模式的那一套流程，tools的js大家可以不必在意，是我自己原生封裝的$函數，用來獲取dom元素的。

具體需求，大家還需要變通，稍作修改。

好了，以上就是js的觀察者模式實現的雙向數據綁定。

如有問題，請指出，接受批評。

實現雙向數據綁定

MVVM框架主要包含3個部分: model 、 view 和 viewmodel 。

簡單的來說，就是框架的控制器層（這裡的控制器層是一個泛指，可以理解為控制view行為和聯繫model層的中間件）和UI展示層（view層）建立一個雙向的數據通道。當這兩層中的任何一方發生變化時，另一層將會自動作出相應的變化。

一般來說要實現這種雙向數據綁定，在前端我目前了解的有三種形式：

目前angular,regular的實現都是基於臟檢查。當發生某些特定的事情的時候，框架會調用相關的digest方法。內部邏輯就是遍歷所有的 watcher ,對監控的屬性做對比。如果值發生了變化，則執行相應的 handler 。

當系統進入臟檢查階段，遍歷所有的 $watch 綁定的 watcher ,然後對比 watcher.get() 與 watcher.last ,如果不同則運行對應的 watcher.fn(newvalue, oldvalue) 。然後再進入下一個watcher的檢查。

何時進行臟檢查？

由於regularjs是基於臟檢查，所以當不是由regularjs本身控制的操作(如事件、指令)引起的數據操作，可能需要你手動的去同步data與view的數據. $update方法即幫助將你的data同步到view層.

]( )元素來控制你的觀察者數量。

使用ES7中的 Object.observe 方法對對象（或者其屬性）進行監控觀察，一旦其發生變化時，將會執行相應的handler。這是目前監控屬性數據變更最完美的一種方法，語言（瀏覽器）原生支持，沒有什麼比這個更好了。唯一的遺憾就是目前支持廣度還不行，有待全面推廣。

vue.js和avalon.js實現數據雙向綁定的原理就是屬性訪問器。

它使用了ES5中的定義標準屬性的Object.defineProperty 方法。

Object.defineProperty 使用示例：

首先，vuejs在實例化的過程中，會對遍歷傳給實例化對象選項中的data 選項，遍歷其所有屬性並使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。

同時每一個實例對象都有一個watcher實例對象，他會在模板編譯的過程中,用getter去訪問data的屬性，watcher此時就會把用到的data屬性記為依賴，這樣就建立了視圖與數據之間的聯繫。當之後我們渲染視圖的數據依賴發生改變（即數據的setter被調用）的時候，watcher會對比前後兩個的數值是否發生變化，然後確定是否通知視圖進行重新渲染。這樣就實現了所謂的雙向數據綁定。

AngularJS的數據雙向綁定是怎麼實現的

它們將模板和數據合併起來加入到視圖中去，如圖表中所示。合併完成之後，從圖中的流向可以看出，任何對數據模型或者相關內容的改變都不會自動反映到視圖中去。而且用戶對視圖的任何改變也不會自動同步到數據模型中來。這意味着，開發者需要編寫代碼來保持視圖與模板、模板與視圖的同步，無疑增加了開發的工作量。

那麼有沒有可以自動實現這種雙向機制的框架，有，請看：

下圖：雙向綁定

AngularJS的數據綁定是數據模型(model)與視圖(view)組件的自動同步。Angular的實現方式允許你把應用中的模型看成單一數據源。而視圖始終是數據模型的一種展現形式。當模型改變時，視圖就能反映這種改變，反之亦然。

js實現數據雙向綁定

我們主要通過ES5中的 Object.defineProperty 實現，主要是利用裡面的 get 和 set 來實現數據雙向綁定

以上沒滿足知識量的可查看詳情 : 雙向綁定原理詳情

以上就是對ES5中Object.defineProperty實現雙向數據綁定的理解

Vue.js入門教程（三）雙向綁定和數據渲染

既然清楚了原理，那麼，接下來進入正題——我知道了vue怎麼安裝，那麼我怎麼使用呢？

在告訴你基礎用法之前，我還是要先告訴你一個情況。

可能要令你有點失望。vue主要是側重於數據端的。他的目的就是渲染數據和在前端調整一下數據邏輯。

他不是像jquery那樣讓你用來做特技的。就算你要做特技。你也應該通過css3/canvas而不是dom。

所謂的雙向綁定，你可以理解就是把view。（你還不清楚mvc的話，請看第一章）

和model綁定到一起。說白了，就是你js中的綁定值變了。你dom中的內容就跟着一塊變了。

vue是通過解析{{文字..}}來生成內容的。後面綁定方法，輸出內容的時候都會講到。

列表輸出使用 v-for，這些v開頭加橫杠的叫做命令

這些命令是可以自定義的。但是那都屬於高級操作，我們不用它也完全足夠支撐做一個大型項目了。

其實你回發現，這裡無論是v-for或者是v-什麼其他玩意

它都深刻的遵循了es6的語法。這裡不就是一個典型的for in 循環嗎。不過我們現在都用for of了。

你記住這個用法，它就長這樣。

前後端分離開發的關鍵在於：後台只提供接口。

我們獲得的數據多數情況下，僅僅是一個json，而mvvm的關鍵就再於解析數據在前端完成了。如果你了解jsp或者php你會了解，數據的解析在mvc中，

是由後端完成的，而html只負責顯示。

所以，當你了解了數據綁定和渲染以後，你可以第一時間先把數據輸出到頁面了。

我們前端最厲害的地方不就是處理能看得見的東西嗎？