typesciprt: Composite 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 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179

/**  * Composite Pattern 组合是一种结构型设计模式， 你可以使用它将对象组合成树状结构， 并且能像使用独立对象一样使用它们。  * https://refactoringguru.cn/design-patterns/composite/typescript/example#lang-features  * The base Component class declares common operations for both simple and  * complex objects of a composition.  *  *  */ abstract class DuComponent {     protected parent!: DuComponent | null;       /**      * Optionally, the base Component can declare an interface for setting and      * accessing a parent of the component in a tree structure. It can also      * provide some default implementation for these methods.      */     public setParent(parent: DuComponent | null) {         this.parent = parent;     }     /**      *      */     public getParent(): DuComponent | null {         return this.parent;     }       /**      * In some cases, it would be beneficial to define the child-management      * operations right in the base Component class. This way, you won't need to      * expose any concrete component classes to the client code, even during the      * object tree assembly. The downside is that these methods will be empty      * for the leaf-level components.      */     public add(component: DuComponent): void { }     /**      *      * @param component      */     public remove(component: DuComponent): void { }       /**      * You can provide a method that lets the client code figure out whether a      * component can bear children.      */     public isComposite(): boolean {         return false;     }       /**      * The base Component may implement some default behavior or leave it to      * concrete classes (by declaring the method containing the behavior as      * "abstract").      */     public abstract operation(): string; }   /**  * The Leaf class represents the end objects of a composition. A leaf can't have  * any children.  *  * Usually, it's the Leaf objects that do the actual work, whereas Composite  * objects only delegate to their sub-components.  */ class Leaf extends DuComponent {     public operation(): string {         return 'Leaf';     } }   /**  * The Composite class represents the complex components that may have children.  * Usually, the Composite objects delegate the actual work to their children and  * then "sum-up" the result.  */ class Composite extends DuComponent {     protected children: DuComponent[] = [];       /**      * A composite object can add or remove other components (both simple or      * complex) to or from its child list.      */     public add(component: DuComponent): void {         this.children.push(component);         component.setParent(this);     }     /**      *      * @param component      */     public remove(component: DuComponent): void {         const componentIndex = this.children.indexOf(component);         this.children.splice(componentIndex, 1);           component.setParent(null);     }     /**      *      */     public isComposite(): boolean {         return true;     }       /**      * The Composite executes its primary logic in a particular way. It      * traverses recursively through all its children, collecting and summing      * their results. Since the composite's children pass these calls to their      * children and so forth, the whole object tree is traversed as a result.      */     public operation(): string {         const results = [];         for (const child of this.children) {             results.push(child.operation());         }           return `Branch(${results.join('+')})`;     } }   /**  * The client code works with all of the components via the base interface.  */ function clientCodeCompostite(component: DuComponent) {     // ...     let str="";     console.log(`RESULT: ${component.operation()}`);           str=str+component.operation();     return str;     // ... }   /**  * This way the client code can support the simple leaf components...  */ let strCom=""; const simple = new Leaf(); console.log('Client: I\'ve got a simple component:');   strCom=clientCodeCompostite(simple);   console.log('');   /**  * ...as well as the complex composites.  */ const tree = new Composite(); const branch1 = new Composite(); branch1.add(new Leaf()); branch1.add(new Leaf()); const branch2 = new Composite(); branch2.add(new Leaf()); tree.add(branch1); tree.add(branch2); console.log('Client: Now I\'ve got a composite tree:'); let strCom1=clientCodeCompostite(tree); console.log('');   /**  * Thanks to the fact that the child-management operations are declared in the  * base Component class, the client code can work with any component, simple or  * complex, without depending on their concrete classes.  */ function clientCodeCompostite2(component1: DuComponent, component2: DuComponent) {     // ...     let str="";     if (component1.isComposite()) {         component1.add(component2);     }     console.log(`RESULT: ${component1.operation()}`);       return str=component1.operation()+","+component2.operation();       }   console.log('Client: I don\'t need to check the components classes even when managing the tree:'); let strCom2=clientCodeCompostite2(tree, simple);   let messageComposite: string = 'Hello World,This is a typescript!,涂聚文 Geovin Du Web'; document.body.innerHTML = messageComposite+",one="+strCom+",two="+strCom1+",three="+strCom2+",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/Compositets.js"></script>     </body> </html>

　　

 

输出：