标签： 前端 设计模式 装饰者模式 typescript Decorator Wrapper
如果下面的代码你能轻易阅读，那么你已经熟悉装饰者模式，可以接着学习其他的设计模式。
warpper.jpg
装饰者模式
装饰者模式: 装饰模式是在不必改变原类文件和使用继承的情况下，动态地扩展一个对象的功能。它是通过创建一个包装对象，也就是装饰来包裹真实的对象。
实际场景
我们购买一件白色/黑色的衣服。购买的主体是一件衣服。而白色和黑色是衣服的装饰，就像是条纹的/碎花的。
这时我们常常把白色/黑色，条纹/碎花作为装饰器装饰在衣服上。
如果需要为类增添特性或者职责，而从该类派生子类的解决办法并不实际的话，就应该使用装饰者模式。
装饰者模式的结构
- 装饰对象和真实对象有相同的接口。这样客户端对象就能以和真实对象相同的方式和装饰对象交互。
- 装饰对象包含一个真实对象的引用（reference）
- 装饰对象接受所有来自客户端的请求。它把这些请求转发给真实的对象。
- 装饰对象可以在转发这些请求以前或以后增加一些附加功能。这样就确保了在运行时，不用修改给定对象的结构就可以在外部增加附加的功能。在面向对象的设计中，通常是通过继承来实现对给定类的功能扩展。
装饰者模式的例子
制作一件有颜色的衣服
衣服的接口
/* i-clothes.ts */
export default interface IClothes {
setColor: (color) => any;
setType: (type) => any;
}
一个衣服的类实现衣服的接口，一个修改颜色的类实现衣服的接口
/* clothes-class.ts */
import IClothes from './i-clothes';
export class Clothes implements IClothes {
public color: string;
public type: string;
public setColor (color) {
this.color = color;
}
public setType (type) {
this.type = type;
}
}
export class ChangeColor implements IClothes {
public clothes: IClothes;
constructor (clothes: IClothes) {
// 对原对象进行'引用'
this.clothes = clothes;
}
public setColor (color) {
console.log('will be overridden')
}
public setType (type) {
// 将操作转发给原对象
this.clothes.setType(type);
}
}
两个颜色的类继承衣服的接口
/* color-class.ts */
import { ChangeColor } from './clothes-class';
import IClothes from './i-clothes';
export class WhiteClothes extends ChangeColor {
constructor (clothes: IClothes) {
super(clothes);
}
public setColor () {
this.clothes.setColor('white');
}
// 在装饰类中添加更多方法
public whiteFun () {
console.log('This is white function');
}
}
export class BlackClothes extends ChangeColor {
constructor (clothes: IClothes) {
super(clothes);
}
public setColor () {
this.clothes.setColor('black');
}
public blackFun () {
console.log('This is black function')
}
}
客户端的实现
/* client.ts */
import { Clothes } from './clothes-class';
import { BlackClothes, WhiteClothes } from './color-class';
import IClothes from './i-clothes';
class Client {
public getBlackClothesAndWhiteClothes () {
const clothes: IClothes = new Clothes();
const whiteClothes: WhiteClothes = new WhiteClothes(clothes);
whiteClothes.setColor();
whiteClothes.whiteFun();
const blackClothes: BlackClothes = new BlackClothes(clothes);
blackClothes.setColor();
blackClothes.blackFun();
}
}
new Client().getBlackClothesAndWhiteClothes();
当衣服是白色的时候会拥有白色衣服的特性和方法，当衣服变成黑色的时候，会拥有黑色衣服的特性和方法。
装饰者模式的利弊
优点
- Decorator模式与继承关系的目的都是要扩展对象的功能，但是Decorator可以提供比继承更多的灵活性。
- 通过使用不同的具体装饰类以及这些装饰类的排列组合，设计师可以创造出很多不同行为的组合。
缺点
- 这种比继承更加灵活机动的特性，也同时意味着更加多的复杂性。
- 装饰模式会导致设计中出现许多小类，如果过度使用，会使程序变得很复杂。
- 装饰模式是针对抽象组件（Component）类型编程。但是，如果你要针对具体组件编程时，就应该重新思考你的应用架构，以及装饰者是否合适。当然也可以改变Component接口，增加新的公开的行为，实现“半透明”的装饰者模式。在实际项目中要做出最佳选择。
