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:
- 手动触发绑定
- 脏数据检测
- 对象劫持
- 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- [c#]Webservice中如何实现方法重载(overload)以及如何传送不能序列化的对象作参数
- Web.Config文件配置小记
- [原创]web application中使用Profile应该注意的问题
- MRTG FOR WINDOWS 安装指南
- 几种常见复合sql查询语句的linq写法[继续补充中]
- [原创]在msmq3.0中使用http协议发送消息
- 微信小程序开发探索之路
- 前端周记 2017 年终总结
- asp.net mvc中的路径选择
- MVC中实现加载更多
- 在ASP.NET MVC 中获取当前URL、controller、action
- [转自Scott]ASP.NET MVC框架(第四部分): 处理表单编辑和提交场景
- MVC前台Post/Get异步获得数据时参数的取值问题
- IQueryable与foreach的困惑?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android大三提前批的钉钉和抖音面筋,阿里挂了HR面,抖音通过收获Offer
- leetcode之键盘行
- 浅析centos 7 自带的 php 5.4升级为 5.6的方法
- Linux内核设备驱动地址映射笔记整理
- Linux中的who命令实例介绍
- Linux十个新手命令分享
- Linux 内核通用链表学习小结
- 从零开始针对 .NET 应用的 DevOps 运营实践 - 运行环境搭建
- 面试问我,创建多少个线程合适?我该怎么说
- C语言链表实例--玩转链表
- 帝国CMS怎么利用灵动标签循环调用多个栏目下的文章
- PHP 加密 Password Hashing API基础知识点
- php libevent 功能与使用方法详解
- 对Python3中bytes和HexStr之间的转换详解
- 用python代码将tiff图片存储到jpg的方法