摘要:對于前端,有時候需要實現視圖層和數據層的雙向綁定例如當前流行的各種框架和類庫。為代表前端數據劫持。參考資料實現數據雙向綁定的三種方式談談中的雙向數據綁定非常簡單的雙向數據綁定框架三
對于前端,有時候需要實現視圖層和數據層的雙向綁定(two-way-binding), 例如當前流行的各種框架和類庫:Vue.js、Angular.js、React.js。 然而,他們最原始的實現方式其實都相對比較簡單,只不過是后來隨著各種Bug的出現,才一如滾雪球般地被不斷優化和壯大。
所以,不要畏懼,多多學習并攝取它們的精華。
這里, 我也希望通過簡單的思路讓你對數據的雙向綁定有個大概了解,然后去看各種MVVM框架中對于數據雙向綁定的實現才不會一頭霧水。
先復習個知識點 Nodes 和 Elements 的區別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);大
轟
雙向綁定對于理解Flux等架構所提倡的單向數據流特性有很好的幫助, 簡單點說,就是將數據的變化綁定到UI, 同時UI的變化又和數據同步。這樣一來,假如你是全站Ajax,你不用去管數據對UI的影響,同時也不用去管UI變化造成的數據變化,統一了數據操作的入口,非常方便維護。(不知道這樣理解對不對, 望指正)
總而言之,雙向數據綁定的底層實現大概有兩種:
1、手動綁定,同時使用dirty check去循環監聽。(Angular.js為代表)
2、前端數據劫持。(使用defineProperty, Vue.js貌似就是使用這種)
手動綁定 循環監聽觸發 (一)這種方法的實現類似**訂閱者模式**,實現思路是通過DOM的*keydown* *keyup* *keypress* *change*等事件觸發*dirty check*(當然你也可以用setTimeout), 然后循環監聽并將value寫入某實例變量里面,同時更新DOM。
若是有時間,推薦去看一下Angular.js文檔中關于digest / $watch的介紹。
如果使用jQuery實現起來更加簡單明了。
傳送門在此
https://jsfiddle.net/fondadam/sdxhhoLx/2/embedded/js,html,result
前端數據劫持 (二)第三種方法則是Vue.js等框架使用的數據劫持方式。基本思路是使用Object.defineProperty對數據對象做屬性get和set的監聽,當有數據讀取和賦值操作時則調用節點的指令,這樣使用最通用的=等號賦值就可以觸發了。
https://jsfiddle.net/fondadam/a4qhp06s/embedded/js,html,result
參考資料:javascript實現數據雙向綁定的三種方式
談談JavaScript中的雙向數據綁定
非常簡單的js雙向數據綁定框架(三)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79030.html
摘要:在裝載組件之前調用會組件的構造函數。當實現子類的構造函數時,應該在任何其他語句之前調用設置初始狀態綁定鍵盤回車事件,添加新任務修改狀態值,每次修改以后,自動調用方法,再次渲染組件。可以通過直接安裝到項目中,使用或進行引用。 首先我們看一下我們完成后的最終形態:TodoMvc: showImg(https://segmentfault.com/img/remote/14600000085...
摘要:本書的這一部分將為隨后的章節打下基礎,會涵蓋模板,模塊化,和依賴注入。本書的小例子中我們會使用未經壓縮的,開發友好的版本,在的上。作用域也可以針對特定的視圖來擴展數據和特定的功能。 上一篇:【譯】《精通使用AngularJS開發Web App》(一) 下一篇:【譯】《精通使用AngularJS開發Web App》(三) 原版書名:Mastering Web Application D...
摘要:雙向數據綁定簡言之數據動頁面動,頁面動,數據動典型的應用就是在做表單時候,輸入框的內容改動后,跟該輸入框的的值改動。看官網上的這個的演示案例雙向數據綁定的好處要說出這個好處的時候,也只有在實際場景中才能對應的顯示出來。 前言:本系列學習筆記從以下幾個點展開 什么是雙向數據綁定 雙向數據綁定的好處 怎么實現雙向數據綁定 實現雙向數據數據綁定需要哪些知識點 數據劫持 發布訂閱模式 ...
摘要:子組件也屬于當前實例。監聽鉤子函數的場景使用的不多,但是還是要知道的。可以獲取到父組件傳遞的除和外的所有自定義屬性。 一. 父組件向子組件傳值 創建parent和child組件,并在parent中注冊child組件 在父組件調用子組件標簽中添加一個自定義屬性(msg), im...
摘要:有二維碼掃描功能,還做了類似消息可拖拽效果,上拉下拉刷新,輪播圖組件。特別適合用于基于模式的移動應用程序開發。簡介是一個用基于,和的,創建移動跨平臺移動應用程序的快速開發平臺。 這個項目做得比較早,當時是基于ionic1和angular1做的。做了四個tabs的app,首頁模仿攜程首頁,第二頁主要是phonegap調用手機核心功能,第三頁模仿微信和qq聊天頁,第四頁模仿一般手機的表單設...
閱讀 3329·2021-11-22 12:04
閱讀 2713·2019-08-29 13:49
閱讀 485·2019-08-26 13:45
閱讀 2246·2019-08-26 11:56
閱讀 1002·2019-08-26 11:43
閱讀 596·2019-08-26 10:45
閱讀 1271·2019-08-23 16:48
閱讀 2161·2019-08-23 16:07