JavaScript 设计模式之代理模式

代理模式

其实这种模式在现在很多地方也都有使用到,如 Vue3 中的数据相应原理就是使用的 es6 中的 Proxy 代理及 Reflect 反射的方式来处理数据响应式

我们日常在使用数据请求时,也会用到一些代理的方式,比如在请求不同的域名,端口等会出现跨域的情况,这时就需要用到代理去获取对应的数据了,日常可能会用到 nginx 代理来获取,或者是 jsonp 的方式来获取

javascript 复制代码
const Car = function (name) { 
  this.name = name
}
const Mini = function (car) {
  this.car = car
  this.getPrice = function (price) {
    console.log(`当前的价格是${price}`)
  }
}
const Proxy = function (car) {
  this.car = car
  this.getPrice = function (price) {
    (new Mini(car)).getPrice(price)
  }
}

const car = new Proxy('BMW')
car.getPrice('23W') // 当前的价格是23W

这样就通过代理模式拿到了对应的数据

装饰器模式

通常我们在团队中使用一些公用方法时会遇到这种情况,在不改变他人代码的情况下如何通用他人的代码呢,这就需要使用到我们常用到的装饰器模式了,他便能很好的解决这种问题

javascript 复制代码
const Fun = function (name) {
  this.name = name
  this.sayHi = () => {
    console.log(`my name: ${this.name}`)
  }
  this.eat = (ttt) => {
    console.log(`${this.name} is eating`)
  }
}

const decor = function (decFn, fn) {
  decFn()
  return fn
}
const test = decor(function () {
  // todo: 需要做其他的事,自己的逻辑
  console.log('开始吃饭了~~')
}, new Fun('朴者和尚').eat)

test() // 朴者和尚 is eating

这种模式还是很好理解的,上面我们使用箭头函数,为了避免 this 指向问题,其实在团队协作中使用还是挺多的

javascript 复制代码
const Car = function (name) {
  this.name = name;
  this.cost = function (price=100) { 
    return price
  }
}
const BaoMaCar = function (car) {
  this.cost = function () {
    return car.cost() + 100
  }
}
const BenChiCar = function (car) {
  this.cost = function () {
    return car.cost() + 75
  }
}

const bao = new BaoMaCar(new Car('BMW'))
const ben = new BenChiCar(new Car('Audi'))
console.log(bao.cost()) // 200
console.log(ben.cost()) // 175

在不同的车类型价格上增加不同的定制

相关推荐
李广坤1 小时前
状态模式(State Pattern)
设计模式
李广坤2 小时前
观察者模式(Observer Pattern)
设计模式
李广坤3 小时前
中介者模式(Mediator Pattern)
设计模式
李广坤3 小时前
迭代器模式(Iterator Pattern)
设计模式
李广坤4 小时前
解释器模式(Interpreter Pattern)
设计模式
阿无,7 小时前
java23种设计模式之前言
设计模式
Asort8 小时前
JavaScript设计模式(八):组合模式(Composite)——构建灵活可扩展的树形对象结构
前端·javascript·设计模式
数据智能老司机8 小时前
数据工程设计模式——数据基础
大数据·设计模式·架构
笨手笨脚の10 小时前
设计模式-代理模式
设计模式·代理模式·aop·动态代理·结构型设计模式
Overboom18 小时前
[C++] --- 常用设计模式
开发语言·c++·设计模式