10.3 实现数据绑定与验证

10.3 实现数据绑定与验证

数据绑定和验证是前端开发中常见的需求。通过 Proxy 和 Reflect，我们可以轻松实现数据绑定和验证功能。本节将详细介绍如何使用 Proxy 实现数据绑定和验证，并提供示例代码。

10.3.1 数据绑定

数据绑定是指将数据模型与视图同步，当数据发生变化时，视图自动更新。

1. 实现数据绑定
通过 Proxy 拦截数据的设置操作，触发视图更新：

const data = { name: "Alice" };

const handler = {
  set(target, prop, value) {
    target[prop] = value;
    console.log(`View updated: ${prop} = ${value}`);
    return true;
  },
};

const proxy = new Proxy(data, handler);

proxy.name = "Bob"; // 输出 "View updated: name = Bob"

2. 结合 DOM 更新
将数据绑定与 DOM 更新结合，实现更直观的效果：

const data = { name: "Alice" };

const handler = {
  set(target, prop, value) {
    target[prop] = value;
    document.getElementById("name").textContent = value;
    return true;
  },
};

const proxy = new Proxy(data, handler);

document.getElementById("input").addEventListener("input", (e) => {
  proxy.name = e.target.value;
});

10.3.2 数据验证

数据验证是指确保数据的合法性，例如类型检查、范围检查等。

1. 实现数据验证
通过 Proxy 拦截数据的设置操作，进行验证：

const user = { age: 25 };

const handler = {
  set(target, prop, value) {
    if (prop === "age" && typeof value !== "number") {
      throw new TypeError("Age must be a number");
    }
    if (prop === "age" && value < 0) {
      throw new RangeError("Age must be a positive number");
    }
    target[prop] = value;
    return true;
  },
};

const proxy = new Proxy(user, handler);

proxy.age = 26; // 正常设置
proxy.age = "26"; // 抛出错误：Age must be a number
proxy.age = -1; // 抛出错误：Age must be a positive number

2. 结合表单验证
将数据验证与表单验证结合，提供更好的用户体验：

const user = { age: 25 };

const handler = {
  set(target, prop, value) {
    if (prop === "age" && typeof value !== "number") {
      alert("Age must be a number");
      return false;
    }
    if (prop === "age" && value < 0) {
      alert("Age must be a positive number");
      return false;
    }
    target[prop] = value;
    return true;
  },
};

const proxy = new Proxy(user, handler);

document.getElementById("ageInput").addEventListener("change", (e) => {
  const age = parseInt(e.target.value, 10);
  proxy.age = age;
});

10.3.3 示例代码

示例 1：数据绑定

const data = { name: "Alice" };

const handler = {
  set(target, prop, value) {
    target[prop] = value;
    document.getElementById("name").textContent = value;
    return true;
  },
};

const proxy = new Proxy(data, handler);

document.getElementById("input").addEventListener("input", (e) => {
  proxy.name = e.target.value;
});

示例 2：数据验证

const user = { age: 25 };

const handler = {
  set(target, prop, value) {
    if (prop === "age" && typeof value !== "number") {
      alert("Age must be a number");
      return false;
    }
    if (prop === "age" && value < 0) {
      alert("Age must be a positive number");
      return false;
    }
    target[prop] = value;
    return true;
  },
};

const proxy = new Proxy(user, handler);

document.getElementById("ageInput").addEventListener("change", (e) => {
  const age = parseInt(e.target.value, 10);
  proxy.age = age;
});

10.3.4 总结

• 数据绑定：通过 Proxy 拦截数据的设置操作，实现视图的自动更新。
• 数据验证：通过 Proxy 拦截数据的设置操作，确保数据的合法性。
• 应用场景：表单验证、实时数据同步等。

通过掌握数据绑定和验证的实现，你可以编写更健壮、更易用的前端应用。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. 如何使用 Proxy 实现数据绑定？
2. 在数据验证中，如何处理不同类型的错误？
3. 如何将数据绑定和验证结合到实际的前端应用中？