计算机系统应用教程网站

网站首页 > 技术文章 正文

前端架构师之吾见-双向数据绑定原理及实现

btikc 2024-10-12 13:25:41 技术文章 11 ℃ 0 评论

在《前端架构师之吾见》第三篇中介绍了 MVVM 模式，提及到 View 和 ViewModel 之间存在着交互。但好奇的读者可能会发现与 MVC、MVP 不同的是上篇并未提及 View 和 ViewModel 之间的交互是什么，是“发送状态改变”、“发送用户动作”、“更新”，还是其他？本篇正是解答这一问题的。

在 MVVM 模式，View 和 ViewModel 之间的双向互动是通过一种叫做数据绑定（Data Binding）的技术实现的。下面将着重介绍数据绑定技术原理及实现。

数据绑定

数据绑定是指视图（View）的变化能实时让视图数据模型（ViewModel）发生变化，反之数据的变化也能实时更新到视图（View）。其核心的原理是采用数据劫持结合观察者（发布-订阅）模式，通过代理模式（Object.defineProperty 或 Proxy）对属性的 get 和 set 进行拦截或重置。在数据发生变化的时候发消息给订阅者，触发相应的监听回调函数。

下面将一一讲解双向数据绑定中涉及到核心技术点。其中观察者模式及代理模式属于经典的设计模式。

观察者模式

观察者模式又称为发布-订阅（Publish/Subscribe）模式、模型-视图（Model/View）模式或源-监听器（Source/Listener）模式，是定义对象间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相应依赖对象都能得到通知及更新。

代理模式

代理模式是给某一个对象提供一个代理，并由代理对象控制原对象的引用，是一种对象结构性设计模式。

数据劫持

是一种通过 hack 的方式，在访问或修改对象属性时，拦截默认行为，进行额外的操作并返回新的结果。在 Javascript 中常见的数据劫持可通过 Object.defineProperty() 或 Proxy 来实现。鉴于 Object.defineProperty() 的性能开销及对数组 push、unshift、splice 等操作无法监听等问题及 ES6+ 得到大量应用，更推荐采用 Proxy 来实现数据劫持。

代码实现

简易实现

// index.html
<head>
  <script type='application/javascript' src='./data-binding.js' />
</head>
...
<input data-bind='name' type='text' />
  {{name}}
...

// data-binding.js
class MVVM {
	constructor() {
    this.element = document.getAttribute('data-bind');
  	this.observe();
    this.render();
  }
  
  observe(){
  	this.data = new Proxy(this.data, {
    	get: (target, key) => target[key],
      set: (target, key, newValue) => {
      	target[key] = newValue;
        this.render();
      }
    });
  }
  
  render() {
  	this.element.innerHTML = `${this.data}`;
  }
}

Vuejs 中的双向绑定

Vuejs 中的双向数据绑定是通过 v-model 指令来实现的，具体代码实现可参见 vuejs 项目源码。

https://github.com/vuejs/core/blob/main/packages/compiler-core/src/parse.ts

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表