文章目錄

• • • 1.前言
    • 2.概念
    • 3.模式的結(jié)構(gòu)和實(shí)現(xiàn)
    • • 3.1 模式的結(jié)構(gòu)
      • 3.2模式的實(shí)現(xiàn)

1.前言

在現(xiàn)實(shí)生活中，人都有高興和傷心的時(shí)候，不同的時(shí)候有不同的行為，有狀態(tài)的對(duì)象編程中高興，傷心可以看成一種狀態(tài)，傳統(tǒng)的解決方案是：人的不同時(shí)候的行為都要考慮到的話，然后使用 if-else 或 switch-case 語(yǔ)句來(lái)做狀態(tài)判斷，再進(jìn)行不同情況的處理。這樣代碼會(huì)會(huì)過(guò)于臃腫，可讀性差，且不具備擴(kuò)展性，維護(hù)難度也大。且增加新的狀態(tài)時(shí)要添加新的 if-else 語(yǔ)句，這違背了“開閉原則”，不利于程序的擴(kuò)展。

2.概念

狀態(tài)模式的定義：對(duì)有狀態(tài)的對(duì)象，把復(fù)雜的“判斷邏輯”提取到不同的狀態(tài)對(duì)象中，允許狀態(tài)對(duì)象在其內(nèi)部狀態(tài)發(fā)生改變時(shí)改變其行為。狀態(tài)模式的思想是：當(dāng)控制一個(gè)對(duì)象狀態(tài)轉(zhuǎn)換的條件表達(dá)式過(guò)于復(fù)雜時(shí)，把相關(guān)“判斷邏輯”提取出來(lái)，用各個(gè)不同的類進(jìn)行表示，系統(tǒng)處于哪種情況，直接使用相應(yīng)的狀態(tài)類對(duì)象進(jìn)行處理，這樣能把原來(lái)復(fù)雜的邏輯判斷簡(jiǎn)單化，消除了 if-else、switch-case 等冗余語(yǔ)句，代碼更有層次性，并且具備良好的擴(kuò)展力。

3.模式的結(jié)構(gòu)和實(shí)現(xiàn)

狀態(tài)模式把受環(huán)境改變的對(duì)象行為包裝在不同的狀態(tài)對(duì)象里，其目的是讓一個(gè)對(duì)象在其內(nèi)部狀態(tài)改變的時(shí)候，其行為也隨之改變?，F(xiàn)在我們來(lái)分析其基本結(jié)構(gòu)和實(shí)現(xiàn)方法。

3.1 模式的結(jié)構(gòu)

狀態(tài)模式包含以下主要角色。

環(huán)境類（Context）角色：也稱為上下文，相當(dāng)是所有狀態(tài)的管理者（manage）并負(fù)責(zé)具體狀態(tài)的切換。

抽象狀態(tài)（State）角色：定義一個(gè)接口，用以封裝環(huán)境對(duì)象中的特定狀態(tài)所對(duì)應(yīng)的行為，可以有一個(gè)或多個(gè)行為。

具體狀態(tài)（Concrete State）角色：實(shí)現(xiàn)抽象狀態(tài)所對(duì)應(yīng)的行為，并且在需要的情況下進(jìn)行狀態(tài)切換。

3.2模式的實(shí)現(xiàn)

場(chǎng)景:這個(gè)場(chǎng)景大家都很熟悉，鼠標(biāo)進(jìn)去某個(gè)元素，會(huì)有個(gè)高亮的樣式，當(dāng)鼠標(biāo)點(diǎn)擊這個(gè)元素的時(shí)候，會(huì)有個(gè)選中的樣式，再次點(diǎn)擊選中狀態(tài)樣式消失,當(dāng)鼠標(biāo)離開元素，元素沒有樣式

簡(jiǎn)單分析下，這里的話會(huì)有4個(gè)狀態(tài)，正常狀態(tài)（無(wú)樣式），高亮狀態(tài)（懸浮樣式），選中狀態(tài)（選中樣式），高亮選中狀態(tài)（懸浮加選中樣式）,并且一個(gè)狀態(tài)進(jìn)入另一個(gè)狀態(tài)是有條件的，看下圖

按需求畫出類圖

1.首先創(chuàng)建一個(gè)抽象類ElementStatus

export abstract class ElementStatus {public statusName: string;public abstract calculateState(eventName: string):ElementStatus; }

2.分別創(chuàng)建ElementNormalState類（正常狀態(tài)），ElementHightLightState類（高亮狀態(tài)），ElementHightLightSelectState類（高亮選中狀態(tài)），ElementSelectState類（選中狀態(tài)）和構(gòu)建這些狀態(tài)的StateFactory類（工廠）

//ElementNormalState.ts 正常狀態(tài) import { ElementStatus } from "./ElementStatus"; import { StateFactory } from "./StateFactory"; export class ElementNormalState extends ElementStatus {public statusName: string;constructor() {super();this.statusName = "正常狀態(tài)";}public calculateState(eventName: string):ElementStatus {if (eventName == "mouseEnter") {return StateFactory.getElementStatus("ElementHightLightState");}throw new Error("現(xiàn)在是正常狀態(tài)，切換不了其他狀態(tài)");} }//ElementHightLightState.ts 高亮狀態(tài) import { ElementStatus } from "./ElementStatus"; import { StateFactory } from "./StateFactory"; export class ElementHightLightState extends ElementStatus {public statusName: string;constructor() {super();this.statusName = "高亮狀態(tài)";}public calculateState(eventName: string): ElementStatus {if (eventName == "mouseLeaver") {return StateFactory.getElementStatus("ElementNormalState");} else if (eventName == "mouseClick") {return StateFactory.getElementStatus("ElementHightLightSelectState");}throw new Error("現(xiàn)在是高亮狀態(tài)，切換不了其他狀態(tài)");} }//ElementHightLightSelectState.ts 高亮選中狀態(tài) import { ElementStatus } from "./ElementStatus"; import { StateFactory } from "./StateFactory"; export class ElementHightLightSelectState extends ElementStatus {public statusName: string;constructor() {super();this.statusName = "高亮選中狀態(tài)";}public calculateState(eventName: string): ElementStatus {if (eventName == "mouseLeaver") {return StateFactory.getElementStatus("ElementSelectState");} else if (eventName == "mouseClick") {return StateFactory.getElementStatus("ElementHightLightState");}throw new Error("現(xiàn)在是高亮選中狀態(tài)，切換不了其他狀態(tài)")} }//ElementSelectState.ts 選中狀態(tài) import { ElementStatus } from "./ElementStatus"; import { StateFactory } from "./StateFactory";export class ElementSelectState extends ElementStatus {public statusName: string;constructor() {super();this.statusName = "選中狀態(tài)";}public calculateState(eventName: string): ElementStatus {if (eventName == "mouseEnter") {return StateFactory.getElementStatus("ElementHightLightSelectState");}throw new Error("現(xiàn)在是選中狀態(tài)，切換不了其他狀態(tài)");} }//StateFactory.ts 工廠類 import { ElementHightLightSelectState } from "./ElementHightLightSelectState"; import { ElementHightLightState } from "./ElementHightLightState"; import { ElementNormalState } from "./ElementNormalState"; import { ElementSelectState } from "./ElementSelectState"; export class StateFactory {public static getElementStatus(statusName: string): Status.ElementStatus {switch (statusName) {case "ElementNormalState":return new ElementNormalState();case "ElementHightLightState":return new ElementHightLightState();case "ElementHightLightSelectState":return new ElementHightLightSelectState();case "ElementSelectState":return new ElementSelectState();default:return new ElementNormalState();}} }

3.創(chuàng)建ElementStatusContext類 管理這些狀態(tài)的類，設(shè)置默認(rèn)狀態(tài)是正常狀態(tài)

//ElementStatusContext.ts import { ElementNormalState } from "./ElementNormalState"; export class ElementStatusContext{public currentStatus: Status.ElementStatus;constructor() {this.currentStatus = new ElementNormalState();}public getStatus() {return this.currentStatus}public setStatus(status: Status.ElementStatus) {this.currentStatus = status;}public changeStatus(eventName: string): Status.ElementStatus {return this.currentStatus.calculateState(eventName);}}//Status.d.ts ts聲明文件 declare namespace Status {export type ElementStatus =import ("./ElementStatus").ElementStatus;export type ElementStatusContext =import ("./ElementStatusContext").ElementStatusContext;}

4.最后IndexController 通過(guò)事件綁定好這些狀態(tài)并顯示在UI界面上

//Index.controller.ts import angular from "angular"; import { ElementStatusContext } from "./ElementStatusContext"; export class IndexController implements angular.IController {public static ElementStatusContext: Status.ElementStatusContext;public statusName: string;constructor() {IndexController.ElementStatusContext = new ElementStatusContext();this.statusName = IndexController.ElementStatusContext.getStatus().statusName;}//鼠標(biāo)進(jìn)入事件public mouseEnterEvent(): void {let status = this.calAndSetStatus(IndexController.ElementStatusContext, "mouseEnter");this.statusName = status.statusName}//鼠標(biāo)離開事件public mouseLeaveEvent(): void {let status = this.calAndSetStatus(IndexController.ElementStatusContext, "mouseLeaver");this.statusName = status.statusName}//colorElement點(diǎn)擊事件public colorElementClickEvent(): void {let status = this.calAndSetStatus(IndexController.ElementStatusContext, "mouseClick");this.statusName = status.statusName}//計(jì)算并設(shè)置狀態(tài)private calAndSetStatus(StatusContext: Status.ElementStatusContext, eventName: string) {let status = StatusContext.changeStatus(eventName);StatusContext.setStatus(status);return status;} }

下面是 index.html ui界面

<!DOCTYPE html> <html lang="en" ng-app="myApp"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <style>.element {width: 200px;height: 200px;border: 5px solid #ccc;margin: 0 auto;line-height: 200px;text-align: center;font-size: 20px;}.hight-light {background-color: greenyellow;}.select {border-color: green;}.hight-light-select {background-color: greenyellow;border-color: green;} </style><body ng-controller="IndexController as vm"><div class="element" ng-mouseenter="vm.mouseEnterEvent()" ng-mouseleave="vm.mouseLeaveEvent()"ng-click="vm.colorElementClickEvent()" ng-class="{'hight-light':vm.statusName=='高亮狀態(tài)','select':vm.statusName=='選中狀態(tài)','hight-light-select':vm.statusName=='高亮選中狀態(tài)'}">{{vm.statusName}}</div> </body> </html>

最后看下效果圖：

總結(jié)優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

結(jié)構(gòu)清晰，狀態(tài)模式將與特定狀態(tài)相關(guān)的行為局部化到一個(gè)狀態(tài)中，并且將不同狀態(tài)的行為分割開來(lái)，滿足“單一職責(zé)原則”。

將狀態(tài)轉(zhuǎn)換顯示化，減少對(duì)象間的相互依賴。將不同的狀態(tài)引入獨(dú)立的對(duì)象中會(huì)使得狀態(tài)轉(zhuǎn)換變得更加明確，且減少對(duì)象間的相互依賴。

狀態(tài)類職責(zé)明確，有利于程序的擴(kuò)展。通過(guò)定義新的子類很容易地增加新的狀態(tài)和轉(zhuǎn)換。

缺點(diǎn)：

狀態(tài)模式的使用必然會(huì)增加系統(tǒng)的類與對(duì)象的個(gè)數(shù)。

狀態(tài)模式的結(jié)構(gòu)與實(shí)現(xiàn)都較為復(fù)雜，如果使用不當(dāng)會(huì)導(dǎo)致程序結(jié)構(gòu)和代碼的混亂。

狀態(tài)模式對(duì)開閉原則的支持并不太好，對(duì)于可以切換狀態(tài)的狀態(tài)模式，增加新的狀態(tài)類需要修改那些負(fù)責(zé)狀態(tài)轉(zhuǎn)換的源碼，否則無(wú)法切換到新增狀態(tài)，而且修改某個(gè)狀態(tài)類的行為也需要修改對(duì)應(yīng)類的源碼。

總結(jié)

以上是生活随笔為你收集整理的设计模式之----状态模式（State-pattern）的理解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。