javascript设计模式-代理模式
代理模式在javascript中可以使用Proxy对象，可以更好的去控制一些对象的交互，既然谈到了Proxy，我们先简单了解一下Proxy到底是干什么的
Proxy
Proxy是用来创建一个对象的代理，实现对对象的拦截。比如对象属性的查找、赋值、枚举、函数调用等操作。语法如下
const p = new Proxy(target, handler)
// target 要代理的目标对象
// handler 对象，对象中定义了对target操作时要执行的一些操作
基础使用事例
const handler = {
get: function(obj, prop) {
return prop in obj ? obj[prop] : 'FE情报局'
}
}
const target = {}
const p = new Proxy(target, handler)
p.a = 1
p.b = undefined
console.log(p.a, p.b) // 1, undefined
console.log('c' in p, p.c) // false, FE情报局
原来的target上也有对应的属性a和b，但是要注意，从 target取值的时候并没有走代理，也就是target.c为undefined，target.a等于1 这样我们可以通过代理来对对象取值进行区分，比如对于一些不存在的属性，在取值的时候返回null
代理模式
其实Proxy就是一个代理模式，代理的是一个目标对象，上面的例子也表明它可以将对象的变化做一层代理，任何操作都需要经过此代理做一些额外的操作 你可以将其想象成我们的抓包工具，网络请求进来或者发出都要经过抓包，对其进行一些修改或者处理再给到服务器或者客户端，这种也被称为代理模式
例子
这种模式在我们的项目中具体有什么作用呢？上面我们提到了，可以将不存在的属性设置为null
const handler = {
get: function(obj, prop) {
return prop in obj ? obj[prop] : null
}
}
const target = {}
const p = new Proxy(target, handler)
// p.a => null
数据验证
代理也能够帮我们进行数据验证，能够让目标对象中的数据保持纯正，不会有一些意外的情况
const handler = {
set: function(obj, prop, value) {
if(prop === 'age' && value > 0 && value < 100){
obj['age'] = value
return true
}else{
throw new Error('age的值不符合要求，无法修改')
}
}
}
const target = {
age: 10
}
const p = new Proxy(target, handler)
// p.a => null
断点调试
针对一些有问题的数据，你可以进行一些断点或者log的操作，来看何时何地将什么内容设置为错误的数据
const handler = {
set: function(obj, prop, value) {
console.log(`set ${prop} from ${obj[prop]} to ${value}`);
obj[prop] = value;
return true
}
}
const target = {}
const p = new Proxy(target, handler)
p.a = 1
p.a = 2
// set a from undefined to 1
// set a from 1 to 2
格式化数据
const handler = {
set: function(obj, prop, value) {
obj[prop] = Number(value);
return true
}
}
const target = {}
const p = new Proxy(target, handler)
p.age = '10'
// p.age => 10
扩展对象方法
target可以是任何一个对象，包括数组，所以我们可以通过属性查找数组中的内容
const handler = {
get: function(obj, prop, value) {
if(prop in obj){
return obj[prop]
}
let result = null
for(let item of obj){
if(item.value === prop){
result = item
}
}
if(result){
return result
}
return undefined
}
}
const target = [
{
label: '苹果',
value: 'apple'
},
{
label: '香蕉',
value: 'banana'
}
]
const p = new Proxy(target, handler)
// p.length => 2
// p.apple => {label: '苹果', value: 'apple'}
// p[0] => {label: '苹果', value: 'apple'}
总结
代理确实能够方便我们一些操作，并且制定一些通用的handler能够解决我们很多的问题，但是任何东西都要有一个适度，过度使用代理的方式很容易对应用的性能造成一定的影响，所以对于一些关键的代码最好不要使用代理 代理还有一点就是在你排查问题的时候可能会有些困难，比如设置的某一个值不符合你的预期，或者使用的某一个值也不符合你的预期，但是你却不知道你在哪里改了它