成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

snifes / 2440人閱讀

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

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

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

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

先復(fù)習(xí)個(gè)知識(shí)點(diǎn) Nodes 和 Elements 的區(qū)別

Element繼承了Node,而Element是眾多Node類型中的其中一個(gè), nodeType === 1, 所以,屬于Node的屬性可以用于Element，但Element的屬性無(wú)法用于Node，聽(tīng)起來(lái)好拗口，看一下代碼吧.


  
大

  
轟
        




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ù)和視圖的雙向綁定？

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

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

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

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

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

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

如果使用jQuery實(shí)現(xiàn)起來(lái)更加簡(jiǎn)單明了。
傳送門在此

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

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

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

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

參考資料：

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/79030.html

相關(guān)文章

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

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

    sanyang 評(píng)論0 收藏0

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

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

    geekidentity 評(píng)論0 收藏0

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

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

    anonymoussf 評(píng)論0 收藏0

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

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

    lwx12525 評(píng)論0 收藏0

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

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

    孫淑建 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<