JavaScript自定义响应式对象

javascript,自定义,响应,对象 · 浏览次数 : 21

小编点评

**响应式对象** 响应式对象是一种 JavaScript 对象，用于将 DOM 元素与 JavaScript 中的变量绑定起来。当变量的值发生变化时，响应式对象会自动更新 DOM 元素的显示。 **MVVM 架构** MVVM 架构是一种架构模式，将视图、模型和视图之间的依赖关系解耦。MVVM 中的模型负责处理数据读写操作，视图负责渲染页面，视图模型负责将模型数据转换为视图可以使用的格式并处理用户交互。 **MVVM 框架** 许多响应式框架实现 MVVM 架构，例如 Vue、React、Vue2等。这些框架提供了各种工具和方法，可以简化视图开发。 **Proxy 对象** Proxy 对象是 ES6 中用于创建对象的代理对象。通过使用 Proxy 对象，可以对目标对象进行拦截，并实现对目标对象的赋值和获取。 **Object.defineProperty 方法** Object.defineProperty 方法用于直接定义属性或修改属性的值。通过使用 Object.defineProperty 方法，可以实现对目标对象的赋值拦截和更新 DOM 元素的动态更新。 **示例** ```js // 使用 Proxy 对象实现对象的值拦截 const obj = reactive({}) // 设置 obj.value 属性的值 obj.value = 'new value' // 在 DOM 中更新元素的值 document.getElementById('container').innerHTML = value; ``` **结论** 响应式对象和 MVVM 架构是实现 DOM 数据绑定和视图更新的关键技术。这些技术可以帮助开发人员构建可维护和可扩展的 Web 应用程序。

正文

1. 引言

这里的响应式对象是指JavaScript中的变量与HTML中的内容相绑定，变量更新则内容更新，也叫数据绑定

此时不得不说MVVM架构，MVVM架构思想的实现步骤如下：

模型（Model）：负责处理数据的读写操作，包括从服务器获取数据、存储数据等
视图（View）：负责渲染用户界面，包括HTML、CSS和JavaScript等，但不包括业务逻辑
视图模型（ViewModel）：连接视图和模型的桥梁，负责从模型中获取数据，并将其转换为视图可以使用的格式，同时也负责将视图中的用户交互事件转换为模型可以理解的操作。视图模型中不包含任何与视图相关的代码，从而实现了解耦

响应式对象或者说数据绑定，是视图模型（VM）的核心，只需改变JS中的变量的内容（修改Model），HTML中的内容也会随之变化（视图变化）

MVVM框架很多，典型如Vue、React等

以下记述的是自定义一个响应式对象，分别是使用JavaScript的Object.defineProperty方法和Proxy对象来实现

2. Proxy

Proxy 是ES6中的对象用于创建一个对象的代理，从而实现对对象的操作的拦截，基础用法为const p = new Proxy(target, handler)，更为详细的文档可以参考MDN：Proxy - JavaScript | MDN (mozilla.org)

使用Proxy对象是Vue3响应式的实现方法

自定义一个响应式对象，此处的思路也很简单，就是使用Proxy对象来代理目标对象，然后设置handler.set()方法，实现目标对象的赋值拦截并更新DOM

示例代码如下：

<body>
  <div id="container"></div>

  <script>
    function reactive(obj) {
      const handler = {
        get(target, key) {
          return Reflect.get(target, key)
        },
        set(target, key, value) {
          if (key === 'value')
            document.getElementById('container').innerHTML = value
          return Reflect.set(target, key, value)
        }
      }
      return new Proxy(obj, handler)
    }

    const obj = reactive({})

  </script>
</body>

此时，设置obj.value = <new value>，DOM中也会随之更新

3. Object.defineProperty

Object.defineProperty() 静态方法会直接在一个对象上定义一个新属性，或修改其现有属性，并返回此对象，其基本语法为Object.defineProperty(obj, prop, descriptor)，其中descriptor表示要定义或修改的属性的描述符，可以设置 getter 和 setter 的函数，更为详细的文档可参考MDN：Object.defineProperty() - JavaScript | MDN (mozilla.org)

使用Object.defineProperty方法是Vue2响应式的实现方法

自定义一个响应式对象，此处的思路也很简单，就是使用Object.defineProperty来给目标对象设置属性，然后设置setter 函数方法，实现目标对象的赋值拦截并更新DOM

示例代码如下：

<body>
  <div id="container"></div>

  <script>
    function reactive(obj) {
      return Object.defineProperty(obj, 'value', {
        get() {
          return this._value
        },
        set(value) {
          this._value = value
          document.getElementById('container').innerHTML = value
        }
      })
    }

    const obj = reactive({})

  </script>
</body>

此时，设置obj.value = <new value>，DOM中也会随之更新

4. 参考资料

[1] Proxy - JavaScript | MDN (mozilla.org)

[2] Object.defineProperty() - JavaScript | MDN (mozilla.org)