欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

分别使用 Object.defineProperty 和 proxy 实现简单的数据双向绑定

程序员文章站 2022-07-12 22:57:11
...

Object.defineProperty

<input id="input">
<span id="span"></span>
const data = {
  text: 'default'
}
var input = document.getElementById('input');
var span = document.getElementById('span');

function define(data, key, value) {
  Object.defineProperty(data, key, {
    set(newV) {
      input.value = newV;
      span.innerHTML = newV;
   // 可以看到,这里其实是需要 另外一个 不涉及到 data 内存的地址来专门存放数据
   // 可以使用闭包
   // 要不然会陷入死循环
   // 可以试试看改成 data[key] = value
      value = newV
    },
    get() {
   // 同上, 可以试试 return data[key]
      return value
    }
  })
}
define(data, 'text', data.text)
input.addEventListener('input', function (e) {
  data.text = e.target.value  
});

proxy

const data = {
  text: 'default'
}
var input = document.getElementById('input');
var span = document.getElementById('span');

const handler = {
// 可以看到,这里其实是没有指定 key 的,也就是说,他是绑定在所有属性上的
// 因此不需要像 definePropery 一样, 每一个 key 都要执行一次 definePropery 
  set(target, key, value) {
    target[key] = value;
    input.value = value;
    span.innerHTML = value;
    
    return value;
  },
//  事实上,不同于 defineProperty ,这里不需要设置 get 也能够拿到对应的属性
  get(target, key) {
    return target[key];
  }
}
const proxy = new Proxy(data, handler);
input.addEventListener('input', function (e) {
  proxy.text = e.target.value  
})

而且 proxy 经过专门的优化,运行速度比 defineProperty 要快

相关标签: 前端