typescript: Decorator Pattern

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/**
 * 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 装饰模式"

　　

調用：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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 @   ®Geovin Du Dream Park™  阅读(8)  评论(0)  编辑  收藏  举报
相关博文：
·  typescript: Visitor Pattern
·  typesciprt: Composite Pattern
·  装饰器模式
·  结构型设计模式-装饰器 Decorator
·  结构型模式--装饰
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2022-10-08 CSharp: Strategy Pattern in donet core 3
2022-10-08 CSharp: Observer Pattern in donet core 3
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示