JS設計模式之狀態模的示例分析

這篇文章主要介紹了JS設計模式之狀態模的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創新互聯公司是一家專業提供前進企業網站建設,專注與網站設計制作、成都網站制作、H5響應式網站、小程序制作等業務。10年已為前進眾多企業、政府機構等服務。創新互聯專業網站設計公司優惠進行中。

1. 概述

當一個對象的內在狀態改變時允許改變其行為，這個對象看起來像是改變了其類。

2. 解決的問題

主要解決的是當控制一個對象狀態轉換的條件表達式過于復雜時的情況。把狀態的判斷邏輯轉移到表示不同的一系列類當中，可以把復雜的邏輯判斷簡單化。

function Context( _state ) {
 this.state = _state;
 this.request = function() {
  this.state.Handle( this );
 }
}
function ConcreteStateA() {
 this.Handle = function( context ) {
  console.log("A");
  context.state = new ConcreteStateB();
 }
}
function ConcreteStateB() {
 this.Handle = function( context ) {
  console.log("B");
  context.state = new ConcreteStateA();
 }
}
// 設置Context的初始狀態為ConcreteStateA
var context = new Context(new ConcreteStateA());
// 不斷地進行請求，同時更改狀態
context.request();
context.request();

狀態模式的使用場景也特別明確，有如下兩點：

一個對象的行為取決于它的狀態，并且它必須在運行時刻根據狀態改變它的行為。

一個操作中含有大量的分支語句，而且這些分支語句依賴于該對象的狀態。狀態通常為一個或多個枚舉常量的表示。

應用場景：

打電話有如下幾種狀態：獲取電話號碼、撥號中、通話中、通話結束。
這幾種狀態的順序是以次進行的，那么我們就可以根據這幾種狀態來實現狀態模式；

獲取電話號碼

JS設計模式之狀態模的示例分析