代理模式可以使用javascript中的Proxy对象,可以更好的控制一些对象的交互。说完Proxy,我们先简单了解一下Proxy是干什么的。ProxyProxy用于为一个对象创建一个代理,它实现了对对象的拦截。如对象属性查找、赋值、枚举、函数调用等操作。语法如下constp=newProxy(target,handler)//target被代理的目标对象//handler对象,定义了对目标进行操作时要执行的一些操作基本用例consthandler={get:function(obj,prop){返回obj中的prop?obj[prop]:'FEIntelligenceAgency'}}consttarget={}constp=newProxy(target,handler)p.a=1p.b=undefinedconsole.log(p.a,p.b)//1,undefinedconsole.log('c'inp,p.c)//false,FE情报局原来的target也有对应的属性a和b,但是需要注意的是从target取值的时候,没有代理,也就是target.c是undefined,target.a等于1这样我们就可以通过代理来区分对象值。例如,对于一些不存在的属性,取值时返回null。Proxy其实就是一种代理模式。代理是一个目标对象。上面的例子也表明它可以充当对象变化的代理。任何操作都需要通过这个代理来做一些额外的操作。你可以把它想象成我们的抓包工具。网络请求进来或发送必须被捕获、修改或处理,然后发送到服务器或客户端。这也称为代理模式示例。这个模式在我们的项目中有什么作用呢?正如我们上面提到的,您可以将不存在的属性设置为nullconsthandler={get:function(obj,prop){returnpropinobj?obj[prop]:null}}consttarget={}constp=newProxy(target,handler)//p.a=>null数据校验代理也可以帮助我们进行数据校验,保持目标对象中的数据纯净,并且不会出现意外情况。consthandler={set:function(obj,prop,value){if(prop==='age'&&value&g吨;0&&value<100){obj['age']=valuereturntrue}else{thrownewError('age的值不符合要求,不能修改')}}}consttarget={age:10}constp=newProxy(target,handler)//p.a=>nullbreakpointdebugging对于一些有问题的数据,可以进行一些断点或者日志操作,看看什么时候、什么地方、什么内容被设置为错误数据consthandler={set:function(obj,prop,value){console.log(`set${prop}from${obj[prop]}to${value}`);obj[prop]=价值;returntrue}}consttarget={}constp=newProxy(target,handler)p.a=1p.a=2//setafromundefinedto1//setafrom1to2格式化数据consthandler={set:函数(obj,prop,值){obj[prop]=Number(值);returntrue}}consttarget={}constp=newProxy(target,handler)p.age='10'//p.age=>10扩展对象方法target可以是任何对象,包括数组,所以我们可以看看通过属性consthandler={get:function(obj,prop,value){if(propinobj){returnobj[prop]}letresult=nullfor(letitemofobj){if(item.value===prop){result=itemm}}if(result){返回结果}返回未定义}}consttarget=[{label:'apple',value:'apple'},{label:'banana',value:'banana'}]constp=newProxy(target,handler)//p.length=>2//p.apple=>{label:'apple',value:'apple'}//p[0]=>{label:'apple',value:'apple'}总结Proxy确实可以方便我们的操作,制定一些通用的handler可以解决我们的很多问题,但是凡事都要适度,过度使用proxy很容易在一定程度上影响应用的性能。所以一些关键代码最好不要使用proxy。还有一点就是你在排查问题的时候可能会比较困难,比如设置了某个值不符合你的期望,或者使用了某个值。做你期望的,但你不知道你在哪里改变了它
