typescript: Mediator pattern

 

/**
 * 
 * Mediator pattern 中介者是一种行为设计模式， 让程序组件通过特殊的中介者对象进行间接沟通， 达到减少组件之间依赖关系的目的。
 * file: Mediatorts.ts
 * The Mediator interface declares a method used by components to notify the
 * mediator about various events. The Mediator may react to these events and
 * pass the execution to other components.
 */
interface Mediator {


    notify(sender: object, event: string): void; //void
}

/**
 * Concrete Mediators implement cooperative behavior by coordinating several
 * components.
 */
class ConcreteMediator implements Mediator {

    private component1: Component1;

    private component2: Component2;

    

    constructor(c1: Component1, c2: Component2) {

        this.component1 = c1;
        this.component1.setMediator(this);
        this.component2 = c2;
        this.component2.setMediator(this);
    }

    public notify(sender: object, event: string):string  { //void
        let getstr="";
        if (event === 'A') {
            console.log('Mediator reacts on A and triggers following operations:');
            this.component2.doC();
            getstr="Mediator reacts on A and triggers following operations:";
            getstr=getstr+this.component2.doC();
        }

        if (event === 'D') {
            console.log('Mediator reacts on D and triggers following operations:');
            this.component1.doB();
            this.component2.doC();
            getstr="Mediator reacts on D and triggers following operations:";
            getstr=getstr+this.component1.doB()+","+this.component2.doC();
        }

        return getstr;

    }
}

/**
 * The Base Component provides the basic functionality of storing a mediator's
 * instance inside component objects.
 */
class BaseComponent {

    protected mediator: Mediator;

    constructor(mediator?: Mediator) {
        this.mediator = mediator!;
    }

    public setMediator(mediator: Mediator): void {
        this.mediator = mediator;
    }
}

/**
 * Concrete Components implement various functionality. They don't depend on
 * other components. They also don't depend on any concrete mediator classes.
 */
class Component1 extends BaseComponent {

    /**
     * 
     * @returns 
     */
    public doA(): string { //void
        console.log('Component 1 does A.');
        this.mediator.notify(this, 'A');

        return "Component 1 does A."
    }
    /**
     * 
     * @returns 
     */
    public doB(): string { //void
        console.log('Component 1 does B.');
        this.mediator.notify(this, 'B');

        return "Component 1 does B.";
    }
}

/**
 * 
 */
class Component2 extends BaseComponent {

    /**
     * 
     * @returns 
     */
    public doC(): string {
        console.log('Component 2 does C.');
        this.mediator.notify(this, 'C');
        return "Component 2 does C.";
    }
    /**
     * 
     * @returns 
     */
    public doD(): string {
        console.log('Component 2 does D.');
        this.mediator.notify(this, 'D');
        return "Component 2 does D.";
    }
}

let pubMediator1="";
let pubMediator2="";
let pubMediator3="Geovin Du";
let pubMediator4="geovindu";

/**
 * The client code.
 */
const c1 = new Component1();

const c2 = new Component2();

const mediator = new ConcreteMediator(c1, c2);

console.log('Client triggers operation A.');
pubMediator1=c1.doA();

console.log('');
console.log('Client triggers operation D.');
pubMediator2=c2.doD();

pubMediator3=mediator.notify(c1,"A");//B

pubMediator4=mediator.notify(c2,"D");//C


let messageMediator: string = 'Hello World,This is a typescript!,涂聚文 Geovin Du.Web';
document.body.innerHTML = messageMediator+",<br/>one="+pubMediator1+",<br/>two="+pubMediator2+",<br/>three="+pubMediator3+",<br/>four="+pubMediator4+",<br/>TypeScript Command 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 Mediator 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/Mediatorts.js"></script>
    </body>
</html>

　　

 

输出：

 

posted @ 2023-10-12 13:18  ®Geovin Du Dream Park™  阅读(21)  评论(0)    收藏  举报