使用JS Proxy实现简单数据驱动视图教程

引言

在大学时期，JQuery是最流行的框架。它采用事件驱动模式，即当数据与DOM元素关联时，需要在数据变更后手动操作DOM进行同步：

<div id="data">数据</div>

var data = "数据"
// 通过某种事件数据发生了变化
data = "新数据"
$("#data").text = data

在简单的交互场景中，这种方式尚显便捷；但当交互逻辑变得复杂庞大时，代码会变得极其臃肿。

临近毕业时，Angular、Vue和React等框架兴起，我们接触到了一种新方式——数据驱动。通过DOM与数据的“绑定”，直接修改数据即可使DOM内容发生变化。

<div>{{data}}</div>

var data = "数据"
// ...某种方式进行了绑定
data = "新数据"

此时，DOM内容直接反映新数据。这种方式使用便捷且代码简洁，在当时看来颇具神奇色彩。

不同数据驱动框架的绑定原理和过程各异且复杂。今天我们将简化这一过程，使用JS的Proxy代理对象来实现数据驱动。（注：Vue3的响应式数据正是基于此原理，尽管其实现比本例复杂得多）

Proxy对象是什么

Proxy对象用于创建对象的代理，从而实现对基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。具体使用方法如下：

new Proxy(要代理的对象，代理的事件对象）

可代理的事件包括以下几类：

事件	描述
get	读取属性
set	设置属性
delete	delete操作符
ownKeys	getWonPropertyNames方法和 getOwnPropertySymbols
construct	new操作符
defineProperty	defineProperty方法
getOwnPropertyDescriptor	getOwnPropertyDescriptor方法
preventExtensions	preventExtensions方法
isExtensible	isExtensible方法
setPrototypeOf	setPrototypeOf方法（也就是设置.__proto__）
getPrototypeOf	getPrototypeOf方法（也就是取.__proto__）

使用Proxy写一个简单的数据驱动视图

了解了Proxy的基本用法后，我们可以利用它代理对象的setter来实现数据驱动。

首先定义与数据ID相同的DOM元素：

<div id="firstName"></div>
<div id="age"></div>

为data设置Proxy代理，代理其setter，并在其中操作DOM：

var data = {
  firstName: "",
  age: 0
}
var p_data = new Proxy(data, {
    set: function (obj, prop, newval) {
      document.getElementById(prop).innerText = newval;
      obj[prop] = newval;// 别忘了实现原有逻辑
      return true; // setter代理的要求，处理成功后返回true
    }
})

随后设定初始值及相关交互。注意，操作的是代理p_data而非data：

p_data.firstName = "两秒后显示姓名……"
p_data.age = 25
setTimeout(() => {
  p_data.firstName = "林语琛"
}, 2000)
document.getElementById("grow").onclick = function() {
  p_data.age++
}

至此实现了数据驱动。只要任意修改p_data的属性值，DOM内容即可直接变化：

var data = {
  firstName: "",
  age: 0
}
var p_data = new Proxy(data, {
    set: function (obj, prop, newval) {
      document.getElementById(prop).innerText = newval;
      obj[prop] = newval;
      return true
    }
})
p_data.firstName = "两秒后显示姓名……"
p_data.age = 25
setTimeout(() => {
  p_data.firstName = "林语琛"
}, 2000)
document.getElementById("grow").onclick = function() {
  p_data.age++
}

以上就是JS代理对象Proxy初体验简单的数据驱动视图的详细内容，更多关于JS Proxy数据驱动视图的资料请关注本站其它相关文章！

JS代理对象Proxy初体验简单的数据驱动视图

引言

Proxy对象是什么

使用Proxy写一个简单的数据驱动视图

实用工具推荐