状态模式

允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。

简单的解释一下：

第一部分的意思是将状态封装成独立的类，并将请求委托给当前的状态对象，当对象的内部状态改变时，会带来不同的行为变化。
第二部分是从客户的角度来看，我们使用的对象，在不同的状态下具有截然不同的行为，这个对象看起来是从不同的类中实例化而来的，实际上这是使用了委托的效果。

现在举一个网上比较多的例子，没错就是电灯的例子（不要烦，请耐心往下看）

// 首先定义了一个Light类

class Light {

  // 定义一个状态变量

  constructor(){

    this.state = 'off'

  }

  // 定义一个改变状态的方法

  change(){

    if(this.state === 'off'){

      console.log('开灯')

      this.state = 'on'

    } else {

      console.log('关灯')

      this.state = 'off'

    }

  }

}

// 创建实例

let light = new Light()

// 调用方法

light.change()

当当当当，到此我们已经编写了一个状态机，逻辑简单又缜密，看起来还有那么点无懈可击。BUT，你懂的事实并非如此，人生也没那么多的如意。随着人类的进步，需求也不（de）断（cuo）进（jin）步（chi）(●'◡'●)，于是新的电灯出现了，这电灯可厉害了，第一次点击弱光，再次点击强光，再点七彩光，再点emmm关了。

按我们上面的逻辑来写，那可就刺激了：

首先违反了开闭原则，每次改动都要更改change()方法，使得方法变得不稳定
状态切换的不明显，无法一目了然的明白一共有多少种状态
状态之间的切换关系，不过是往change()方法里添加if、else语句，是change()方法更加难阅读和维护

那怎么办呢？有首歌怎么唱来着“新的电灯已经出现，怎么能够停滞不前”，哈哈，所以状态模式来了~~~

因为电灯的例子太无聊了，所以我换了一个例子但是呢意思是一样滴：

  // 单曲循环类

  class SingleCycle{

    constructor(self){

      this._self = self

    }

    modeSwitch(){

      console.log('现在是单曲循环')

      this._self.setState( this._self.listCirculation )

    }

  }

  // 列表循环类

  class ListCirculation{

    constructor(self){

      this._self = self

    }

    modeSwitch(){

      console.log('现在是列表循环')

      this._self.setState( this._self.sequentialPlay )

    }

  }

  // 顺序播放类

  class SequentialPlay{

    constructor(self){

      this._self = self

    }

    modeSwitch(){

      console.log('现在是顺序播放')

      this._self.setState( this._self.shufflePlay )

    }

  }

  // 随机播放类

  class ShufflePlay{

    constructor(self){

      this._self = self

    }

    modeSwitch(){

      console.log('现在是随机播放')

      this._self.setState( this._self.singleCycle )

    }

  }

  // 音乐类

  class Music{

    constructor(){

      // 为每个状态都创建一个状态对象

      this.singleCycle = new SingleCycle(this)

      this.listCirculation = new ListCirculation(this)

      this.sequentialPlay = new SequentialPlay(this)

      this.shufflePlay = new ShufflePlay(this)

      // 定义初始状态为顺序播放

      this.currState = this.sequentialPlay

    }

    // 切换播放模式

    changeMode(){

      this.currState.modeSwitch()

    }

    // 下一次点击时的播放状态

    setState(newState){

      this.currState = newState;

    }

  }

  // 实例化音乐类

  let music = new Music()

  // 调用切换播放模式方法

  music.changeMode()

好了，到此我们改编完成，如果你没有懵掉，good，如果你懵掉了，往下看：

首先我们定义了4个状态类 SingleCycle（单曲循环） 、 ListCirculation（列表循环） 、 SequentialPlay（顺序播放） 、 ShufflePlay（随机播放）
每个状态类都定义了一个变量 _self 来接收 Music（音乐类） 传过来的 this，还有一个方法 modeSwitch（状态更改），用来改变下一次要播放的状态
然后定义了一个 Music（音乐类） ，首先在里面为每一个状态都创建了一个状态对象，还定义了一个变量 currState 来记录下一次点击时的状态。
最后就是Music（音乐类）里面定义的两种方法 changeMode（切换播放模式） 、 setState（下一次点击时的播放状态） 。当我们点击切换模式的时候，在 changeMode（切换播放模式） 中去调用之前定义好的状态类中的 modeSwitch（状态更改） 方法，完成模式切换的同时调用Music（音乐类）中的 setState（下一次点击时的播放状态） 方法来对状态进行改变，保证下一次点击时切换不同的模式。

通过上面的方法可以看出：

我们可以在 Music（音乐类） 中清楚的知道一共有多少个状态，同时 Music（音乐类） 中不再进行任何实质性的操作，而是通过 this.currState.modeSwitch() 交给了当前持有的状态对象去执行
状态的切换规律被事先在每一个状态类中定义好了，在 Music（音乐类） 中没有任何一个和状态切换相关的条件分支语句

悄悄地说，上面的方法还阔以再完美一点呦

小小的拓展

通过上面的介绍我们了解到了每一个状态类都有一个 modeSwitch() 方法，也就意味着我们每次添加状态类都要写一个方法，问题来了，人非圣贤，孰能无过？所以咧难免会丢掉的嘛！

然后做一些小小的优化：

// 定义一个State类

class State{

  constructor(self){

    this._self = self

  }

  modeSwitch(){

   throw new Error( '父类的 modeSwitch 方法必须被重写' )

  }

}

// 状态类（举一个为例）

// 单曲循环类（继承State类）

class SingleCycle extends State{

  modeSwitch(){

    console.log('现在是单曲循环')

    this._self.setState( this._self.listCirculation )

  }

}

好了完成，当某一天我们忘了写方法，也能够快速的定位到错误

目前对于状态模式的理解就这么多，以后有了新的理解会继续更新的，溜了溜了(～￣▽￣)～

巴特西

js 设计模式——状态模式

状态模式

小小的拓展

最新文章

热门文章