成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript數(shù)據(jù)雙向綁定的簡單演示

snifes / 2391人閱讀

摘要：對于前端，有時候需要實現(xiàn)視圖層和數(shù)據(jù)層的雙向綁定例如當前流行的各種框架和類庫。為代表前端數(shù)據(jù)劫持。參考資料實現(xiàn)數(shù)據(jù)雙向綁定的三種方式談?wù)勚械碾p向數(shù)據(jù)綁定非常簡單的雙向數(shù)據(jù)綁定框架三

對于前端，有時候需要實現(xiàn)視圖層和數(shù)據(jù)層的雙向綁定(two-way-binding), 例如當前流行的各種框架和類庫:Vue.js、Angular.js、React.js。 然而，他們最原始的實現(xiàn)方式其實都相對比較簡單，只不過是后來隨著各種Bug的出現(xiàn)，才一如滾雪球般地被不斷優(yōu)化和壯大。

所以，不要畏懼，多多學(xué)習(xí)并攝取它們的精華。

這里, 我也希望通過簡單的思路讓你對數(shù)據(jù)的雙向綁定有個大概了解，然后去看各種MVVM框架中對于數(shù)據(jù)雙向綁定的實現(xiàn)才不會一頭霧水。

先復(fù)習(xí)個知識點 Nodes 和 Elements 的區(qū)別

Element繼承了Node,而Element是眾多Node類型中的其中一個, nodeType === 1, 所以,屬于Node的屬性可以用于Element，但Element的屬性無法用于Node，聽起來好拗口，看一下代碼吧.


  
大

  
轟
        




var el = document.querySelector(".demo");

// true
console.log(el.children[0] instanceof Node);
// true
console.log(el.children[0] instanceof Element);

// true
console.log(el.childNodes[0] instanceof Node);
// false
console.log(el.childNodes[0] instanceof Element);

// undefined
console.log(typeof el.childNodes[0].children);
// object
console.log(typeof el.childNodes[0].childNodes);
什么是數(shù)據(jù)和視圖的雙向綁定？

雙向綁定對于理解Flux等架構(gòu)所提倡的單向數(shù)據(jù)流特性有很好的幫助, 簡單點說，就是將數(shù)據(jù)的變化綁定到UI, 同時UI的變化又和數(shù)據(jù)同步。這樣一來，假如你是全站Ajax,你不用去管數(shù)據(jù)對UI的影響,同時也不用去管UI變化造成的數(shù)據(jù)變化,統(tǒng)一了數(shù)據(jù)操作的入口,非常方便維護。(不知道這樣理解對不對, 望指正)

總而言之，雙向數(shù)據(jù)綁定的底層實現(xiàn)大概有兩種:

1、手動綁定,同時使用dirty check去循環(huán)監(jiān)聽。(Angular.js為代表)

2、前端數(shù)據(jù)劫持。(使用defineProperty, Vue.js貌似就是使用這種)

手動綁定 循環(huán)監(jiān)聽觸發(fā) （一） 
這種方法的實現(xiàn)類似**訂閱者模式**,實現(xiàn)思路是通過DOM的*keydown* *keyup* 
*keypress* *change*等事件觸發(fā)*dirty check*(當然你也可以用setTimeout),
然后循環(huán)監(jiān)聽并將value寫入某實例變量里面,同時更新DOM。

若是有時間,推薦去看一下Angular.js文檔中關(guān)于digest / $watch的介紹。

如果使用jQuery實現(xiàn)起來更加簡單明了。
傳送門在此

https://jsfiddle.net/fondadam/sdxhhoLx/2/embedded/js,html,result

前端數(shù)據(jù)劫持 (二)

第三種方法則是Vue.js等框架使用的數(shù)據(jù)劫持方式。基本思路是使用Object.defineProperty對數(shù)據(jù)對象做屬性get和set的監(jiān)聽，當有數(shù)據(jù)讀取和賦值操作時則調(diào)用節(jié)點的指令，這樣使用最通用的=等號賦值就可以觸發(fā)了。

https://jsfiddle.net/fondadam/a4qhp06s/embedded/js,html,result

參考資料：

javascript實現(xiàn)數(shù)據(jù)雙向綁定的三種方式

談?wù)凧avaScript中的雙向數(shù)據(jù)綁定

非常簡單的js雙向數(shù)據(jù)綁定框架（三）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79030.html

相關(guān)文章

  • React+webpack+Antd從0到1開發(fā)一個todoMvc

    摘要：在裝載組件之前調(diào)用會組件的構(gòu)造函數(shù)。當實現(xiàn)子類的構(gòu)造函數(shù)時，應(yīng)該在任何其他語句之前調(diào)用設(shè)置初始狀態(tài)綁定鍵盤回車事件，添加新任務(wù)修改狀態(tài)值，每次修改以后，自動調(diào)用方法，再次渲染組件?？梢酝ㄟ^直接安裝到項目中，使用或進行引用。 首先我們看一下我們完成后的最終形態(tài)：TodoMvc： showImg(https://segmentfault.com/img/remote/14600000085...

    sanyang 評論0 收藏0

  • 【譯】《精通使用AngularJS開發(fā)Web App》（二） --- 框架概覽，雙向數(shù)據(jù)綁定，MVC

    摘要：本書的這一部分將為隨后的章節(jié)打下基礎(chǔ)，會涵蓋模板，模塊化，和依賴注入。本書的小例子中我們會使用未經(jīng)壓縮的，開發(fā)友好的版本，在的上。作用域也可以針對特定的視圖來擴展數(shù)據(jù)和特定的功能。 上一篇：【譯】《精通使用AngularJS開發(fā)Web App》（一） 下一篇：【譯】《精通使用AngularJS開發(fā)Web App》（三） 原版書名：Mastering Web Application D...

    geekidentity 評論0 收藏0

  • vue 雙向數(shù)據(jù)綁定的實現(xiàn)學(xué)習(xí)（一）

    摘要：雙向數(shù)據(jù)綁定簡言之數(shù)據(jù)動頁面動，頁面動，數(shù)據(jù)動典型的應(yīng)用就是在做表單時候，輸入框的內(nèi)容改動后，跟該輸入框的的值改動?？垂倬W(wǎng)上的這個的演示案例雙向數(shù)據(jù)綁定的好處要說出這個好處的時候，也只有在實際場景中才能對應(yīng)的顯示出來。 前言：本系列學(xué)習(xí)筆記從以下幾個點展開 什么是雙向數(shù)據(jù)綁定 雙向數(shù)據(jù)綁定的好處 怎么實現(xiàn)雙向數(shù)據(jù)綁定 實現(xiàn)雙向數(shù)據(jù)數(shù)據(jù)綁定需要哪些知識點 數(shù)據(jù)劫持 發(fā)布訂閱模式 ...

    anonymoussf 評論0 收藏0

  • 父子組件傳值及v-model實現(xiàn)通信

    摘要：子組件也屬于當前實例。監(jiān)聽鉤子函數(shù)的場景使用的不多，但是還是要知道的?？梢垣@取到父組件傳遞的除和外的所有自定義屬性。 一. 父組件向子組件傳值 創(chuàng)建parent和child組件，并在parent中注冊child組件 在父組件調(diào)用子組件標簽中添加一個自定義屬性(msg)， im...

    lwx12525 評論0 收藏0

  • 一個基于Angular+Ionic+Phonegap的混合APP實戰(zhàn)

    摘要：有二維碼掃描功能，還做了類似消息可拖拽效果，上拉下拉刷新，輪播圖組件。特別適合用于基于模式的移動應(yīng)用程序開發(fā)。簡介是一個用基于，和的，創(chuàng)建移動跨平臺移動應(yīng)用程序的快速開發(fā)平臺。 這個項目做得比較早，當時是基于ionic1和angular1做的。做了四個tabs的app，首頁模仿攜程首頁，第二頁主要是phonegap調(diào)用手機核心功能，第三頁模仿微信和qq聊天頁，第四頁模仿一般手機的表單設(shè)...

    孫淑建 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<