js与html DOM实现双向数据绑定的原理：Object.defineProperty()

74 阅读 0 评论 49 点赞

我是靠谱客的博主愉快玫瑰，最近开发中收集的这篇文章主要介绍js与html DOM实现双向数据绑定的原理：Object.defineProperty()，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在Angular或Vue中，视图（view）和模型（model）之间是能够实现双向数据绑定的，这也是Angular和Vue的一大特点。就是说，当用户修改视图时，和视图相关的那个变量值也会发生改变；当那个变量值自己发生变化时，视图也会相应作出改变。

JavaScript中的对象（Object）是由一个个键值对（key-value）组成的，类似于Ruby中的哈希表或者Python中的字典。这些键值对在JavaScript的语境下被称作属性（property），其中键（key）被称作属性名（property name），值（value）被称作属性值（property value）。

在这里讲这些是为了引入一个函数，它叫做Object.defineProperty()。顾名思义，它的功能就是给某个JS对象定义属性。因此它有三个参数：

给哪个对象定义属性
属性名
属性值

前两个参数没什么可说的，第一个是个JS对象，第二个是字符串。有趣的地方在于第三个参数。一般来讲，属性值可以是任何类型，但是这里的第三个参数不仅仅可以设置属性值本身，还能够进行属性被访问（get）和被修改（set）时的监听。比如如下的例子：

Object.defineProperty(a, "title", {
set: () => {
console.log("set!");
},
get: () => {
console.log("get!");
}
});

当a.title被修改时，如执行a.title = "xxx"这样的语句，就会自动触发set，控制台会显示"set!"的字样；

当a.title被访问时，如执行let s = a.title这样的语句，就会自动触发get，控制台会显示"get!"的字样。

实际上，这第三个参数是个属性描述符（property descriptor）。属性描述符有两种类型，分别是数据描述符和存取描述符，二者必须选其一且互有异同。这里为避免跑题不多加解释，详情可见：Object.defineProperty() - JavaScript | MDN

因此，实现双向数据绑定就有了如下例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>defineProperty</title>
</head>
<body>
<input type="text" id="textInput" />
<p id="textDisplay"></p>
<script>
const textInput = document.getElementById("textInput");
const textDisplay = document.getElementById("textDisplay");
let a = {};
Object.defineProperty(a, "title", {
set: val => {
textInput.value = val;
textDisplay.innerText = val;
}
});
textInput.onkeyup = e => {
a.title = e.target.value;
};
</script>
</body>
</html>

这样，输入框的值、段落的值和a.title就全都绑定在一起了。