js實現檢視和資料雙向繫結的方法分析
本文例項講述了js實現檢視和資料雙向繫結的方法。分享給大家供大家參考,具體如下:
前言
檢視和資料繫結,使檢視和邏輯層分離,使檢視層變為資料驅動是前端的一大進步。由此誕生了mvvm類的前端框架,大大提升了開發的效率。
那麼在使用舊有的專案中,如何使用更加先進的設計模式來替換掉大量的面向過程程式設計。
各大框架對於資料繫結的實現都有各自的方式,這裡不做深入只是簡單介紹一下。
Vue使用了es5 Object.defineProperty的特性來實現對資料讀取和設定的監聽,是一種超程式設計的方式。個人感覺,比之angularJS的髒檢查資料比對更新機制確實要科學一點。
Object.defineProperty實現了對資料get和set的重新程式設計,能讓我們在做最簡單的 = 賦值操作時來做一些事,具體的實現就不放在這了。這不是今天要討論的重點。
在低版本瀏覽器中顯然對於這點的支援也不夠友好,那麼我可以想一種替代性的方案來達到和Object.defineProperty所類似的效果。在微信小程式中設定資料需要使用set方法,因為小程式的檢視層本質上是分離於js引擎的。這樣等於手動告訴檢視層某個資料更新了。那麼我也可以使用這種方法來實現對資料更新的監聽。
實現
首先我們需要一個物件來儲存資料。並且在其資料變更時做一些事情。可以定義一個建構函式來獲得這個物件。
因為get和set方法很顯然是公共的,所以可以定義在原型物件上。
var $vm = function(obj) { this.data = obj.data } $vm.prototype.get = function(prop) { //返回當前值 return this.data[prop] } $vm.prototype.set = function (prop,val) { //賦值操作 this.data[prop] = val }
如果這時候例項化一個這個建構函式的物件,這個物件上就會存在get和set方法,看程式碼可以知道他對這個物件上的data生效。
這樣一個簡單的get set方法就設定好了。一個是獲取當前物件屬性的值,一個是對其設定新的值。
如果在設定的時候我們再去觸發相應的檢視層的操作,那麼一個簡單的繫結就實現了。
var vm = new $vm({ // 繫結的變數值 data: { info: true } })
取值
vm.get('info')
存值
vm.set('info',false)
如果我們在set方法裡新增console.log()
那麼每次資料變動都會被打印出來。
使用set方法來替代=號的賦值操作可以一定意義上代替Object.defineProperty
的效果。並且相容性更好。
對檢視資料進行繫結是一個很大的問題,怎樣使資料的變動在檢視上體現。
這裡一個最簡單的替代實現就是去手動繫結資料和檢視。用jq的方式。
比如在set裡面執行對應這個屬性變動的回掉函式。
例如
$vm.prototype.set = function (prop,val) { this.data[prop] = val if (this.$$fn[prop]) { this.$$fn[prop](val,oldVal) } }
可以看到如果當前物件上$$fn屬性上如果存在同名的函式,會執行。
這樣我們可以把繫結dom的操作來放到裡面顯示。
這種寫法顯然可能不太利於維護,於是我想可以參照vue框架的watch觀察者來實現。
在vue中觀察物件上某個值的改變可以do someThing。
所以在此可以借鑑。
// 存值 $vm.prototype.set = function (prop,val) { var oldVal = this.data[prop] this.data[prop] = val //如果發現被列入觀察者 執行函式並注入修改後的值 if (this.watch[prop]) { this.watch[prop](val,oldVal) } }
鴿了,這裡省略3000字。哈哈哈哈,因為寫了好多程式碼但是沒寫部落格,懶得寫了直接跳過吧,有興趣的童鞋直接看原始碼。虛擬dom和{{}}
表示式,觀察者模式,計算屬性等等。
突發奇想,想要對資料層繫結還有個簡單的方案。利用html data的自定義屬性來繫結相應的屬性,利用jq選擇器來找到對應的節點進行更新。這也是一種替代的方案。
JQ選擇器,選擇屬性=某值的dom節點。利用這個選擇器可以來獲得所有綁定了某屬性的節點。
<div data-vm="info"> </div>
$('[data-vm="info"]').text(300)
這個節點的值變為了300。
所以利用自定義屬性和jq的選擇器,只要在dom節點上寫上data-vm(取的名字)然後等於要繫結的值,那麼就可以實現對檢視的綁定了。
// 存值 $vm.prototype.set = function (prop,val) { try { var oldVal = this.data[prop] this.data[prop] = val //如果發現被列入觀察者 執行函式並注入修改後的值 if (this.watch[prop]) { this.watch[prop](val,oldVal) } //查詢是否有訂閱值 if (this.$$fn[prop]) { this.$$fn[prop](val,oldVal) } //查詢是否有依賴於此項的計算屬性 if (this.$$count[prop]) { // 獲得所有依賴此值的計算屬性 var arr = this.$$count[prop] //迴圈遍歷每個計算屬性並重新計算它的值 for (var i = 0; i < arr.length; i++) { var item = arr[i] // 獲得返回的值 this.data[item] = this.computed[item]() } } // 如果節點綁定了此屬性 更新節點 var dom = $('[data-vm="' + prop + '"]') if (dom) { dom.text(val) } // this.updateView() } catch(e) { console.log('error setData' + prop) } }
實現成功!
目前繫結的各種方式我改了蠻多,具體的程式碼在github上,有興趣的童鞋可以看一看。
專案github地址https://github.com/unjust-life/mvvm
更多關於JavaScript相關內容可檢視本站專題:《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查詢演算法技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript錯誤與除錯技巧總結》
希望本文所述對大家JavaScript程式設計有所幫助。