JavaScriptProxy实现数据绑定教程

const data = {
  message: 'Hello'
};

const app = document.getElementById('app');

const proxy = new Proxy(data, {
  set(target, key, value) {
    target[key] = value;
    // 更新视图
    updateView();
    return true;
  },
  get(target, key) {
    return target[key];
  }
});

function updateView() {
  app.innerHTML = `<input type="text" value="${proxy.message}" oninput="handleInput(event)">`;
}

function handleInput(event) {
  proxy.message = event.target.value; // 触发Proxy的set，进而更新视图
}

// HTML结构
// <div id="app"></div>

const data = { text: '初始值' };

const view = `
  &lt;input type=&quot;text&quot; value=&quot;\${data.text}&quot; oninput=&quot;onInputChange(this.value)&quot;&gt;
  <p>\${data.text}</p>
`;

function onInputChange(value) {
  proxyData.text = value;
}

function render() {
  app.innerHTML = view.replace(/\$\{data\.text\}/g, proxyData.text);
}

const proxyData = new Proxy(data, {
  set(target, prop, value) {
    target[prop] = value;
    render(); // 数据变化，重新渲染
    return true;
  }
});

render(); // 初始渲染