成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS 狀態(tài)模式

xingqiba / 2941人閱讀

摘要：簡(jiǎn)介狀態(tài)模式允許一個(gè)對(duì)象在其內(nèi)部狀態(tài)改變的時(shí)候改變它的行為，對(duì)象看起來(lái)似乎修改了它的類。狀態(tài)通常為一個(gè)或多個(gè)枚舉常量的表示。簡(jiǎn)而言之，當(dāng)遇到很多同級(jí)或者的時(shí)候，可以使用狀態(tài)模式來(lái)進(jìn)行簡(jiǎn)化。

1. 簡(jiǎn)介

狀態(tài)模式(State)允許一個(gè)對(duì)象在其內(nèi)部狀態(tài)改變的時(shí)候改變它的行為，對(duì)象看起來(lái)似乎修改了它的類。
其實(shí)就是用一個(gè)對(duì)象或者數(shù)組記錄一組狀態(tài)，每個(gè)狀態(tài)對(duì)應(yīng)一個(gè)實(shí)現(xiàn)，實(shí)現(xiàn)的時(shí)候根據(jù)狀態(tài)挨個(gè)去運(yùn)行實(shí)現(xiàn)。

2. 實(shí)現(xiàn)

比如超級(jí)瑪麗，就可能同時(shí)有好幾個(gè)狀態(tài)比如 跳躍，移動(dòng)，射擊，蹲下 等，如果對(duì)這些動(dòng)作一個(gè)個(gè)進(jìn)行處理判斷，需要多個(gè)if-else或者switch不僅丑陋不說(shuō)，而且在遇到有組合動(dòng)作的時(shí)候，實(shí)現(xiàn)就會(huì)變的更為復(fù)雜，這里可以使用狀態(tài)模式來(lái)實(shí)現(xiàn)。

狀態(tài)模式的思路是：首先創(chuàng)建一個(gè)狀態(tài)對(duì)象或者數(shù)組，內(nèi)部保存狀態(tài)變量，然后內(nèi)部封裝好每種動(dòng)作對(duì)應(yīng)的狀態(tài)，然后狀態(tài)對(duì)象返回一個(gè)接口對(duì)象，它可以對(duì)內(nèi)部的狀態(tài)修改或者調(diào)用。

const SuperMarry = (function() {    
  let _currentState = [],        // 狀態(tài)數(shù)組
      states = {
        jump() {console.log("跳躍!")},
        move() {console.log("移動(dòng)!")},
        shoot() {console.log("射擊!")},
        squat() {console.log("蹲下!")}
      }
  
  const Action = {
    changeState(arr) {  // 更改當(dāng)前動(dòng)作
      _currentState = arr
      return this
    },
    goes() {
      console.log("觸發(fā)動(dòng)作")
      _currentState.forEach(T => states[T] && states[T]())
      return this
    }
  }
  
  return {
    change: Action.changeState,
    go: Action.goes
  }
})()

SuperMarry
    .change(["jump", "shoot"])
    .go()                    // 觸發(fā)動(dòng)作  跳躍!  射擊!
    .go()                    // 觸發(fā)動(dòng)作  跳躍!  射擊!
    .change(["squat"])
    .go()                    // 觸發(fā)動(dòng)作  蹲下!

這里可以使用ES6的class優(yōu)化一下：

class SuperMarry {
  constructor() {
    this._currentState = []
    this.states = {
      jump() {console.log("跳躍!")},
      move() {console.log("移動(dòng)!")},
      shoot() {console.log("射擊!")},
      squat() {console.log("蹲下!")}
    }
  }
  
  change(arr) {  // 更改當(dāng)前動(dòng)作
    this._currentState = arr
    return this
  }
  
  go() {
    console.log("觸發(fā)動(dòng)作")
    this._currentState.forEach(T => this.states[T] && this.states[T]())
    return this
  }
}

new SuperMarry()
    .change(["jump", "shoot"])
    .go()                    // 觸發(fā)動(dòng)作  跳躍!  射擊!
    .go()                    // 觸發(fā)動(dòng)作  跳躍!  射擊!
    .change(["squat"])
    .go()                    // 觸發(fā)動(dòng)作  蹲下!
3. 總結(jié)

狀態(tài)模式的使用場(chǎng)景也特別明確，有如下兩點(diǎn)：

一個(gè)對(duì)象的行為取決于它的狀態(tài)，并且它必須在運(yùn)行時(shí)刻根據(jù)狀態(tài)改變它的行為。

一個(gè)操作中含有大量的分支語(yǔ)句，而且這些分支語(yǔ)句依賴于該對(duì)象的狀態(tài)。狀態(tài)通常為一個(gè)或多個(gè)枚舉常量的表示。

簡(jiǎn)而言之，當(dāng)遇到很多同級(jí)if-else或者switch的時(shí)候，可以使用狀態(tài)模式來(lái)進(jìn)行簡(jiǎn)化。

本文是系列文章，可以相互參考印證，共同進(jìn)步~

JS 抽象工廠模式


JS 工廠模式


JS 建造者模式


JS 原型模式


JS 單例模式


JS 回調(diào)模式


JS 外觀模式


JS 適配器模式


JS 利用高階函數(shù)實(shí)現(xiàn)函數(shù)緩存(備忘模式)


JS 狀態(tài)模式


JS 橋接模式


JS 觀察者模式

網(wǎng)上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學(xué)習(xí)過(guò)程中的總結(jié)，如果發(fā)現(xiàn)錯(cuò)誤，歡迎留言指出~

參考：
《Javascript 設(shè)計(jì)模式》 - 張榮銘
設(shè)計(jì)模式之狀態(tài)模式

PS：歡迎大家關(guān)注我的公眾號(hào)【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長(zhǎng)按識(shí)別下面二維碼即可加我好友，備注加群，我拉你入群～

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92265.html

相關(guān)文章

  • 聽(tīng)飛狐聊JavaScript設(shè)計(jì)模式系列13

    摘要：介一回聊狀態(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)之中。 本回內(nèi)容介紹 上一回聊了聊組合模式（Composite），用組合模式模擬了個(gè)圖片庫(kù)，聊了遞歸。介一回聊狀態(tài)模式（State），官方描述允許一個(gè)對(duì)象在其內(nèi)部狀態(tài)改...

    linkin 評(píng)論0 收藏0

  • js策略模式vs狀態(tài)模式

    摘要：一策略模式定義把一些小的算法封裝起來(lái)使他們之間可以相互替換把代碼的實(shí)現(xiàn)和使用分離開(kāi)來(lái)利用策略模式實(shí)現(xiàn)小方塊緩動(dòng)代碼代碼動(dòng)畫(huà)已消耗時(shí)間原始位置目標(biāo)位置持續(xù)時(shí)間小球運(yùn)動(dòng)的時(shí)間要改變的屬性例如緩動(dòng)算法記錄開(kāi)始位置并設(shè)置定時(shí)器是否有要執(zhí)行的 一.策略模式 1.定義:把一些小的算法,封裝起來(lái),使他們之間可以相互替換(把代碼的實(shí)現(xiàn)和使用分離開(kāi)來(lái))2.利用策略模式實(shí)現(xiàn)小方塊緩動(dòng) html代碼: ...

    aaron 評(píng)論0 收藏0

  • js策略模式vs狀態(tài)模式

    摘要：一策略模式定義把一些小的算法封裝起來(lái)使他們之間可以相互替換把代碼的實(shí)現(xiàn)和使用分離開(kāi)來(lái)利用策略模式實(shí)現(xiàn)小方塊緩動(dòng)代碼代碼動(dòng)畫(huà)已消耗時(shí)間原始位置目標(biāo)位置持續(xù)時(shí)間小球運(yùn)動(dòng)的時(shí)間要改變的屬性例如緩動(dòng)算法記錄開(kāi)始位置并設(shè)置定時(shí)器是否有要執(zhí)行的 一.策略模式 1.定義:把一些小的算法,封裝起來(lái),使他們之間可以相互替換(把代碼的實(shí)現(xiàn)和使用分離開(kāi)來(lái))2.利用策略模式實(shí)現(xiàn)小方塊緩動(dòng) html代碼: ...

    mingde 評(píng)論0 收藏0

  • 設(shè)計(jì)模式---狀態(tài)模式在web前端中的應(yīng)用

    摘要：以上就是狀態(tài)模式在實(shí)際開(kāi)發(fā)中得應(yīng)用，我們結(jié)合了綜合應(yīng)用狀態(tài)模式。 在vue.js之類的mvvm的框架大行其道的當(dāng)下，開(kāi)發(fā)中最常見(jiàn)的場(chǎng)景就是通過(guò)改變數(shù)據(jù)來(lái)展示頁(yè)面或模塊的不同狀態(tài)，當(dāng)我們把mvvm玩的不亦樂(lè)乎的時(shí)候，有時(shí)也會(huì)停下了想想：在某些項(xiàng)目中不能用vuejs之類的框架時(shí)，我們?cè)趺赐ㄟ^(guò)改變數(shù)據(jù)來(lái)修改頁(yè)面或者模塊的狀態(tài)呢。嗯。說(shuō)到狀態(tài)，就想到了狀態(tài)模式 狀態(tài)模式: 在很多情況下，一個(gè)對(duì)...

    劉東 評(píng)論0 收藏0

  • 設(shè)計(jì)模式---狀態(tài)模式在web前端中的應(yīng)用

    摘要：以上就是狀態(tài)模式在實(shí)際開(kāi)發(fā)中得應(yīng)用，我們結(jié)合了綜合應(yīng)用狀態(tài)模式。 在vue.js之類的mvvm的框架大行其道的當(dāng)下，開(kāi)發(fā)中最常見(jiàn)的場(chǎng)景就是通過(guò)改變數(shù)據(jù)來(lái)展示頁(yè)面或模塊的不同狀態(tài)，當(dāng)我們把mvvm玩的不亦樂(lè)乎的時(shí)候，有時(shí)也會(huì)停下了想想：在某些項(xiàng)目中不能用vuejs之類的框架時(shí)，我們?cè)趺赐ㄟ^(guò)改變數(shù)據(jù)來(lái)修改頁(yè)面或者模塊的狀態(tài)呢。嗯。說(shuō)到狀態(tài)，就想到了狀態(tài)模式 狀態(tài)模式: 在很多情況下，一個(gè)對(duì)...

    silvertheo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<