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

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

相关推荐
小飞悟13 小时前
一打开文章就弹登录框?我忍不了了!
前端·设计模式
Ares-Wang13 小时前
设计模式》》门面模式 适配器模式 区别
设计模式·适配器模式
不修×蝙蝠13 小时前
设计模式深度解析:单例、工厂、适配器与代理模式
单例模式·设计模式·代理模式·适配器模式·工厂
C雨后彩虹14 小时前
行为模式-策略模式
java·设计模式·策略模式
玩代码14 小时前
模板方法设计模式
java·开发语言·设计模式·模板方法设计模式
queenlll16 小时前
Codeforces Round 1034 (Div. 3)
代理模式
画船听雨眠aa19 小时前
23种设计模式--#2单例模式
单例模式·设计模式
饕餮争锋21 小时前
设计模式笔记_结构型_桥接模式
笔记·设计模式·桥接模式
我爱吃菠 菜21 小时前
手撕设计模式之消息推送系统——桥接模式
java·设计模式·桥接模式
vvilkim1 天前
深入理解设计模式:命令模式详解
设计模式·命令模式