百度360必应搜狗淘宝本站头条
nodejsbufferorg.jsoupsetnocountoncv2.bitwise_nottime.strptime
当前位置：网站首页 > 编程字典 > 正文

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

toyiye 2024-09-14 13:45 6 浏览 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

相关推荐

为何越来越多的编程语言使用JSON（为什么编程）

JSON是JavascriptObjectNotation的缩写，意思是Javascript对象表示法，是一种易于人类阅读和对编程友好的文本数据传递方法，是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON（数据库用json格式存储）

在本文中，您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?，Devops，敏捷?，测试?以及?项目?管理?最新?，最热门?的?文章?，每天?花?...

MySQL 从零开始:05 数据类型（mysql数据类型有哪些,并举例）

前面的讲解中已经接触到了表的创建，表的创建是对字段的声明，比如：上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶（json格式对象）

一、引言在现代Web开发中，JSON（JavaScriptObjectNotation）已经成为数据交换的标准格式。无论是从前端向后端发送数据，还是从后端接收数据，JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data（json和formdata提交区别）

在讨论现代网络开发与API设计的语境下，理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里，特别值得关注的是两种主流数据格式：...

JSON 语法（json 语法 priority）

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解（json的语法规则）

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意：json的key是字符串,且必须是双引号，不能是单引号...

MySQL JSON数据类型操作（mysql的json）

概述mysql自5.7.8版本开始，就支持了json结构的数据存储和查询，这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库，在处理json这种非结构化的数据...

JSON的数据模式（json数据格式示例）

像XML模式一样，JSON数据格式也有Schema，这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解（后端json格式）

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势（什么叫json）

现在程序员还有谁不知道JSON吗？无论对于前端还是后端，JSON都是一种常见的数据格式。那么JSON到底是什么呢？JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型，以存储结构化数据。JSON是一种开放的数据格式，可用于存储各种类型的值。什么是JSON类型？JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类（javascript 包）

JOSN:我们希望可以将一个对象在不同的语言中进行传递，以达到通信的目的，最佳方式就是将一个对象转换为字符串的形式JSON（JavaScriptObjectNotation）-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介：Json，全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?（json和xml哪个好）

JSON（JavaScriptObjectNotation）和XML（eXtensibleMarkupLanguage）是在日常开发中比较常用的两种数据格式，它们主要的作用就是用来进行数据的传...

取消回复欢迎 你 发表评论:

请填写验证码
一周热门
最近发表
标签列表