MVVM 双向绑定的实现代码

这篇文章主要记录学习 js 双向绑定过程中的一些概念与具体的实现

mvvm 具体概念

mvvm 中有一些概念是通用的，具体如下

directive （指令）

自定义的执行函数，例如 vue 中的 v-click、v-bind 等。这些函数封装了 dom 的一些基本可复用函数api。

filter （过滤器）

用户希望对传入的初始数据进行处理，然后将处理结果交给 directive 或者下一个 filter。例如：v-bind="time | formattime"。formattime 是将 time 转换成指定格式的 filter 函数。

表达式

类似前端普通的页面模板表达式，作用是控制页面内容安装具体的条件显示。例如：if...else 等

viewmodel

传入的 model 数据在内存中存放，提供一些基本的操作 api 给开发者，使其能够对数据进行读取与修改

双向绑定（数据变更检测）

view 层的变化改变 model：通过给元素添加 onchange 事件来触发对 model 数据进行修改

model 层的变化改变 view：

1. 手动触发绑定
2. 脏数据检测
3. 对象劫持
4. proxy

实现方式

手动触发绑定

即 model 对象改变之后，需要显示的去触发 view 的更新

首先编写 html 页面

two way binding

编写实现 mvvm 的 代码

// manual trigger
let elems = [document.getelementbyid('el'), document.getelementbyid('input')]
// 数据 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() {
 // 扫描带指令的节点属性
 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 更新函数
function viewmodelset(key, value) {
 // 修改数据对象后
 data[key] = value
 // 手动地去触发 view 的修改
 scan()
}

// view 绑定监听
elems[1].addeventlistener('keyup', function(e) {
 viewmodelset('value', e.target.value)
}, false)

// -------- 程序执行 -------
scan()
settimeout(() => {
 viewmodelset('value', 'hello world')
}, 1000);

数据劫持

数据劫持是目前比较广泛的方式，vue 的双向绑定就是通过数据劫持实现。实现方式是通过 object.defineproperty 和 object.defineproperies 方法对 model 对象的 get 和 set 函数进行监听。当有数据读取或赋值操作时，扫描（或者通知）对应的元素执行 directive 函数，实现 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 数据对象
// propname: 指定的属性名称
function definegetandset(obj, propname) {
 let bvalue
 // 使用 object.defineproperty 做数据劫持
 object.defineproperty(obj, propname, {
  get: function() {
   return bvalue
  },
  set: function(value) {
   bvalue = value
   // 在 vue 中，这里不会去扫描所有的元素，而是通过订阅发布模式，通知那些订阅了该数据的 view 进行更新
   scan()
  },
  enumerable: true,
  configurable: true
 })
}

// view 绑定监听
elems[1].addeventlistener('keyup', function(e) {
 data.value = e.target.value
}, false)

// 扫描所有的元素
function scan() {
 // 扫描带指令的节点属性
 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))
   }
  }
 }
}

// -------- 程序执行 -------
scan()
definegetandset(data, 'value')
settimeout(() => {
 // 这里为数据设置新值之后，在 set 方法中会去更新 view
 data.value = 'hello world'
}, 1000);

基于 proxy 的实现

proxy 是 es6 中的新特性。可以在已有的对象基础上定义一个新对象，并重新定义对象原型上的方法。例如 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 绑定监听
elems[1].addeventlistener('keyup', function(e) {
 data.value = e.target.value
}, false)

// 扫描所有的元素
function scan() {
 // 扫描带指令的节点属性
 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))
   }
  }
 }
}

// -------- 程序执行 -------
data['value'] = 'hello'
scan()
settimeout(() => {
 data.value = 'hello world'
}, 1000);

脏数据监测

基本原理是在 model 对象的属性值发生变化的时候找到与该属性值相关的所有元素，然后判断数据是否发生变化，若变化则更新 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
 }
}

// 脏数据循环检测
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
    // 进行脏数据检测，如果数据改变，则重新执行命令
    if (elem.directive[attr.nodevalue] !== data[datakey]) {
     directive[attr.nodevalue].call(elem, data[datakey])
     elem.directive[attr.nodevalue] = data[datakey]
    }
   }
  }
 }
}

// 数据监听
function $digest(value) {
 let list = document.queryselectorall('[q-bind=' + value + ']')
 digest(list)
}

// view 绑定监听
elems[1].addeventlistener('keyup', function(e) {
 data.value = e.target.value
 $digest(e.target.getattribute('q-bind'))
}, false)

// -------- 程序执行 -------
$digest('value')
settimeout(() => {
 data.value = "hello world"
 $digest('value')
}, 1000);

总结

上面只是简单地实现了双向绑定，但实际上一个完整的 mvvm 框架要考虑很多东西。在上面的实现中数据劫持的方法更新view 是使用了 scan 函数，但实际的实现中（比如 vue）是使用了发布订阅的模式。它只会去更新那些与该 model 数据绑定的元素，而不会去扫描所有元素。而在脏数据检测中，它去找到了所有绑定的元素，然后判断数据是否发生变化，这种方式只有一定的性能开销的。

参考

《》

代码下载：https://github.com/orechou/twowaybinding

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。