/** * Template Method pattern 模版方法是一种行为设计模式, 它在基类中定义了一个算法的框架, 允许子类在不修改结构的情况下重写算法的特定步骤。 * file: Templatets.ts * The Abstract Class defines a template method that contains a skeleton of some * algorithm, composed of calls to (usually) abstract primitive operations. * * Concrete subclasses should implement these operations, but leave the template * method itself intact. */ abstract class AbstractClass { /** * The template method defines the skeleton of an algorithm. * * @param strinuput * @returns */ public templateMethod(strinuput:string): string { //void let getstr=""; this.baseOperation1(); getstr=this.requiredOperations1(strinuput); this.baseOperation2(); this.hook1(); this.requiredOperation2(strinuput); this.baseOperation3(); this.hook2(); return getstr; } /** * These operations already have implementations. */ protected baseOperation1(): void { console.log('AbstractClass says: I am doing the bulk of the work'); } /** * */ protected baseOperation2(): void { console.log('AbstractClass says: But I let subclasses override some operations'); } /** * */ protected baseOperation3(): void { console.log('AbstractClass says: But I am doing the bulk of the work anyway'); } /** * These operations have to be implemented in subclasses. * @param strinuput * @returns */ protected abstract requiredOperations1(strinuput:string):string; //void /** * * @param strinuput */ protected abstract requiredOperation2(strinuput:string): void; /** * These are "hooks." Subclasses may override them, but it's not mandatory * since the hooks already have default (but empty) implementation. Hooks * provide additional extension points in some crucial places of the * algorithm. */ protected hook1(): void { } /** * */ protected hook2(): void { } } /** * Concrete classes have to implement all abstract operations of the base class. * They can also override some operations with a default implementation. */ class ConcreteClass1 extends AbstractClass { /** * * @param strinuput * @returns */ protected requiredOperations1(strinuput:string):string { //void console.log('ConcreteClass1 says: Implemented Operation1,'+strinuput); return 'ConcreteClass1 says: Implemented Operation1,'+strinuput; } /** * * @param strinuput */ protected requiredOperation2(strinuput:string): void { console.log('ConcreteClass1 says: Implemented Operation2,'+strinuput); } } /** * Usually, concrete classes override only a fraction of base class' operations. */ class ConcreteClass2 extends AbstractClass { /** * * @param strinuput * @returns */ protected requiredOperations1(strinuput:string): string { //void console.log('ConcreteClass2 says: Implemented Operation1,'+strinuput); return 'ConcreteClass2 says: Implemented Operation1,'+strinuput; } /** * * @param strinuput */ protected requiredOperation2(strinuput:string): void { console.log('ConcreteClass2 says: Implemented Operation2,'+strinuput); } /** * */ protected hook1(): void { console.log('ConcreteClass2 says: Overridden Hook1'); } } let pubTemplate1=""; let pubTemplate2=""; let pubTemplate3="Geovin Du"; let pubTemplate4="geovindu"; /** * The client code calls the template method to execute the algorithm. Client * code does not have to know the concrete class of an object it works with, as * long as it works with objects through the interface of their base class. * 客户端显示 * @param abstractClass * @param strinput */ function clientCodeTemplate(abstractClass: AbstractClass,strinput:string) { // ... return abstractClass.templateMethod(strinput); // ... } console.log('Same client code can work with different subclasses:'); pubTemplate1=clientCodeTemplate(new ConcreteClass1(),"geovindu"); console.log(''); console.log('Same client code can work with different subclasses:'); pubTemplate2=clientCodeTemplate(new ConcreteClass2(),"geovindu"); let messageTemplate: string = 'Hello World,This is a typescript!,涂聚文 Geovin Du.Web'; document.body.innerHTML = messageTemplate+",<br/>one="+pubTemplate1+",<br/>two="+pubTemplate2+",<br/>three="+pubTemplate3+",<br/>four="+pubTemplate4+",<br/>TypeScript Template Method 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 Template Method 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/Templatets.js"></script> </body> </html>
输出:
- typescript Template pattern Methodtypescript template pattern method behavioral template pattern class typescript factory method in template pattern 24 curiously recurring template pattern factory pattern method typescript strategy pattern typescript iterator pattern typescript pattern state typescript mediator pattern