typesciprt: Composite Pattern

 

/**
 * 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 组合模式"

　　

调用：

<!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>

　　

 

输出：