/** * State Pattern 状态是一种行为设计模式, 让你能在一个对象的内部状态变化时改变其行为。 * The Context defines the interface of interest to clients. It also maintains a * reference to an instance of a State subclass, which represents the current * state of the Context. */ class Context { /** * @type {State} A reference to the current state of the Context. */ private state: State; /** * * @param state */ constructor(state: State) { this.transitionTo(state); } /** * The Context allows changing the State object at runtime. * @returns */ public transitionTo(state: State):string { //void let getstr=""; console.log(`Context: Transition to ${(<any>state).constructor.name}.`); getstr="Context: Transition to."+ (<any>state).constructor.name.toString()+""; // this.state = state; this.state.setContext(this); return getstr; } /** * The Context delegates part of its behavior to the current State object. * @returns */ public request1(): string { //void let getstr=""; this.state.handle1(); getstr=this.state.handle1(); return getstr; } /** * * @returns */ public request2(): string { //void let getstr=""; this.state.handle2(); getstr=this.state.handle2(); return getstr; } } /** * The base State class declares methods that all Concrete State should * implement and also provides a backreference to the Context object, associated * with the State. This backreference can be used by States to transition the * Context to another State. */ abstract class State { protected context: Context; /** * * @param context */ public setContext(context: Context) { this.context = context; } /** * * @returns */ public abstract handle1(): string; //void /** * * @returns */ public abstract handle2():string ; //void } /** * Concrete States implement various behaviors, associated with a state of the * Context. */ class ConcreteStateA extends State { /** * * @returns */ public handle1(): string { //void let getstr=""; console.log('ConcreteStateA handles request1.'); console.log('ConcreteStateA wants to change the state of the context.'); getstr="ConcreteStateA handles request1." getstr=getstr+","+this.context.transitionTo(new ConcreteStateA()); return getstr; } /** * * @returns */ public handle2(): string { //void let getstr=""; console.log('ConcreteStateA handles request2.'); getstr="ConcreteStateA handles request2."; getstr=getstr+","+this.context.transitionTo(new ConcreteStateB()); return getstr; } } /** * */ class ConcreteStateB extends State { /** * * @returns */ public handle1():string { //void let getstr=""; console.log('ConcreteStateB handles request1.'); getstr="ConcreteStateB handles request1."; getstr=getstr+","+this.context.transitionTo(new ConcreteStateB()); return getstr; } /** * * @returns */ public handle2(): string { //void let getstr=""; console.log('ConcreteStateB handles request2.'); console.log('ConcreteStateB wants to change the state of the context.'); getstr="ConcreteStateB handles request2."; //this.context.transitionTo(new ConcreteStateA()); getstr=getstr+","+this.context.transitionTo(new ConcreteStateA()); return getstr; } } let pubState1=""; let pubState2=""; let pubState3="Geovin Du"; let pubState4="geovindu"; /** * The client code. */ const context = new Context(new ConcreteStateA()); pubState1=context.request1(); pubState2=context.request2()+","+context.transitionTo(new ConcreteStateA()); const contextB = new Context(new ConcreteStateB()); pubState3=contextB.request1(); pubState4=contextB.request2()+","+contextB.transitionTo(new ConcreteStateB()); let messageState: string = 'Hello World,This is a typescript!,涂聚文 Geovin Du.Web'; document.body.innerHTML = messageState+",<br/>one="+pubState1+",<br/>two="+pubState2+",<br/>three="+pubState3+",<br/>four="+pubState4+",<br/>TypeScript State 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 State 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/Statets.js"></script> </body> </html>
输出:
- typescript Pattern Statetypescript pattern state typescript strategy pattern typescript iterator pattern typescript template pattern method typescript mediator pattern responsibility typescript pattern chain typescript observer pattern typescript prototype pattern typescript adapter pattern typescript memento pattern