文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何用状态模式优化你的 JavaScript 代码

2024-12-01 16:03

关注

网上很多文章在解释状态模式时,都过于理论化,难以理解。这里我尝试用一个实际案例用通俗易懂的方式来解释。

01、打开/关闭灯​

让我们想象一个场景,其中有一盏灯只有一个开关。

我们可以发现一个特点:同一个开关按钮在不同的状态下会有不同的行为。

现在让我们编写一段代码来模拟灯光,并打开和关闭灯光,如何编写代码?

一个简单的实现:

class Light{
constructor() {
this.state = 'off'
}


clickButton() {
if (this.state === 'off') {
console.log('turn on the light')
this.state = 'on'
} else if (this.state === 'on') {
console.log('turn off the light')
this.state = 'off'
}
}
}

用法:

02、多态

在上面的场景中,灯只有两种状态,所以代码写起来比较简单。

但我们需要知道,在现实生活中,很多物体都有两种以上的状态,一旦一个对象有更多的状态,它就会更麻烦。

例如,有些手电筒具有三种状态:

第一次按下开关打开弱光,第二次按下打开强光,第三次按下关闭灯。

现在让我们模拟这样的行为,我们应该如何写代码?

03、正常解决方案

正常的解决方案是扩展前面的代码,在clickButton方法中进行一些额外的状态判断和状态切换。

class Light{
constructor() {
this.state = 'off'
}


clickButton() {
if (this.state === 'off') {
console.log('Turn on the low light')
this.state = 'lowLight'
} else if (this.state === 'lowLight') {
console.log('Switch to the strong light')
this.state = 'strongLight'
} else if (this.state === 'strongLight') {
console.log('turn off the light')
this.state = 'off'
}
}
}



虽然这样的代码可以满足要求,但它有很多缺点。

04、分析

让我们回想一下,我们的代码使用 Light 作为一个单独的对象,然后它具有三种状态。然后我们需要让它在不同的状态之间切换,我们将不同的状态视为光的内部属性。

但实际上,我们可以打破惯性思维,将每一个状态都视为一个独立的存在,封装成一个单独的类。

比如这里的灯有三种状态:

不同状态的灯有自己的行为特征。

LowLightState 的clickButton 方法将状态切换为StrongLightState,StrongLightState 的clickButton 将状态切换为OffState。

而我们的Light只需要关注它处于什么状态,不需要处理状态切换,状态切换由每个状态自己处理。

这是完整的代码:

class OffLightState{
constructor(light) {
this.light = light
}


clickButton() {
console.log('Turn on the low light')
this.light.setState(this.light.lowLightState)
}
}


class LowLightState {
constructor(light) {
this.light = light
}


clickButton() {
console.log('Switch to the strong light')
this.light.setState(this.light.strongLightState)
}
}


class StrongLightState {
constructor(light) {
this.light = light
}


clickButton() {
console.log('turn off the light')
this.light.setState(this.light.offLightState)
}
}




class Light{
constructor() {
this.offLightState = new OffLightState(this);
this.lowLightState = new LowLightState(this);
this.strongLightState = new StrongLightState(this);
this.currentState = this.offLightState
}


setState(newState) {
this.currentState = newState
}


clickButton() {
this.currentState.clickButton()
}
}


let light = new Light()


light.clickButton()
light.clickButton()
light.clickButton()

图中解释:

这样的代码可以解决前面提到的问题:

轻物体更简单。它只需要调用this.currentState.clickButton(),状态切换可以由状态对象自己处理。

如果将来有新的状态,我们只需要创建一个新的状态类,然后修改其相邻的状态类,而不需要对现有代码进行大量修改。

这种编写代码的技术就是状态模式。

05、状态模式

状态模式的正式定义:

状态模式是一种行为软件设计模式,它允许对象在其内部状态发生变化时改变其行为。这种模式接近于有限状态机的概念。状态模式可以解释为策略模式,它能够通过调用模式接口中定义的方法来切换策略。​

简单来说,如果你的对象有多个状态,并且不同状态的对象表现不同,那么你可以考虑使用状态模式。

状态模式有时会增加代码行数,但代码的质量并不取决于代码行数。使用状态模式通常可以使您的对象的逻辑更加简洁。

总结

以上就是我今天与你分享的关于在JavaScript中使用状态模式简化对象的全部内容,希望这些内容对你有帮助,如果你觉得我今天的内容有用的话,请将它分享给你身边的朋友,也许能够帮助到他。

来源:前端之窗内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯