/** * * 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>
输出:
标签:typescript,console,log,mediator,pattern,Mediator,Component,notify From: https://www.cnblogs.com/geovindu/p/17759269.html