装饰器模式
允许将一个现有对象添加新的功能,同时又不改变其结构,这种类型的设计模式属于结构型模式,它作为现有类的一个包装,并且保持类的完整性的前提下,提供额外的功能.
图例
image.png
代码实现
class Coffee{
make(water){
return `咖啡:加${water}`
}
}
class MileCoffee{
constructor(parent){
this.parent=parent
}
make(water){
return `${this.parent.make(water)}加奶`
}
}
class SugarCoffee{
constructor(parent){
this.parent=parent
}
make(water){
return `${this.parent.make(water)}加糖`
}
}
let coffee=new Coffee()
let mileCoffee=new MileCoffee(coffee);
let sugarCoffee=new SugarCoffee(mileCoffee);
console.log(sugarCoffee.make('水')) //咖啡:加水加奶加糖
AOP(Aspect Oriented Programming)切片编程
针对业务处理过程中的切面进行提取,它所面对的是处理过程中的某个步骤或阶段,将逻辑过程中各部分之间低耦合的隔离效果.
代码实现
// before-target-after
Function.prototype.before=function(beforeFunc){
let _this=this; //function buy
return function(){
beforeFunc.apply(this,arguments)
_this.apply(this,arguments)
}
}
Function.prototype.after=function(afterFunc){
let _this=this;
return function(){
_this.apply(this,arguments);
afterFunc.apply(this,arguments)
}
}
function buy(money,goods){
console.log(`花了${money}钱,买了${goods}`)
}
buy=buy.before(function(){
console.log(`像媳妇要了1元钱`)
})
buy=buy.after(function(){
console.log(`退还媳妇0.2元钱`)
})
buy(0.8,'盐')
//像媳妇要了1元钱
//花了0.8钱,买了盐
//退还媳妇0.2元钱
应用场景
//vue mixin
const toggle = {
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
}
}
const Modal = {
template: '#modal',
mixins: [toggle],
components: {
appChild: Child
}
};
const Tooltip = {
template: '#tooltip',
mixins: [toggle],
components: {
appChild: Child
}
};
优点
1.可维护性高:可以替代传统类的继承方式来实现功能的拓展,减少子类的数量,允许用户在不引起子类数量暴增的前提下动态的修饰对象.添加功能.
2.灵活性高:被装饰可以使用装饰器动态的添加和撤销功能.
3.复用性高:可以将一个功能装饰器用来装饰不同的类型对象,实现装饰器的复用.