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 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
读jQuery之三(构建选择器)
Jun 11 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
在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和ACCESS写聊天室(七)
2006/10/09 PHP
PHP的博客ping服务代码
2012/02/04 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
pytorch进行上采样的种类实例
2020/02/18 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
python 多线程中join()的作用
2020/10/29 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
就业推荐自我鉴定
2013/10/06 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
实验心得体会
2014/09/05 职场文书
三峡大坝导游词
2015/01/31 职场文书
学校党支部承诺书
2015/04/30 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang