php装饰器模式 简书,设计模式(四)-装饰器模式

装饰器模式

允许将一个现有对象添加新的功能，同时又不改变其结构，这种类型的设计模式属于结构型模式,它作为现有类的一个包装，并且保持类的完整性的前提下,提供额外的功能.

图例

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.复用性高：可以将一个功能装饰器用来装饰不同的类型对象，实现装饰器的复用.