feer.cc

V1

2022/11/22阅读:15主题:全栈蓝

javascript设计模式-代理模式

代理模式在javascript中可以使用Proxy对象,可以更好的去控制一些对象的交互,既然谈到了Proxy,我们先简单了解一下Proxy到底是干什么的

Proxy

Proxy是用来创建一个对象的代理,实现对对象的拦截。比如对象属性的查找、赋值、枚举、函数调用等操作。语法如下

const p = new Proxy(target, handler)
// target 要代理的目标对象
// handler 对象,对象中定义了对target操作时要执行的一些操作

基础使用事例

const handler = {
  getfunction(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 = {
  getfunction(obj, prop{
    return prop in obj ? obj[prop] : null
  }
}
const target = {}
const p = new Proxy(target, handler)

// p.a => null

数据验证

代理也能够帮我们进行数据验证,能够让目标对象中的数据保持纯正,不会有一些意外的情况

const handler = {
  setfunction(obj, prop, value{
    if(prop === 'age' && value > 0 && value < 100){
      obj['age'] = value
      return true
    }else{
      throw new Error('age的值不符合要求,无法修改')
    }
  }
}
const target = {
  age10
}
const p = new Proxy(target, handler)

// p.a => null

断点调试

针对一些有问题的数据,你可以进行一些断点或者log的操作,来看何时何地将什么内容设置为错误的数据

const handler = {
  setfunction(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 = {
  setfunction(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 = {
  getfunction(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能够解决我们很多的问题,但是任何东西都要有一个适度,过度使用代理的方式很容易对应用的性能造成一定的影响,所以对于一些关键的代码最好不要使用代理 代理还有一点就是在你排查问题的时候可能会有些困难,比如设置的某一个值不符合你的预期,或者使用的某一个值也不符合你的预期,但是你却不知道你在哪里改了它

分类:

前端

标签:

前端

作者介绍

feer.cc
V1

微信公众号:FE情报局