typescript: State Pattern

 

/**
 * 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>

　　

 

输出：