/**
* Decorator Pattern 装饰是一种结构设计模式， 允许你通过将对象放入特殊封装对象中来为原对象增加新的行为。
* The base Component interface defines operations that can be altered by
* decorators.
*/
interface ComponentDecorator {
operation(): string;
}
/**
* Concrete Components provide default implementations of the operations. There
* might be several variations of these classes.
*/
class ConcreteComponent implements ComponentDecorator {
/**
*
* @returns
*/
public operation(): string {
return 'ConcreteComponent';
}
}
/**
* The base Decorator class follows the same interface as the other components.
* The primary purpose of this class is to define the wrapping interface for all
* concrete decorators. The default implementation of the wrapping code might
* include a field for storing a wrapped component and the means to initialize
* it.
*/
class DecoratorDecorator implements ComponentDecorator {
protected component: ComponentDecorator;
/**
*
* @param component
*/
constructor(component: ComponentDecorator) {
this.component = component;
}
/**
* The Decorator delegates all work to the wrapped component.
* @returns
*/
public operation(): string {
return this.component.operation();
}
}
/**
* Concrete Decorators call the wrapped object and alter its result in some way.
*/
class ConcreteDecoratorA extends DecoratorDecorator {
/**
* Decorators may call parent implementation of the operation, instead of
* calling the wrapped object directly. This approach simplifies extension
* of decorator classes.
*/
public operation(): string {
return `ConcreteDecoratorA(${super.operation()})`;
}
}
/**
* Decorators can execute their behavior either before or after the call to a
* wrapped object.
*/
class ConcreteDecoratorB extends DecoratorDecorator {
/**
*
* @returns
*/
public operation(): string {
return `ConcreteDecoratorB(${super.operation()})`;
}
}
/**
* The client code works with all objects using the Component interface. This
* way it can stay independent of the concrete classes of components it works
* with.
*/
function clientCodeDecorator(component: ComponentDecorator) {
// ...
let str="";
console.log(`RESULT: ${component.operation()}`);
return str=component.operation();
// ...
}
/**
* This way the client code can support both simple components...
*/
let puDec1="";
let puDec2="";
const simpleDecorator = new ConcreteComponent();
console.log('Client: I\'ve got a simple component:');
puDec1=clientCodeDecorator(simpleDecorator);
console.log('');
/**
* ...as well as decorated ones.
*
* Note how decorators can wrap not only simple components but the other
* decorators as well.
*/
const decorator1 = new ConcreteDecoratorA(simpleDecorator);
const decorator2 = new ConcreteDecoratorB(decorator1);
console.log('Client: Now I\'ve got a decorated component:');
puDec2=clientCodeDecorator(decorator2);
let messageDecorator: string = 'Hello World,This is a typescript!,涂聚文 Geovin Du Web';
document.body.innerHTML = messageDecorator+",one="+puDec1+",two="+puDec2+",TypeScript 装饰模式"
調用：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<head><title>TypeScript:装饰模式</title>
<meta name="Description" content="geovindu,涂聚文,Geovin Du"/>
<meta name="Keywords" content="geovindu,涂聚文,Geovin Du"/>
<meta name="author" content="geovindu,涂聚文,Geovin Du"/>
</head>
<body>
<script src="dist/Decoratorts.js"></script>
</body>
</html>
輸出：
