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

最新推荐文章于 2021-06-10 01:11:45 发布

ValdisW

最新推荐文章于 2021-06-10 01:11:45 发布

阅读量1.3k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/sinat_36461778/article/details/104504953

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在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就全都绑定在一起了。

ValdisW

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js与html DOM实现双向数据绑定的原理：Object.defineProperty()

在Angular或Vue中，视图（view）和模型（model）之间是能够实现双向数据绑定的，这也是Angular和Vue的一大特点。就是说，当用户修改视图时，和视图相关的那个变量值也会发生改变；当那个变量值自己发生变化时，视图也会相应作出改变。JavaScript中的对象（Object）是由一个个键值对（key-value）组成的，类似于Ruby中的哈希表或者Python中的字典。这些键值对...
复制链接

扫一扫