Proxy

158 阅读1分钟
//实现一个观察者模式
    const queue = new Set()
    const observe = fn => queue.add(fn)  //观察者函数加入到队列里面
    const observable = obj => new Proxy(obj, { set })  //给被观察的对象绑定一个proxy

    function set(target, key, value, receiver) { //重写set方法
      const res = Reflect.set(target, key, value, receiver)
      queue.forEach(observer => observer()) //触发set时调用观察者函数
      return res
    }
    const person = observable({
      name: 'zhangsan',
      age: 12
    })
    function print() {  //观察者函数
      console.log(person.name)
    }
    observe(print)  //添加观察者
    person.name = 'sisi' //修改属性值时会自动执行观察者函数
//实现一个简单双向数据绑定
  <label for="input" id="lable"></label>
  <input type="text" id="input">

    var obj = {
      name: ''
    }
    Object.defineProperty(obj, 'name', { //重写set方法
      set: function (value) {
        document.getElementById('input').value = value;
        document.getElementById('lable').innerHTML = value;
      }
    })
    document.getElementById("input").addEventListener('input', function (e) {
      obj.name = e.target.value
    })