代理与反射API实现数据绑定与验证方法

const bindData = (data, onUpdate) => {
  return new Proxy(data, {
    set(target, key, value) {
      target[key] = value;
      onUpdate(key, value); // 触发更新回调
      return true;
    },
    get(target, key) {
      return Reflect.get(target, key);
    }
  });
};

// 示例：绑定表单数据
const form = bindData(
  { username: '', email: '' },
  (key, value) => {
    const input = document.getElementById(key);
    if (input && input.value !== value) {
      input.value = value;
    }
  }
);

// 监听输入事件，双向绑定
document.getElementById('username').addEventListener('input', e => {
  form.username = e.target.value;
});

const createValidatedObject = (validators) => {
  return (data) => new Proxy(data, {
    set(target, key, value) {
      const validator = validators[key];
      if (validator && !validator(value)) {
        console.warn(`${key} 的值 "${value}" 不符合验证规则`);
        return false;
      }
      return Reflect.set(target, key, value);
    },
    get(target, key) {
      return Reflect.get(target, key);
    }
  });
};

// 定义验证规则
const rules = {
  email: (val) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val),
  age: (val) => Number.isInteger(Number(val)) && val >= 0 && val 

const createReactiveForm = (initialData, validators, onUpdate) => {
  return new Proxy(initialData, {
    set(target, key, value) {
      const validator = validators[key];
      if (validator && !validator(value)) {
        document.querySelector(`[data-error="${key}"]`)?.classList.add('visible');
        return false;
      } else {
        document.querySelector(`[data-error="${key}"]`)?.classList.remove('visible');
      }

      const success = Reflect.set(target, key, value);
      if (success && onUpdate) {
        onUpdate(key, value);
      }
      return success;
    }
  });
};