JavaScript 怎么通过面向对象设计实现一个实时双向数据绑定的简易引擎-js教程-PHP中文网

双向数据绑定的核心逻辑是通过proxy拦截属性读写并结合依赖收集（track）与派发更新（trigger）机制，使model与view自动同步。

javascript 怎么通过面向对象设计实现一个实时双向数据绑定的简易引擎

什么是双向数据绑定的核心逻辑

双向数据绑定本质是让数据模型（Model）和视图（View）自动同步：当 JS 对象属性改变时，页面 DOM 自动更新；当用户操作 DOM（如输入框输入）时，对应的数据也实时更新。要实现它，关键在于拦截属性读写和建立依赖关系

用 Proxy 拦截数据访问（现代推荐方式）

ES6 的 Proxy 可以无缝劫持对象的 get/set 操作，比 Object.defineProperty 更强大（支持数组、新增属性等）。

示例：封装一个响应式函数 reactive

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key); // 收集当前副作用（如渲染函数）
      return target[key];
    },
    set(target, key, value) {
      const oldVal = target[key];
      target[key] = value;
      trigger(target, key, oldVal, value); // 触发更新
      return true;
    }
  });
}

其中 track 和 trigger 是依赖收集与派发更新的两个核心机制，需配合“响应式副作用”（如 effect 函数）使用。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

用 effect 建立响应式副作用

effect 类似 Vue 的 watch 或 React 的 useEffect，但它在执行时会自动读取 reactive 对象的属性，从而建立依赖。

const depsMap = new WeakMap(); // { target → { key → Set<effect> } }

function track(target, key) {
  let deps = depsMap.get(target);
  if (!deps) {
    deps = new Map();
    depsMap.set(target, deps);
  }
  let effects = deps.get(key);
  if (!effects) {
    effects = new Set();
    deps.set(key, effects);
  }
  effects.add(activeEffect);
}

function trigger(target, key) {
  const deps = depsMap.get(target)?.get(key);
  if (deps) {
    deps.forEach(effect => effect());
  }
}

let activeEffect = null;
function effect(fn) {
  activeEffect = fn;
  fn(); // 执行一次，触发 get 收集依赖
  activeEffect = null;
}
</effect>

绑定 HTML 元素实现双向更新

对 input、textarea 等表单元素，监听 input 事件并同步赋值给响应式对象；同时用 set 触发 DOM 更新。

简易指令式绑定示例：

function bindInput(el, obj, key) {
  el.value = obj[key]; // 初始化视图

  effect(() => {
    el.value = obj[key]; // 数据变 → 视图变
  });

  el.addEventListener('input', () => {
    obj[key] = el.value; // 视图变 → 数据变（触发 set → trigger → effect 重执行）
  });
}

// 使用
const data = reactive({ message: 'Hello' });
const input = document.getElementById('msg');
bindInput(input, data, 'message');

这样就完成了最简但完整的双向绑定闭环：数据改 → 视图刷新；用户输 → 数据更新 → 视图再刷新（确保一致性）。