js 设计模式——状态模式

故事扮演 提交于 2019-11-28 09:52:21

状态模式

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

简单的解释一下:

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

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

// 首先定义了一个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,如果你懵掉了,往下看:

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

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

  1. 我们可以在 Music(音乐类) 中清楚的知道一共有多少个状态,同时 Music(音乐类) 中不再进行任何实质性的操作,而是通过 this.currState.modeSwitch() 交给了当前持有的状态对象去执行
  2. 状态的切换规律被事先在每一个状态类中定义好了,在 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 )
  }
}

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


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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!