typescript: Decorator Pattern

 

/**
 * 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>

　　

輸出：

 

https://github.com/Apress/design-patterns-in-.net/
https://github.com/PacktPublishing/An-Atypical-ASP.NET-Core-6-Design-Patterns-Guide
https://link.springer.com/book/10.1007/978-1-4842-8245-8
https://github.com/Apress/design-patterns-.NET-6

posted @ 2023-10-08 06:43  ®Geovin Du Dream Park™  阅读(24)  评论(0)    收藏  举报