JavaScript 设计模式之代理模式

代理模式

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

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

const Car = function (name) { this.name = name
}
const Mini = function (car) {this.car = carthis.getPrice = function (price) {console.log(`当前的价格是${price}`)}
}
const Proxy = function (car) {this.car = carthis.getPrice = function (price) {(new Mini(car)).getPrice(price)}
}const car = new Proxy('BMW')
car.getPrice('23W') // 当前的价格是23W

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

装饰器模式

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

const Fun = function (name) {this.name = namethis.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 指向问题，其实在团队协作中使用还是挺多的

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

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