proxy和双向数据绑定

通俗讲，Proxy代理是构造函数，返回Proxy对象！
用于 从外部 控制对 对象内部 的访问！！！

举个例子：我们创建target对象，有以下2个属性：

const target = {
    a:1,
    b:2
};

创建handler对象拦截所有的get操作，如果target里有该属性，就返回它，没有就输出数字：37

let handler = {
    get: function (target, name) {
         return (
             name in target ? target[name] : 37
    )
    }
}

现在，我们通过传递 target和handler对象来创建一个新的代理。我们的代码可以与代理交互，而不是直接访问目标对象

const proxy = new Proxy(target, handler);
console.log(proxy.a);  //1 proxy代理了target对象
console.log(proxy.b);  //2
console.log(proxy.random);  //100

为什么不直接访问？应该是为了能控制它吧。

双向数据绑定

举例：input输入和let obj={a:1, b:2}。
双向：
1、input 到 js（对象）
2、js（对象）到 input

• 1简单的，不说了，通过addEventListener``input的oninput or onchange事件来改变对象的值

• 2用 proxy 来监听对象的改变来给input的value赋值。

const obj = {
  id:'inputName',
  name:''  //用来存储和更新 input 的 value 值
};

// 第二步：在js代码中修改myUse.name时，跟新input里的内容，这一步略微复杂，但是proxy代理提供了一个解决方案

    const inputHandler = {
            set: function (target, prop, newValue) {
                console.log(target, prop, newValue)
                if(prop =='name' && target.id ) { //prop指的是传入的对象里的属性：
                    //更新对象的属性
                    target[prop] = newValue;
                    

                    
                    // ############## 关键点 ##################

                    document.getElementById(target.id).value = newValue;

                    // ############## 关键点 ##################



                    return true;  //set方法返回值只有false或true；
                }
                else return false;
            }
        };

  // 创建 proxy
  const myUserProxy = new Proxy(myUser, inputHandler);
  myUserProxy.name = 'Lily';

  var myArea = document.getElementById('myArea');
  //初始textarea的值先给input框
  var input = document.getElementById('inputName');

  input.value = myArea.value;

  function getChange() {
      myUserProxy.name = myArea.value;
  }
  myArea.oninput = function () {
        getChange()
  }

屏幕快照 2019-02-16 下午2.23.16.png

ps：

let handler = {
  get: function(target, name){
    return name in target? target[name] : 37
  }
}

let p = new Proxy({},handler);
p.a = 1;

console.log(p.a) // 1
console.log(p.b)  // 37