JavaScript数据绑定_双向绑定原理实现

// 数据模型

立即学习“Java免费学习笔记（深入）”；

let data = {

  message: ''

};

// 绑定元素

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

const span = document.getElementById('output');

// 数据劫持

Object.defineProperty(data, 'message', {

  get() {

    return this._message;

  },

  set(value) {

    this._message = value;

    // 更新视图

    input.value = value;

    span.innerText = value;

  }

});

// 监听视图变化

input.addEventListener('input', function(e) {

  data.message = e.target.value;

});

let data = {

  message: ''

};

const handler = {

  set(target, key, value) {

    target[key] = value;

    // 更新视图

    document.getElementById('input').value = value;

    document.getElementById('output').innerText = value;

    return true;

angularjs框架实现纯前端实现双向绑定数据表格

angularjs框架实现纯前端实现双向绑定数据表格

35

查看详情

  }

};

const proxyData = new Proxy(data, handler);

document.getElementById('input').addEventListener('input', (e) => {

  proxyData.message = e.target.value;

});

function bindTwoWay(data, prop, inputEl, outputEl) {

  const proxy = new Proxy(data, {

    set(target, key, value) {

      if (key === prop) {

        inputEl.value = value;

        outputEl.innerText = value;

      }

      target[key] = value;

      return true;

    }

  });

  inputEl.addEventListener('input', (e) => {

    proxy[prop] = e.target.value;

  });

  // 初始化视图

  inputEl.value = data[prop];

  outputEl.innerText = data[prop];

  return proxy;

}

// 使用示例

let model = { message: 'Hello' };

bindTwoWay(model, 'message',

  document.getElementById('input'),

  document.getElementById('output')

);