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方法拦截用户对对象读写,通过判断参数是否正确返回对应的信息
总结：通过对访问的代理，我们可以用于 远程代理、虚拟代理、安全代理、智能指引,来减少直接对对象访问的产生的开销.
