MVVM 雙向綁定的實現(xiàn)代碼

更新時間：2018年06月21日 16:39:13 作者：OreChou的小號

這篇文章主要介紹了MVVM 雙向綁定的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

這篇文章主要記錄學習 JS 雙向綁定過程中的一些概念與具體的實現(xiàn)

MVVM 具體概念

MVVM 中有一些概念是通用的，具體如下

Directive （指令）

自定義的執(zhí)行函數(shù)，例如 Vue 中的 v-click、v-bind 等。這些函數(shù)封裝了 DOM 的一些基本可復用函數(shù)API。

Filter （過濾器）

用戶希望對傳入的初始數(shù)據(jù)進行處理，然后將處理結果交給 Directive 或者下一個 Filter。例如：v-bind="time | formatTime"。formatTime 是將 time 轉換成指定格式的 Filter 函數(shù)。

表達式

類似前端普通的頁面模板表達式，作用是控制頁面內(nèi)容安裝具體的條件顯示。例如：if...else 等

ViewModel

傳入的 Model 數(shù)據(jù)在內(nèi)存中存放，提供一些基本的操作 API 給開發(fā)者，使其能夠對數(shù)據(jù)進行讀取與修改

雙向綁定（數(shù)據(jù)變更檢測）

View 層的變化改變 Model：通過給元素添加 onchange 事件來觸發(fā)對 Model 數(shù)據(jù)進行修改

Model 層的變化改變 View：

手動觸發(fā)綁定
臟數(shù)據(jù)檢測
對象劫持
Proxy

實現(xiàn)方式

手動觸發(fā)綁定

即 Model 對象改變之后，需要顯示的去觸發(fā) View 的更新

首先編寫 HTML 頁面

Two way binding

編寫實現(xiàn) MVVM 的代碼

// Manual trigger
let elems = [document.getElementById('el'), document.getElementById('input')]
// 數(shù)據(jù) Model
let data = {
 value: 'hello'
}

// 定義 Directive
let directive = {
 text: function(text) {
  this.innerHTML = text
 },
 value: function(value) {
  this.setAttribute('value', value)
  this.value = value
 }
}

// 掃描所有的元素
function scan() {
 // 掃描帶指令的節(jié)點屬性
 for (let elem of elems) {
  elem.directive = []
  for (let attr of elem.attributes) {
   if (attr.nodeName.indexOf('q-') >= 0) {
    directive[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue])
    elem.directive.push(attr.nodeName.slice(2))
   }
  }
 }
}

// ViewModel 更新函數(shù)
function ViewModelSet(key, value) {
 // 修改數(shù)據(jù)對象后
 data[key] = value
 // 手動地去觸發(fā) View 的修改
 scan()
}

// View 綁定監(jiān)聽
elems[1].addEventListener('keyup', function(e) {
 ViewModelSet('value', e.target.value)
}, false)

// -------- 程序執(zhí)行 -------
scan()
setTimeout(() => {
 ViewModelSet('value', 'hello world')
}, 1000);

數(shù)據(jù)劫持

數(shù)據(jù)劫持是目前比較廣泛的方式，Vue 的雙向綁定就是通過數(shù)據(jù)劫持實現(xiàn)。實現(xiàn)方式是通過 Object.defineProperty 和 Object.defineProperies 方法對 Model 對象的 get 和 set 函數(shù)進行監(jiān)聽。當有數(shù)據(jù)讀取或賦值操作時，掃描（或者通知）對應的元素執(zhí)行 Directive 函數(shù)，實現(xiàn) View 的刷新。

HTML 的代碼不變，js 代碼如下

// Hijacking
let elems = [document.getElementById('el'), document.getElementById('input')]
let data = {
 value: 'hello'
}

// 定義 Directive
let directive = {
 text: function(text) {
  this.innerHTML = text
 },
 value: function(value) {
  this.setAttribute('value', value)
  this.value = value
 }
}

// 定義對象屬性設置劫持
// obj: 指定的 Model 數(shù)據(jù)對象
// propName: 指定的屬性名稱
function defineGetAndSet(obj, propName) {
 let bValue
 // 使用 Object.defineProperty 做數(shù)據(jù)劫持
 Object.defineProperty(obj, propName, {
  get: function() {
   return bValue
  },
  set: function(value) {
   bValue = value
   // 在 vue 中，這里不會去掃描所有的元素，而是通過訂閱發(fā)布模式，通知那些訂閱了該數(shù)據(jù)的 view 進行更新
   scan()
  },
  enumerable: true,
  configurable: true
 })
}

// View 綁定監(jiān)聽
elems[1].addEventListener('keyup', function(e) {
 data.value = e.target.value
}, false)

// 掃描所有的元素
function scan() {
 // 掃描帶指令的節(jié)點屬性
 for (let elem of elems) {
  elem.directive = []
  for (let attr of elem.attributes) {
   if (attr.nodeName.indexOf('q-') >= 0) {
    directive[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue])
    elem.directive.push(attr.nodeName.slice(2))
   }
  }
 }
}

// -------- 程序執(zhí)行 -------
scan()
defineGetAndSet(data, 'value')
setTimeout(() => {
 // 這里為數(shù)據(jù)設置新值之后，在 set 方法中會去更新 view
 data.value = 'Hello world'
}, 1000);

基于 Proxy 的實現(xiàn)

Proxy 是 ES6 中的新特性?？梢栽谝延械膶ο蠡A上定義一個新對象，并重新定義對象原型上的方法。例如 get 和 set 方法。

// Hijacking
let elems = [document.getElementById('el'), document.getElementById('input')]

// 定義 Directive
let directive = {
 text: function(text) {
  this.innerHTML = text
 },
 value: function(value) {
  this.setAttribute('value', value)
  this.value = value
 }
}

// 設置對象的代理
let data = new Proxy({}, {
 get: function(target, key, receiver) {
  return target.value
 },
 set: function (target, key, value, receiver) { 
  target.value = value
  scan()
  return target.value
 }
})

// View 綁定監(jiān)聽
elems[1].addEventListener('keyup', function(e) {
 data.value = e.target.value
}, false)

// 掃描所有的元素
function scan() {
 // 掃描帶指令的節(jié)點屬性
 for (let elem of elems) {
  elem.directive = []
  for (let attr of elem.attributes) {
   if (attr.nodeName.indexOf('q-') >= 0) {
    directive[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue])
    elem.directive.push(attr.nodeName.slice(2))
   }
  }
 }
}

// -------- 程序執(zhí)行 -------
data['value'] = 'Hello'
scan()
setTimeout(() => {
 data.value = 'Hello world'
}, 1000);

臟數(shù)據(jù)監(jiān)測

基本原理是在 Model 對象的屬性值發(fā)生變化的時候找到與該屬性值相關的所有元素，然后判斷數(shù)據(jù)是否發(fā)生變化，若變化則更新 View。

編寫頁面代碼如下：Two way binding

js 代碼如下：

// Dirty detection
let elems = [document.getElementById('el'), document.getElementById('input')]
let data = {
 value: 'hello'
}

// 定義 Directive
let directive = {
 text: function(text) {
  this.innerHTML = text
 },
 value: function(value) {
  this.setAttribute('value', value)
  this.value = value
 }
}

// 臟數(shù)據(jù)循環(huán)檢測
function digest(elems) {
 for (let elem of elems) {
  if (elem.directive === undefined) {
   elem.directive = {}
  }
  for (let attr of elem.attributes) {
   if (attr.nodeName.indexOf('q-event') >= 0) {
    let dataKey = elem.getAttribute('q-bind') || undefined
    // 進行臟數(shù)據(jù)檢測，如果數(shù)據(jù)改變，則重新執(zhí)行命令
    if (elem.directive[attr.nodeValue] !== data[dataKey]) {
     directive[attr.nodeValue].call(elem, data[dataKey])
     elem.directive[attr.nodeValue] = data[dataKey]
    }
   }
  }
 }
}

// 數(shù)據(jù)監(jiān)聽
function $digest(value) {
 let list = document.querySelectorAll('[q-bind=' + value + ']')
 digest(list)
}

// View 綁定監(jiān)聽
elems[1].addEventListener('keyup', function(e) {
 data.value = e.target.value
 $digest(e.target.getAttribute('q-bind'))
}, false)

// -------- 程序執(zhí)行 -------
$digest('value')
setTimeout(() => {
 data.value = "Hello world"
 $digest('value')
}, 1000);

總結

上面只是簡單地實現(xiàn)了雙向綁定，但實際上一個完整的 MVVM 框架要考慮很多東西。在上面的實現(xiàn)中數(shù)據(jù)劫持的方法更新View 是使用了 Scan 函數(shù)，但實際的實現(xiàn)中（比如 Vue）是使用了發(fā)布訂閱的模式。它只會去更新那些與該 Model 數(shù)據(jù)綁定的元素，而不會去掃描所有元素。而在臟數(shù)據(jù)檢測中，它去找到了所有綁定的元素，然后判斷數(shù)據(jù)是否發(fā)生變化，這種方式只有一定的性能開銷的。

參考

《現(xiàn)代前端技術解析》

代碼下載：https://github.com/OreChou/twowaybinding

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: