摘要：介一回聊狀態(tài)模式，官方描述允許一個(gè)對(duì)象在其內(nèi)部狀態(tài)改變時(shí)改變它的行為。有限狀態(tài)機(jī)有限狀態(tài)機(jī)是一個(gè)非常有用的模型，可以模擬世界上大部分事物。這個(gè)是官方說(shuō)法，簡(jiǎn)單說(shuō)，她有三個(gè)特征，狀態(tài)總數(shù)是有限的。，任一時(shí)刻，只處在一種狀態(tài)之中。

上一回聊了聊組合模式（Composite），用組合模式模擬了個(gè)圖片庫(kù)，聊了遞歸。
介一回聊狀態(tài)模式（State），官方描述允許一個(gè)對(duì)象在其內(nèi)部狀態(tài)改變時(shí)改變它的行為。略抽象，不過(guò)看了代碼會(huì)覺(jué)得比較簡(jiǎn)單，直接看代碼先。

狀態(tài)模式中引入了抽象狀態(tài)類(lèi)和具體狀態(tài)類(lèi)，這里會(huì)用到之前講過(guò)的接口模式，不清楚的盆友可以看系列05，這個(gè)例子是我根據(jù)一段PHP的狀態(tài)模式代碼改的JS版本，如下：

var c = console,d = document;
window.onload = function(){
    // 定義了一個(gè)state接口,倆方法handle，display
    var State = new Interface("State",["handle","display"]);
    // 這里的Context是環(huán)境類(lèi)，或者稱(chēng)為上下文類(lèi)，是擁有多種狀態(tài)的對(duì)象。
    var Context = function(state){
        // 狀態(tài)變化的屬性
        var _state = null;
        var _self = this;
        // 這里是設(shè)置狀態(tài)對(duì)象
        this.setState = function(state){
            _self._state = state;
        }
        // 調(diào)用狀態(tài)對(duì)象的方法  
        this.request = function(){
            _self._state.display();
            _self._state.handle(_self);
        }
        this.setState(state);
        
    }
    
    // 具體狀態(tài)類(lèi)，抽象狀態(tài)類(lèi)的子類(lèi)
    var StateA = function(){
        // 檢測(cè)接口，不明白的童鞋看系列05
        Interface.ensureImplements(this,State);
    }
    // 狀態(tài)類(lèi)的實(shí)現(xiàn)
    StateA.prototype = {
        constructor:StateA,
        // 這里的context指向的是Context
        handle:function(context){
            // 設(shè)置為其他狀態(tài)
            context.setState(new StateB());
        },
        // 具體實(shí)現(xiàn)的方法
        display:function(){
            c.log("StateA");
        }
    }
    // StateB跟StateA一樣，只是狀態(tài)設(shè)置不同
    var StateB = function(){    
        Interface.ensureImplements(this,State);
    }
    StateB.prototype = {
        constructor:StateB,
        handle:function(context){
            context.setState(new StateC());
        },
        display:function(){
            c.log("StateB");
        }
    }
    // StateC跟StateB一樣，只是狀態(tài)設(shè)置不同
    var StateC = function(){    
        Interface.ensureImplements(this,State);
    }
    StateC.prototype = {
        constructor:StateC,
        handle:function(context){
            context.setState(new StateA());
        },
        display:function(){
            c.log("StateC");
        }
    }
    // 測(cè)試代碼
    var o = new Context(new StateB());
    o.request();    // StateB
    o.request();    // StateC
    o.request();    // StateA
    o.request();    // StateB
    o.request();    // StateC
    o.request();    // StateA
} 

之所以把這個(gè)例子改成JS版本，是因?yàn)檫@個(gè)例子比較簡(jiǎn)單，直觀。在實(shí)際使用時(shí)，在一個(gè)狀態(tài)類(lèi)中可能包含多個(gè)業(yè)務(wù)方法，如果在具體狀態(tài)類(lèi)中某些業(yè)務(wù)方法的實(shí)現(xiàn)完全相同，可以將這些方法移至抽象狀態(tài)類(lèi)，實(shí)現(xiàn)代碼的復(fù)用。

狀態(tài)模式在工作流或游戲等各種系統(tǒng)中應(yīng)用比較廣泛，下面的例子是一個(gè)簡(jiǎn)單的訂單審批流程，根據(jù)一段Java的狀態(tài)模式代碼改的JS版本，如下:

var c = console,w = window;
w.onload = function(){
    // 業(yè)務(wù)申請(qǐng)方
    function Obj() {
        // 申請(qǐng)方
        this.obj = "";
        // 日期
        this.sDate = "";
        // 金額
        this.aMount = "";
        // 結(jié)果
        this.res = "";
    }

    // 跟上一個(gè)例子一樣，Context狀態(tài)管理類(lèi)
    var Context = function (s) {
        this.state = null;
        this.run = function (s) {
            this.state = s;
        };
        this.run(s);
    }

    // 第一層級(jí)審核
    var StateA = function (o) {
        // 這一堆就是一個(gè)簡(jiǎn)單交互
        var reply = w.prompt("同意請(qǐng)按1，不同意請(qǐng)按任意鍵");
        var res = reply == 1 ? "同意" : "不同意";
        var state;
        o.res = res;
        // 一堆打印信息
        c.log(
            "平臺(tái)審核中..." + 
            "申請(qǐng)方：" + o.obj + " " + 
            "日期：" + o.sDate + " " + 
            "金額：" + o.aMount + " " + 
            "平臺(tái)審核結(jié)果：" + o.res
            );
        // 判斷是否同意，如果不同意直接走Notice提示不同意
        if (reply == 1) {
            // 這里就是走第二層級(jí)
            state = new StateB(o);
        } else {
            state = new Notice(o);
        }

        return state;
    }
    
    // 第二層級(jí)審核，跟第一層級(jí)差不多
    var StateB = function (o) {
        var reply = w.prompt("同意請(qǐng)按1，不同意請(qǐng)按任意鍵");
        var res = reply == 1 ? "同意" : "不同意";
        var state;
        o.res = res;
        c.log(
            "商家審核中..." + 
            "申請(qǐng)方：" + o.obj + " " + 
            "日期：" + o.sDate + " " + 
            "金額：" + o.aMount + " " + 
            "商家審核結(jié)果：" + o.res
            );
        // 因?yàn)槭亲罱K審核，所以直接走Notice提示
        state = new Notice(o);
        return state;
    }

    // Notice通知類(lèi)，打印信息
    var Notice = function (o) {
        c.log("申請(qǐng)方：" + o.obj + "的流程結(jié)束，審核結(jié)果為：" + o.res);
    }

    // 測(cè)試
    var o = new Obj();
    o.obj = "大衛(wèi)";
    o.sDate = "圣誕節(jié)";
    o.aMount = 250;
    
    var req = new Context(new StateA(o));
    req.run();
}; 

這個(gè)例子跟上一個(gè)例子都是狀態(tài)模式的一個(gè)很好體現(xiàn)，這個(gè)例子更貼近實(shí)際開(kāi)發(fā)，
申請(qǐng)方提交訂單，平臺(tái)訂單審核，審核通過(guò)更改狀態(tài)為審核通過(guò)，然后繼續(xù)商家中心審核，通過(guò)與不通過(guò)都流程結(jié)束，直接調(diào)用提示類(lèi)提示結(jié)果。

有限狀態(tài)機(jī)（Finite-state machine）是一個(gè)非常有用的模型，可以模擬世界上大部分事物。這個(gè)是官方說(shuō)法，簡(jiǎn)單說(shuō)，她有三個(gè)特征：
1，狀態(tài)總數(shù)（state）是有限的。
2，任一時(shí)刻，只處在一種狀態(tài)之中。
3，某種條件下，會(huì)從一種狀態(tài)轉(zhuǎn)變（transition）到另一種狀態(tài)。
直接代碼吧，很直觀的，根據(jù)網(wǎng)上的交通燈例子改的，如下：:

var c = console,d = document;
window.onload = function(){
    var Light = function() {
        // 設(shè)置默認(rèn)狀態(tài)，關(guān)燈
        this.currentState = State.off;
        this.lightSwitch = null;
    };

    Light.prototype.run = function() {
        var _self = this;
        // 這里是開(kāi)關(guān)
        var lightSwitch = d.createElement("button");
        // 這個(gè)canvas就當(dāng)是一盞燈了
        var cvs = d.createElement("canvas");
        cvs.width = "200";
        cvs.height = "200";
        cvs.style.backgroundColor = "lightblue";
        cvs.style.borderRadius = "50%";
        cvs.style.display = "block";
        // 初始值是開(kāi)燈
        lightSwitch.innerHTML = "開(kāi)燈";
        // Dom方法appendChild沒(méi)什么好說(shuō)的
        this.lightSwitch = d.body.appendChild(lightSwitch);
        this.cvs = d.body.appendChild(cvs);
        // 開(kāi)關(guān)的點(diǎn)擊事件
        this.lightSwitch.onclick = function() {
            // 委托請(qǐng)求給State狀態(tài)機(jī)，這里分兩步走，第一步是_self.currentState，第二步是btnPress，call用來(lái)指向?qū)⒆饔糜蛑赶虮旧?            _self.currentState.btnPress.call(_self);
        };
    };

    // 這里就是多種狀態(tài)間的切換，這里只寫(xiě)了兩種，開(kāi)關(guān)燈
    var State = {
        off: {
            btnPress: function() {
                this.lightSwitch.innerHTML = "關(guān)燈";
                this.cvs.style.display = "none";
                this.currentState = State.on;
            }
        },
        on: {
            btnPress: function() {
                this.lightSwitch.innerHTML = "開(kāi)燈";
                this.cvs.style.display = "block";
                this.currentState = State.off;
            }
        }
    };
    // 測(cè)試代碼
    var light = new Light();
    light.run(); 
};

這里就是多種狀態(tài)間的切換，這里只寫(xiě)了兩種，開(kāi)關(guān)燈，好玩兒一點(diǎn)可以換canvas的顏色，做變亮變暗的狀態(tài)。

裝個(gè)逼，雖然最近熱映的《尋龍?jiān)E》好看，還是要推薦一個(gè)阿湯哥的老電影《遺忘戰(zhàn)境》~~

這一回聊的狀態(tài)模式，有限狀態(tài)機(jī)，狀態(tài)模式可以允許客戶(hù)端改變狀態(tài)的轉(zhuǎn)換行為，而狀態(tài)機(jī)則是能夠自動(dòng)改變狀態(tài)~。
下面的內(nèi)容，聊一下?tīng)顟B(tài)管理，這里拿一個(gè)極具審美（因?yàn)樽髡呓?jīng)常提審美^_^）的JS庫(kù)Vue.js的官方例子來(lái)說(shuō)。

Vue官方解釋是集中管理狀態(tài)更易于理解狀態(tài)將怎樣變化。組件仍然可以擁有和管理它的私有狀態(tài)?？催^(guò)上面的例子，看這個(gè)應(yīng)該很好理解，繼續(xù)寫(xiě)：

// 這里的store里面放了所有的action
var store = {
  state: {
    message: "Hello!"
  },
  // 這里的action則用來(lái)修改store的狀態(tài)state
  actionA: function () {
    this.state.message = "action A triggered"
  },
  // 這里跟上面的例子很像
  actionB: function () {
    this.state.message = "action B triggered"
  }
}
// 這個(gè)new Vue暫時(shí)不用管，簡(jiǎn)單的解釋下吧，通過(guò)構(gòu)造函數(shù)Vue創(chuàng)建一個(gè)Vue的根實(shí)例
var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

這是vue.js官網(wǎng)上的一個(gè)例子，最近很火的框架react，vue.js在說(shuō)flux單向數(shù)據(jù)流，其實(shí)就是在維護(hù)狀態(tài)。

這里啰嗦一下，有盆友建議說(shuō)聊一下AngularJS，在系列04里有聊過(guò)一點(diǎn)點(diǎn)ng1.x的源碼，也模擬了一下，并且說(shuō)過(guò)可以的話(huà)，分享讀過(guò)的Angularjs源碼段子。介于前端框架風(fēng)起云涌，其實(shí)，對(duì)Angular有興趣的盆友，可以直接從Angular2開(kāi)始，如果是學(xué)習(xí)源碼的話(huà)，Vue.js的源碼讀起來(lái)會(huì)更有美感（因?yàn)樽髡叻磸?fù)提審美^_^）~~

這一回，主要聊了狀態(tài)模式，有限狀態(tài)機(jī)，介紹了下Vue.js這個(gè)庫(kù)。
下一回，聊一聊JS的鏈?zhǔn)秸{(diào)用，沒(méi)錯(cuò)，肯定會(huì)模擬框架，庫(kù)什么的。

客觀看完點(diǎn)個(gè)贊，推薦推薦唄，嘿嘿~~

注：此系飛狐原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處