proxy和双向数据绑定

2019-02-16  本文已影响2人  Allan要做活神仙

通俗讲,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
    )
    }
}

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

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、inputjs(对象)
2、js(对象)到 input

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
上一篇 下一篇

猜你喜欢

热点阅读