typescript: Visitor Pattern

/**
 * 
 * Visitor Pattern  访问者是一种行为设计模式， 允许你在不修改已有代码的情况下向已有类层次结构中增加新的行为。
 * file: Visitorts.ts
 * The Component interface declares an `accept` method that should take the base
 * visitor interface as an argument.
 */
interface GeovinComponent {


    accept(visitor: Visitor):string ; //void
}

/**
 * Each Concrete Component must implement the `accept` method in such a way that
 * it calls the visitor's method corresponding to the component's class.
 */
class ConcreteComponentA implements GeovinComponent {
    /**
     * Note that we're calling `visitConcreteComponentA`, which matches the
     * current class name. This way we let the visitor know the class of the
     * component it works with.
     */
    public accept(visitor: Visitor): string { //void
       return visitor.visitConcreteComponentA(this);
    }

    /**
     * Concrete Components may have special methods that don't exist in their
     * base class or interface. The Visitor is still able to use these methods
     * since it's aware of the component's concrete class.
     */
    public exclusiveMethodOfConcreteComponentA(): string {
        return 'A';
    }
}

class ConcreteComponentB implements GeovinComponent {
    /**
     * Same here: visitConcreteComponentB => ConcreteComponentB
     */
    public accept(visitor: Visitor): string { //void
       return visitor.visitConcreteComponentB(this);
    }
    /**
     * 
     * @returns 
     */
    public specialMethodOfConcreteComponentB(): string {
        return 'B';
    }
}

/**
 * The Visitor Interface declares a set of visiting methods that correspond to
 * component classes. The signature of a visiting method allows the visitor to
 * identify the exact class of the component that it's dealing with.
 */
interface Visitor {

    /**
     * 
     * @param element 
     */
    visitConcreteComponentA(element: ConcreteComponentA): string; //void

    /**
     * 
     * @param element 
     */
    visitConcreteComponentB(element: ConcreteComponentB): string; //void
}

/**
 * Concrete Visitors implement several versions of the same algorithm, which can
 * work with all concrete component classes.
 *
 * You can experience the biggest benefit of the Visitor pattern when using it
 * with a complex object structure, such as a Composite tree. In this case, it
 * might be helpful to store some intermediate state of the algorithm while
 * executing visitor's methods over various objects of the structure.
 */
class ConcreteVisitor1 implements Visitor {


    public visitConcreteComponentA(element: ConcreteComponentA): string {//void
        console.log(`${element.exclusiveMethodOfConcreteComponentA()} + ConcreteVisitor1`);
        return element.exclusiveMethodOfConcreteComponentA()+ "+ConcreteVisitor1";
    }

    public visitConcreteComponentB(element: ConcreteComponentB): string {//void
        console.log(`${element.specialMethodOfConcreteComponentB()} + ConcreteVisitor1`);
        return element.specialMethodOfConcreteComponentB()+"+ConcreteVisitor1";
    }
}

/**
 * 
 */
class ConcreteVisitor2 implements Visitor {

    public visitConcreteComponentA(element: ConcreteComponentA):string  {//void
        console.log(`${element.exclusiveMethodOfConcreteComponentA()} + ConcreteVisitor2`);
        return element.exclusiveMethodOfConcreteComponentA()+"+ ConcreteVisitor2";
    }

    public visitConcreteComponentB(element: ConcreteComponentB): string {//void
        console.log(`${element.specialMethodOfConcreteComponentB()} + ConcreteVisitor2`);
        return element.specialMethodOfConcreteComponentB()+"+ ConcreteVisitor2";
    }
}

/**
 * The client code can run visitor operations over any set of elements without
 * figuring out their concrete classes. The accept operation directs a call to
 * the appropriate operation in the visitor object.
 */
function clientCodeVisitor(components: GeovinComponent[], visitor: Visitor) {
    // ...
    let getstr=" ";
    for (const component of components) {
        getstr=getstr+component.accept(visitor)+" ";

       //visitor.visitConcreteComponentB(component);
       // visitor.visitConcreteComponentA(component);
    }
    return getstr;
    // ...
}

const components = [
    new ConcreteComponentA(),
    new ConcreteComponentB(),
];


let pubVisitor1="";
let pubVisitor2="";
let pubVisitor3="Geovin Du";
let pubVisitor4="geovindu";

console.log('The client code works with all visitors via the base Visitor interface:');
const visitor1 = new ConcreteVisitor1();
pubVisitor1=clientCodeVisitor(components, visitor1);
console.log('');

console.log('It allows the same client code to work with different types of visitors:');
const visitor2 = new ConcreteVisitor2();
pubVisitor2=clientCodeVisitor(components, visitor2);

let messageVisitor: string = 'Hello World,This is a typescript!,涂聚文 Geovin Du.Web';
document.body.innerHTML = messageVisitor+",<br/>one="+pubVisitor1+",<br/>two="+pubVisitor2+",<br/>three="+pubVisitor3+",<br/>four="+pubVisitor4+",<br/>TypeScript Strategy Pattern 策略模式";　

<!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 Hello Visitor Pattern  访问者模式</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/Visitorts.js"></script>
    </body>
</html>