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 = ``;
}

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

// HTML结构
// 


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

const view = `
  
  
\${data.text}
`;

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(); // 初始渲染