typescript: State Pattern

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167

/**  * 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 状态模式";

　　

调用：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<!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>

　　

 

输出：