摘要:介一回聊狀態(tài)模式,官方描述允許一個對象在其內(nèi)部狀態(tài)改變時改變它的行為。有限狀態(tài)機有限狀態(tài)機是一個非常有用的模型,可以模擬世界上大部分事物。這個是官方說法,簡單說,她有三個特征,狀態(tài)總數(shù)是有限的。,任一時刻,只處在一種狀態(tài)之中。
本回內(nèi)容介紹
上一回聊了聊組合模式(Composite),用組合模式模擬了個圖片庫,聊了遞歸。
介一回聊狀態(tài)模式(State),官方描述允許一個對象在其內(nèi)部狀態(tài)改變時改變它的行為。略抽象,不過看了代碼會覺得比較簡單,直接看代碼先。
狀態(tài)模式中引入了抽象狀態(tài)類和具體狀態(tài)類,這里會用到之前講過的接口模式,不清楚的盆友可以看系列05,這個例子是我根據(jù)一段PHP的狀態(tài)模式代碼改的JS版本,如下:
</>復制代碼
var c = console,d = document;
window.onload = function(){
// 定義了一個state接口,倆方法handle,display
var State = new Interface("State",["handle","display"]);
// 這里的Context是環(huán)境類,或者稱為上下文類,是擁有多種狀態(tài)的對象。
var Context = function(state){
// 狀態(tài)變化的屬性
var _state = null;
var _self = this;
// 這里是設置狀態(tài)對象
this.setState = function(state){
_self._state = state;
}
// 調(diào)用狀態(tài)對象的方法
this.request = function(){
_self._state.display();
_self._state.handle(_self);
}
this.setState(state);
}
// 具體狀態(tài)類,抽象狀態(tài)類的子類
var StateA = function(){
// 檢測接口,不明白的童鞋看系列05
Interface.ensureImplements(this,State);
}
// 狀態(tài)類的實現(xiàn)
StateA.prototype = {
constructor:StateA,
// 這里的context指向的是Context
handle:function(context){
// 設置為其他狀態(tài)
context.setState(new StateB());
},
// 具體實現(xiàn)的方法
display:function(){
c.log("StateA");
}
}
// StateB跟StateA一樣,只是狀態(tài)設置不同
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)設置不同
var StateC = function(){
Interface.ensureImplements(this,State);
}
StateC.prototype = {
constructor:StateC,
handle:function(context){
context.setState(new StateA());
},
display:function(){
c.log("StateC");
}
}
// 測試代碼
var o = new Context(new StateB());
o.request(); // StateB
o.request(); // StateC
o.request(); // StateA
o.request(); // StateB
o.request(); // StateC
o.request(); // StateA
}
之所以把這個例子改成JS版本,是因為這個例子比較簡單,直觀。在實際使用時,在一個狀態(tài)類中可能包含多個業(yè)務方法,如果在具體狀態(tài)類中某些業(yè)務方法的實現(xiàn)完全相同,可以將這些方法移至抽象狀態(tài)類,實現(xiàn)代碼的復用。
2. 狀態(tài)模式之工作流狀態(tài)模式在工作流或游戲等各種系統(tǒng)中應用比較廣泛,下面的例子是一個簡單的訂單審批流程,根據(jù)一段Java的狀態(tài)模式代碼改的JS版本,如下:
</>復制代碼
var c = console,w = window;
w.onload = function(){
// 業(yè)務申請方
function Obj() {
// 申請方
this.obj = "";
// 日期
this.sDate = "";
// 金額
this.aMount = "";
// 結果
this.res = "";
}
// 跟上一個例子一樣,Context狀態(tài)管理類
var Context = function (s) {
this.state = null;
this.run = function (s) {
this.state = s;
};
this.run(s);
}
// 第一層級審核
var StateA = function (o) {
// 這一堆就是一個簡單交互
var reply = w.prompt("同意請按1,不同意請按任意鍵");
var res = reply == 1 ? "同意" : "不同意";
var state;
o.res = res;
// 一堆打印信息
c.log(
"平臺審核中..." +
"申請方:" + o.obj + " " +
"日期:" + o.sDate + " " +
"金額:" + o.aMount + " " +
"平臺審核結果:" + o.res
);
// 判斷是否同意,如果不同意直接走Notice提示不同意
if (reply == 1) {
// 這里就是走第二層級
state = new StateB(o);
} else {
state = new Notice(o);
}
return state;
}
// 第二層級審核,跟第一層級差不多
var StateB = function (o) {
var reply = w.prompt("同意請按1,不同意請按任意鍵");
var res = reply == 1 ? "同意" : "不同意";
var state;
o.res = res;
c.log(
"商家審核中..." +
"申請方:" + o.obj + " " +
"日期:" + o.sDate + " " +
"金額:" + o.aMount + " " +
"商家審核結果:" + o.res
);
// 因為是最終審核,所以直接走Notice提示
state = new Notice(o);
return state;
}
// Notice通知類,打印信息
var Notice = function (o) {
c.log("申請方:" + o.obj + "的流程結束,審核結果為:" + o.res);
}
// 測試
var o = new Obj();
o.obj = "大衛(wèi)";
o.sDate = "圣誕節(jié)";
o.aMount = 250;
var req = new Context(new StateA(o));
req.run();
};
這個例子跟上一個例子都是狀態(tài)模式的一個很好體現(xiàn),這個例子更貼近實際開發(fā),
申請方提交訂單,平臺訂單審核,審核通過更改狀態(tài)為審核通過,然后繼續(xù)商家中心審核,通過與不通過都流程結束,直接調(diào)用提示類提示結果。
有限狀態(tài)機(Finite-state machine)是一個非常有用的模型,可以模擬世界上大部分事物。這個是官方說法,簡單說,她有三個特征:
1,狀態(tài)總數(shù)(state)是有限的。
2,任一時刻,只處在一種狀態(tài)之中。
3,某種條件下,會從一種狀態(tài)轉變(transition)到另一種狀態(tài)。
直接代碼吧,很直觀的,根據(jù)網(wǎng)上的交通燈例子改的,如下::
</>復制代碼
var c = console,d = document;
window.onload = function(){
var Light = function() {
// 設置默認狀態(tài),關燈
this.currentState = State.off;
this.lightSwitch = null;
};
Light.prototype.run = function() {
var _self = this;
// 這里是開關
var lightSwitch = d.createElement("button");
// 這個canvas就當是一盞燈了
var cvs = d.createElement("canvas");
cvs.width = "200";
cvs.height = "200";
cvs.style.backgroundColor = "lightblue";
cvs.style.borderRadius = "50%";
cvs.style.display = "block";
// 初始值是開燈
lightSwitch.innerHTML = "開燈";
// Dom方法appendChild沒什么好說的
this.lightSwitch = d.body.appendChild(lightSwitch);
this.cvs = d.body.appendChild(cvs);
// 開關的點擊事件
this.lightSwitch.onclick = function() {
// 委托請求給State狀態(tài)機,這里分兩步走,第一步是_self.currentState,第二步是btnPress,call用來指向將作用域指向本身
_self.currentState.btnPress.call(_self);
};
};
// 這里就是多種狀態(tài)間的切換,這里只寫了兩種,開關燈
var State = {
off: {
btnPress: function() {
this.lightSwitch.innerHTML = "關燈";
this.cvs.style.display = "none";
this.currentState = State.on;
}
},
on: {
btnPress: function() {
this.lightSwitch.innerHTML = "開燈";
this.cvs.style.display = "block";
this.currentState = State.off;
}
}
};
// 測試代碼
var light = new Light();
light.run();
};
這里就是多種狀態(tài)間的切換,這里只寫了兩種,開關燈,好玩兒一點可以換canvas的顏色,做變亮變暗的狀態(tài)。
裝個逼,雖然最近熱映的《尋龍訣》好看,還是要推薦一個阿湯哥的老電影《遺忘戰(zhàn)境》~~
</>復制代碼
這一回聊的狀態(tài)模式,有限狀態(tài)機,狀態(tài)模式可以允許客戶端改變狀態(tài)的轉換行為,而狀態(tài)機則是能夠自動改變狀態(tài)~。
下面的內(nèi)容,聊一下狀態(tài)管理,這里拿一個極具審美(因為作者經(jīng)常提審美^_^)的JS庫Vue.js的官方例子來說。
JS狀態(tài)管理
Vue官方解釋是集中管理狀態(tài)更易于理解狀態(tài)將怎樣變化。組件仍然可以擁有和管理它的私有狀態(tài)??催^上面的例子,看這個應該很好理解,繼續(xù)寫:
</>復制代碼
// 這里的store里面放了所有的action
var store = {
state: {
message: "Hello!"
},
// 這里的action則用來修改store的狀態(tài)state
actionA: function () {
this.state.message = "action A triggered"
},
// 這里跟上面的例子很像
actionB: function () {
this.state.message = "action B triggered"
}
}
// 這個new Vue暫時不用管,簡單的解釋下吧,通過構造函數(shù)Vue創(chuàng)建一個Vue的根實例
var vmA = new Vue({
data: {
privateState: {},
sharedState: store.state
}
})
var vmB = new Vue({
data: {
privateState: {},
sharedState: store.state
}
})
這是vue.js官網(wǎng)上的一個例子,最近很火的框架react,vue.js在說flux單向數(shù)據(jù)流,其實就是在維護狀態(tài)。
話外音這里啰嗦一下,有盆友建議說聊一下AngularJS,在系列04里有聊過一點點ng1.x的源碼,也模擬了一下,并且說過可以的話,分享讀過的Angularjs源碼段子。介于前端框架風起云涌,其實,對Angular有興趣的盆友,可以直接從Angular2開始,如果是學習源碼的話,Vue.js的源碼讀起來會更有美感(因為作者反復提審美^_^)~~
</>復制代碼
這一回,主要聊了狀態(tài)模式,有限狀態(tài)機,介紹了下Vue.js這個庫。
下一回,聊一聊JS的鏈式調(diào)用,沒錯,肯定會模擬框架,庫什么的。
客觀看完點個贊,推薦推薦唄,嘿嘿~~
注:此系飛狐原創(chuàng),轉載請注明出處
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78366.html
本回內(nèi)容介紹 上一回聊到JS中模擬接口,裝飾者模式,摻元類,分析了backbone的繼承源碼,感覺還好吧! 介一回,偶們來聊一下在JS單例模式(singleton),單例模式其實運用很廣泛,比如:jquery,AngularJS,underscore吖蝦米的都是單例模式,來吧,直接開始咯: 1. 單例模式 保證一個類只有一個實例,從全局命名空間里提供一個唯一的訪問點來訪問該對象。其實之前寫過的對象...
摘要:本回內(nèi)容介紹上一回聊到數(shù)據(jù)類型,簡單的過了一遍,包括個數(shù)組新特性等,這一回來聊聊對象,結合數(shù)組來實戰(zhàn)一些例子,在做題中成長,記憶會更深刻,來吧,開始咯創(chuàng)建實例的方式有兩種使用操作符后跟構造函數(shù)飛狐使用對象字面量表示法飛狐也可以飛狐這種寫法與 本回內(nèi)容介紹 上一回聊到JS數(shù)據(jù)類型,簡單的過了一遍,包括9個數(shù)組新特性等,這一回來聊聊Object對象,結合數(shù)組來實戰(zhàn)一些例子,在做題中成長,記...
摘要:橋接模式之特權函數(shù)特權函數(shù),用一些具有特權的方法作為橋梁以便訪問私有空間,可以回憶一下之前的系列。連續(xù)自然數(shù)分組,計算最多組的個數(shù)將至這個連續(xù)自然數(shù)分成組使每組相加的值相等。個數(shù)組中數(shù)字最多的一組有個此時的和為。 本回內(nèi)容介紹 上一回,聊了適配器模式,圖片預加載,介一回,聊橋接模式(Bridge),跟之前一樣,難度比較小,橋接模式將抽象部分與它的實現(xiàn)部分分離,通過橋接模式聯(lián)系彼此,同時...
摘要:本回內(nèi)容介紹上一回,聊了代理模式,虛擬代理,圖片懶加載,介一回,也比較容易,適配器模式,用一個新的接口對現(xiàn)有類的接口進行包裝,處理類與的不匹配。這一回,主要聊了適配器模式,圖片預加載,主要還是理解下一回,聊一聊橋接模式,順便做一做計算題。 本回內(nèi)容介紹 上一回,聊了代理模式,虛擬代理,圖片懶加載,介一回,也比較容易,適配器模式(Adapter),用一個新的接口對現(xiàn)有類的接口進行包裝,處...
摘要:本回內(nèi)容介紹上一回,聊了聊狀態(tài)模式,并介紹了一下介一回,聊鏈式編程,模擬一下,再模擬一下封裝一個庫。這一回,主要聊了鏈式調(diào)用,模擬了,尤其是,希望大家能喜歡這次代碼分享。下一回,聊一聊的策略模式。 本回內(nèi)容介紹 上一回,聊了聊狀態(tài)模式(State),并介紹了一下vue.js;介一回,聊鏈式編程,模擬一下jQuery,再模擬一下underscore.js,封裝一個庫。 1. 鏈式調(diào)用 (...
閱讀 2859·2021-10-21 09:38
閱讀 2760·2021-10-11 10:59
閱讀 3045·2021-09-27 13:36
閱讀 1667·2021-08-23 09:43
閱讀 799·2019-08-29 14:14
閱讀 3039·2019-08-29 12:13
閱讀 3208·2019-08-29 12:13
閱讀 317·2019-08-26 12:24