MVVM 双向绑定的实现代码


Posted in Javascript onJune 21, 2018

这篇文章主要记录学习 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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript执行顺序详细介绍
Dec 04 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
nuxt引入组件和公共样式的操作
Nov 05 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 #Javascript
vue树形结构获取键值的方法示例
Jun 21 #Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 #Javascript
Vue 获取数组键名的方法
Jun 21 #Javascript
Taro集成Redux快速上手的方法示例
Jun 21 #Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 #Javascript
JS实现快递单打印功能【推荐】
Jun 21 #Javascript
You might like
PHP 文件缓存的性能测试
2010/04/25 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
Javascript中级语法快速入手
2016/07/30 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
JS实现手风琴特效
2020/11/08 Javascript
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
解决python写的windows服务不能启动的问题
2014/04/15 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
德国旅游网站:weg.de
2018/06/03 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python