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

前言

視圖和數(shù)據(jù)綁定，使視圖和邏輯層分離，使視圖層變?yōu)閿?shù)據(jù)驅(qū)動(dòng)是前端的一大進(jìn)步。由此誕生了mvvm類的前端框架，大大提升了開(kāi)發(fā)的效率。

那么在使用舊有的項(xiàng)目中，如何使用更加先進(jìn)的設(shè)計(jì)模式來(lái)替換掉大量的面向過(guò)程編程。

各大框架對(duì)于數(shù)據(jù)綁定的實(shí)現(xiàn)都有各自的方式，這里不做深入只是簡(jiǎn)單介紹一下。

Vue使用了es5  Object.defineProperty的特性來(lái)實(shí)現(xiàn)對(duì)數(shù)據(jù)讀取和設(shè)置的監(jiān)聽(tīng)，是一種元編程的方式。個(gè)人感覺(jué)，比之a(chǎn)ngularJS的臟檢查數(shù)據(jù)比對(duì)更新機(jī)制確實(shí)要科學(xué)一點(diǎn)。

Object.defineProperty實(shí)現(xiàn)了對(duì)數(shù)據(jù)get和set的重新編程，能讓我們?cè)谧鲎詈?jiǎn)單的 = 賦值操作時(shí)來(lái)做一些事，具體的實(shí)現(xiàn)就不放在這了。這不是今天要討論的重點(diǎn)。

在低版本瀏覽器中顯然對(duì)于這點(diǎn)的支持也不夠友好，那么我可以想一種替代性的方案來(lái)達(dá)到和Object.defineProperty所類似的效果。在微信小程序中設(shè)置數(shù)據(jù)需要使用set方法，因?yàn)樾〕绦虻囊晥D層本質(zhì)上是分離于js引擎的。這樣等于手動(dòng)告訴視圖層某個(gè)數(shù)據(jù)更新了。那么我也可以使用這種方法來(lái)實(shí)現(xiàn)對(duì)數(shù)據(jù)更新的監(jiān)聽(tīng)。

實(shí)現(xiàn)

首先我們需要一個(gè)對(duì)象來(lái)保存數(shù)據(jù)。并且在其數(shù)據(jù)變更時(shí)做一些事情。可以定義一個(gè)構(gòu)造函數(shù)來(lái)獲得這個(gè)對(duì)象。

因?yàn)間et和set方法很顯然是公共的，所以可以定義在原型對(duì)象上。

var $vm = function(obj) {
  this.data = obj.data
}
$vm.prototype.get = function(prop) {
  //返回當(dāng)前值
  return this.data[prop]
}
$vm.prototype.set = function (prop, val) {
  //賦值操作
  this.data[prop] = val
}

如果這時(shí)候?qū)嵗粋€(gè)這個(gè)構(gòu)造函數(shù)的對(duì)象，這個(gè)對(duì)象上就會(huì)存在get和set方法，看代碼可以知道他對(duì)這個(gè)對(duì)象上的data生效。

這樣一個(gè)簡(jiǎn)單的get set方法就設(shè)置好了。一個(gè)是獲取當(dāng)前對(duì)象屬性的值，一個(gè)是對(duì)其設(shè)置新的值。

如果在設(shè)置的時(shí)候我們?cè)偃ビ|發(fā)相應(yīng)的視圖層的操作，那么一個(gè)簡(jiǎn)單的綁定就實(shí)現(xiàn)了。

var vm = new $vm({
  // 綁定的變量值
  data: {
    info: true
  }
})

取值

vm.get('info')

存值

vm.set('info', false)

如果我們?cè)趕et方法里添加console.log()那么每次數(shù)據(jù)變動(dòng)都會(huì)被打印出來(lái)。

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

對(duì)視圖數(shù)據(jù)進(jìn)行綁定是一個(gè)很大的問(wèn)題，怎樣使數(shù)據(jù)的變動(dòng)在視圖上體現(xiàn)。

這里一個(gè)最簡(jiǎn)單的替代實(shí)現(xiàn)就是去手動(dòng)綁定數(shù)據(jù)和視圖。用jq的方式。

比如在set里面執(zhí)行對(duì)應(yīng)這個(gè)屬性變動(dòng)的回掉函數(shù)。

例如

$vm.prototype.set = function (prop, val) {
  this.data[prop] = val
  if (this.$$fn[prop]) {
    this.$$fn[prop](val, oldVal)
  }
}

可以看到如果當(dāng)前對(duì)象上$$fn屬性上如果存在同名的函數(shù)，會(huì)執(zhí)行。

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

這種寫(xiě)法顯然可能不太利于維護(hù)，于是我想可以參照vue框架的watch觀察者來(lái)實(shí)現(xiàn)。

在vue中觀察對(duì)象上某個(gè)值的改變可以do someThing。

所以在此可以借鑒。

// 存值
$vm.prototype.set = function (prop, val) {
    var oldVal = this.data[prop]
    this.data[prop] = val
 
    //如果發(fā)現(xiàn)被列入觀察者 執(zhí)行函數(shù)并注入修改后的值
    if (this.watch[prop]) {
      this.watch[prop](val, oldVal)
    }
}

鴿了，這里省略3000字。哈哈哈哈，因?yàn)閷?xiě)了好多代碼但是沒(méi)寫(xiě)博客，懶得寫(xiě)了直接跳過(guò)吧，有興趣的童鞋直接看源碼。虛擬dom和{{}}表達(dá)式，觀察者模式，計(jì)算屬性等等。

突發(fā)奇想，想要對(duì)數(shù)據(jù)層綁定還有個(gè)簡(jiǎn)單的方案。利用html data的自定義屬性來(lái)綁定相應(yīng)的屬性，利用jq選擇器來(lái)找到對(duì)應(yīng)的節(jié)點(diǎn)進(jìn)行更新。這也是一種替代的方案。

JQ選擇器，選擇屬性=某值的dom節(jié)點(diǎn)。利用這個(gè)選擇器可以來(lái)獲得所有綁定了某屬性的節(jié)點(diǎn)。

<div data-vm="info">
</div>

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

這個(gè)節(jié)點(diǎn)的值變?yōu)榱?00。

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

// 存值
$vm.prototype.set = function (prop, val) {
  try {
    var oldVal = this.data[prop]
    this.data[prop] = val
    //如果發(fā)現(xiàn)被列入觀察者 執(zhí)行函數(shù)并注入修改后的值
    if (this.watch[prop]) {
      this.watch[prop](val, oldVal)
    }
    //查詢是否有訂閱值
    if (this.$$fn[prop]) {
      this.$$fn[prop](val, oldVal)
    }
    //查詢是否有依賴于此項(xiàng)的計(jì)算屬性
    if (this.$$count[prop]) {
      // 獲得所有依賴此值的計(jì)算屬性
      var arr = this.$$count[prop]
      //循環(huán)遍歷每個(gè)計(jì)算屬性并重新計(jì)算它的值
      for (var i = 0; i < arr.length; i++) {
        var item = arr[i]
        // 獲得返回的值
        this.data[item] = this.computed[item]()
      }
    }
    // 如果節(jié)點(diǎn)綁定了此屬性 更新節(jié)點(diǎn)
    var dom = $('[data-vm="' + prop + '"]')
    if (dom) {
      dom.text(val)
    }
    // this.updateView()
  } catch(e) {
    console.log('error setData' + prop)
  }
}

實(shí)現(xiàn)成功！

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

項(xiàng)目github地址https://github.com/unjust-life/mvvm

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論