引言

2023-11-28 12:06:55

原生 JS 数据绑定：打造无框架响应式 Web 应用程序

在当今快速发展的 Web 世界中，构建响应式、交互式的应用程序至关重要。双向数据绑定是实现这一目标的关键特性，它允许 JavaScript 模型和 HTML 视图同步变化。虽然可以使用流行的框架来实现数据绑定，但本文将重点介绍如何在不借助框架的情况下使用原生 JS 实现双向数据绑定。

原生 JS 数据绑定涉及监听 JavaScript 对象的变化，并在发生变化时更新关联的 HTML 元素。我们可以使用 JavaScript 内置的 Object.observe() 方法来观察对象的变化。

实现步骤：

创建观察器： 使用 Object.observe() 创建一个观察器，该观察器会监听目标对象的属性变化。
更新视图： 在观察器回调函数中，使用 DOM API 更新关联的 HTML 元素以反映模型的变化。
设置值： 通过访问模型的属性来设置模型值，这将触发观察器回调函数并更新视图。

考虑以下示例代码：

const model = {
  name: 'John Doe',
  age: 30
};

Object.observe(model, (changes) => {
  changes.forEach((change) => {
    const element = document.getElementById(change.name);
    element.innerText = change.oldValue;
  });
});

model.name = 'Jane Doe'; // 更新模型