本文實例講述了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的方式。