js實現視圖和數據雙向綁定的方法分析

本文實例講述了js實現視圖和數據雙向綁定的方法。分享給大家供大家參考，具體如下：

前言

視圖和數據綁定，使視圖和邏輯層分離，使視圖層變為數據驅動是前端的一大進步。由此誕生了mvvm類的前端框架，大大提升了開發的效率。

那么在使用舊有的項目中，如何使用更加先進的設計模式來替換掉大量的面向過程編程。

各大框架對于數據綁定的實現都有各自的方式，這里不做深入只是簡單介紹一下。

Vue使用了es5  Object.defineProperty的特性來實現對數據讀取和設置的監聽，是一種元編程的方式。個人感覺，比之angularJS的臟檢查數據比對更新機制確實要科學一點。

Object.defineProperty實現了對數據get和set的重新編程，能讓我們在做最簡單的 = 賦值操作時來做一些事，具體的實現就不放在這了。這不是今天要討論的重點。

在低版本瀏覽器中顯然對于這點的支持也不夠友好，那么我可以想一種替代性的方案來達到和Object.defineProperty所類似的效果。在微信小程序中設置數據需要使用set方法，因為小程序的視圖層本質上是分離于js引擎的。這樣等于手動告訴視圖層某個數據更新了。那么我也可以使用這種方法來實現對數據更新的監聽。

實現

首先我們需要一個對象來保存數據。并且在其數據變更時做一些事情?？梢远x一個構造函數來獲得這個對象。

因為get和set方法很顯然是公共的，所以可以定義在原型對象上。

1. var $vm = function(obj) {
2. this.data = obj.data
3. }
4. $vm.prototype.get = function(prop) {
5. //返回當前值
6. return this.data[prop]
7. }
8. $vm.prototype.set = function (prop, val) {
9. //賦值操作
10. this.data[prop] = val
11. }
12.  

如果這時候實例化一個這個構造函數的對象，這個對象上就會存在get和set方法，看代碼可以知道他對這個對象上的data生效。

這樣一個簡單的get set方法就設置好了。一個是獲取當前對象屬性的值，一個是對其設置新的值。

如果在設置的時候我們再去觸發相應的視圖層的操作，那么一個簡單的綁定就實現了。

1. var vm = new $vm({
2. // 綁定的變量值
3. data: {
4. info: true
5. }
6. })

取值

1. vm.get('info')
2.  

存值

1. vm.set('info', false)
2.  

如果我們在set方法里添加console.log()那么每次數據變動都會被打印出來。

使用set方法來替代=號的賦值操作可以一定意義上代替Object.defineProperty的效果。并且兼容性更好。

對視圖數據進行綁定是一個很大的問題，怎樣使數據的變動在視圖上體現。

這里一個最簡單的替代實現就是去手動綁定數據和視圖。用jq的方式。

比如在set里面執行對應這個屬性變動的回掉函數。

例如

1. $vm.prototype.set = function (prop, val) {
2. this.data[prop] = val
3. if (this.$$fn[prop]) {
4. this.$$fn[prop](val, oldVal)
5. }
6. }
7.  

可以看到如果當前對象上$$fn屬性上如果存在同名的函數，會執行。

這樣我們可以把綁定dom的操作來放到里面顯示。

這種寫法顯然可能不太利于維護，于是我想可以參照vue框架的watch觀察者來實現。

在vue中觀察對象上某個值的改變可以do someThing。

所以在此可以借鑒。

1. // 存值
2. $vm.prototype.set = function (prop, val) {
3. var oldVal = this.data[prop]
4. this.data[prop] = val
5.  
6. //如果發現被列入觀察者 執行函數并注入修改后的值
7. if (this.watch[prop]) {
8. this.watch[prop](val, oldVal)
9. }
10. }
11.  

鴿了，這里省略3000字。哈哈哈哈，因為寫了好多代碼但是沒寫博客，懶得寫了直接跳過吧，有興趣的童鞋直接看源碼。虛擬dom和{{}}表達式，觀察者模式，計算屬性等等。

突發奇想，想要對數據層綁定還有個簡單的方案。利用html data的自定義屬性來綁定相應的屬性，利用jq選擇器來找到對應的節點進行更新。這也是一種替代的方案。

JQ選擇器，選擇屬性=某值的dom節點。利用這個選擇器可以來獲得所有綁定了某屬性的節點。

1. <div data-vm="info">
2. </div>
3.  

1. $('[data-vm="info"]').text(300)
2.  

這個節點的值變為了300。

所以利用自定義屬性和jq的選擇器，只要在dom節點上寫上data-vm(取的名字)然后等于要綁定的值，那么就可以實現對視圖的綁定了。

1. // 存值
2. $vm.prototype.set = function (prop, val) {
3. try {
4. var oldVal = this.data[prop]
5. this.data[prop] = val
6. //如果發現被列入觀察者 執行函數并注入修改后的值
7. if (this.watch[prop]) {
8. this.watch[prop](val, oldVal)
9. }
10. //查詢是否有訂閱值
11. if (this.$$fn[prop]) {
12. this.$$fn[prop](val, oldVal)
13. }
14. //查詢是否有依賴于此項的計算屬性
15. if (this.$$count[prop]) {
16. // 獲得所有依賴此值的計算屬性
17. var arr = this.$$count[prop]
18. //循環遍歷每個計算屬性并重新計算它的值
19. for (var i = 0; i < arr.length; i++) {
20. var item = arr[i]
21. // 獲得返回的值
22. this.data[item] = this.computed[item]()
23. }
24. }
25. // 如果節點綁定了此屬性 更新節點
26. var dom = $('[data-vm="' + prop + '"]')
27. if (dom) {
28. dom.text(val)
29. }
30. // this.updateView()
31. } catch(e) {
32. console.log('error setData' + prop)
33. }
34. }
35.  

實現成功！

目前綁定的各種方式我改了蠻多，具體的代碼在github上，有興趣的童鞋可以看一看。

項目github地址https://github.com/unjust-life/mvvm

更多關于JavaScript相關內容可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。