第23天:代理
#javascript #100daysofcode #day23

您是否曾经希望您可以拦截和修改JavaScript中的对象行为,而不会更改其原始结构?这是Proxy对象进行救援的地方!

ðµï¶proxy对象

JavaScript中的Proxy对象允许您为对象执行的基本操作定义自定义行为。这些操作包括属性访问,分配,功能调用等。本质上,Proxy位于您的代码和对象之间,使您能够拦截和控制其交互。

ð用户对象的数据验证

想象一下,您正在为Web应用程序构建用户身份验证系统。您要确保用户数据在存储或更新之前遵守某些验证规则。您可以使用Proxy集中和简化此过程。
,而不是散射验证检查。

const userValidator = {
  set(target, property, value) {
    if (property === 'username') {
      if (typeof value !== 'string' || value.length < 5) {
        throw new Error('Username must be a string of at least 5 characters');
      }
    } else if (property === 'email') {
      if (!value.includes('@')) {
        throw new Error('Invalid email address');
      }
    }

    target[property] = value;
    return true;
  },
};

const user = new Proxy({}, userValidator);

try {
  user.email = 'johnexample.com'; // This will throw an error
} catch (error) {
  console.error(error.message); // Output: Invalid email address
}

user.email = 'john@example.com'; // No error, email is valid

try {
  user.age = 15; // This will throw an error
} catch (error) {
  console.error(error.message); // Output: Invalid age
}
user.age = 25; // No error, age is valid

在这里,userValidator对象是Proxy,它在允许分配发生之前拦截属性分配并验证数据。如果未达到验证标准,则会引发错误。

代理的用例

  • 记录和调试:您可以使用代理来记录属性访问,分配和功能调试的函数调试。

  • 缓存:通过拦截属性访问和存储值以避免重新计算它们来实现缓存机制。

  • 不变的对象:代理可用于创建具有只读属性的对象,以防止意外修改。