代理模式

1. 代理模式

代理模式(Proxy): 为对象提供一个代理,用来控制这个对象的访问.
代理模式通俗来将就是我们生活中常见的中介
拿我们现实生活中的例子来说,假如我们现在想租房,虽然我们可以自己去找房,得自己找房东,联系相关的部门办理手续
很浪费时间和精力,于是我们一般都是通过中介来租房,他们来负责具体的流程,我只是负责选择自己喜欢的房子,然后付钱就行了.

1.1 为什么使用代理模式?

在某些情况下,有些对象由于某种原因(比如创建对象的开销很大,或者某些操作需要安全控制).直接访问的话会给使用这或者系统结构带来很多麻烦,我们可以在访问此对象加上一个对此对象的访问层.

1.2 代理模式的引用场景

• 场景一

//在我们需要对一个对象进行多次访问控制和上下文的时候, 代理模式是非常合适的
 let app = document.querySelector("#app");
app.addEventListener("click",function(){
     setTimeout(function(){
        this.style.color = "red"
     },200)
 })

上面的代码中由于匿名函数的this是默认指向window的,所以我们不论如何怎么点击此时都是无效的,因为this不是我们所期望的被触发的对象.

为了解决这类问题我们可以实现一个proxy方法类实现一个代理模式.通过调用它在这个函数中，使用这个函数和我们想要分配给它的this，我们将会得到一个包含了我们所期望的上下文中的值

function proxy(fn,context=window,...oldArgs){
    // 如果fn类型不为函数则抛出一个错误
   if(typeof fn !== "function") throw new Error("The arguments should be  a function");
    // 返回一个新函数
    return  function(...newArgs){
        // 绑定fn的上下文并并将指定的参数一起合并传递给fn
        return fn.call(context,...oldArgs.concat(newArgs))
    }
}
  app.addEventListener("click", function () {
      setTimeout(proxy(function(){
          this.style.color = "red"
      },this),100)
})

上面我们通过一个proxy方法实现了一个代理模式通过调用它在这个函数中，使用这个函数和我们想要分配给它的this，我们将会得到一个包含了我们所期望的上下文中的值。

• 场景二

 let rooms = {
     age:43,
     roomowner:'张三',
     sex:'男',
 }
 // 通过代理过滤不必要或不允许的访问
// password 验证密码 level 验证权限 isTourist 验证是否使用游客登录
let Fn = function ({password="",level=0, isTourist=true} ) {
   let handler = password === '我爱中国' ?
        {
            set(target,pro,value){
                if(level < 2 ){
                    throw new Error('权限过低')
                }else{
                    target[pro] = value
                    console.log(target);
                }
            },
            get(target,pro){
                return target[key]
            }
    }
    :{
        set(target,pro,value){
            console.error('密码错误, 不允许设置属性');
            return false
        },
        get(target,pro){
            if(isTourist){
                return target[pro]
            }
            return "不允许访问"
        }
    }
    const obj = new Proxy(rooms,handler);
    return obj
}
// Fn 通过参数信息 限制对象 target的操作
 let res = Fn({ password: "3633",level:3 ,isTourist: true});
//  res.roomowner = "434";// 密码错误 不允许设置属性

上面代码我们通过Fn函数内部通过参数信息限制对象rooms的读写,利用Es6的Proxy方法来实现了一个非常简单的代理.利用get和set方法拦截用户对对象读写,通过判断参数是否正确返回对应的信息

总结：通过对访问的代理，我们可以用于 远程代理、虚拟代理、安全代理、智能指引,来减少直接对对象访问的产生的开销.