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 triggerlet elems = [document.getElementById('el'), document.getElementById('input')]// 数据 Modellet data = { value: 'hello'}// 定义 Directivelet 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 代码如下

// Hijackinglet elems = [document.getElementById('el'), document.getElementById('input')]let data = { value: 'hello'}// 定义 Directivelet 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);