JavaScript设计模式之状态模式

最新推荐文章于 2025-01-08 13:14:49 发布
原创 最新推荐文章于 2025-01-08 13:14:49 发布 · 485 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客介绍了状态模式，其类的行为基于状态改变，属于行为型模式。对象状态变化会触发逻辑，不能总用if…else控制。还给出交通信号灯示例，提及UML类图、有限状态机，最后以Promise三种状态（pending、resolve、reject）为例，阐述简单Promise的编写。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在状态模式（State Pattern）中，类的行为是基于它的状态改变的。这种类型的设计模式属于行为型模式。

介绍：

  • 一个对象有状态变化
  • 每次状态变化都会触发一个逻辑
  • 不能总是用if…else来控制

示例：

交通信号灯不同颜色的变化导致的过马路的行为

UML类图：

在这里插入图片描述

场景：

  • 有限状态机
  • 写一个简单的Promise
    因为Promise其实就有三种状态：pending、resolve、reject

有限状态机：

在这里插入图片描述

在这里插入图片描述

写一个简单的promise

在这里插入图片描述
在这里插入图片描述

JavaScript 设计模式之状态模式：在游戏开发中的应用
数字魔方操控师的博客
04-27 1106
状态模式（State Pattern）是一种行为型设计模式，它允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。在状态模式中，每个状态都是一个独立的类，它们实现同一个接口或继承同一个抽象类，并且在各自的类中封装与该状态相关的行为。对象通过持有一个状态对象的引用，在运行时根据当前状态调用相应状态对象的方法，从而实现状态的切换和行为的改变。状态模式在游戏开发中具有重要的应用价值，它通过将对象的状态和行为分离，有效地解决了游戏中复杂状态管理的问题。
状态模式
?.?的专栏
05-31 321
状态模式 在状态模式（State Pattern）中，类的行为是基于它的状态改变的。这种类型的设计模式属于行为型模式。 在状态模式中，我们创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context 对象。 意图 允许对象在内部状态发生改变时改变它的行为，对象看起来好像修改了它的类。 主要解决 对象的行为依赖于它的状态（属性），并且可以根据它的状态改变而改变它的相关行为。 何时使用 代...
js之状态模式
linhongyong的博客
12-02 2075
状态模式level01:电灯程序<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var Light = function(){ this.state = 'off'; /
JS设计模式（状态模式）
qq_44144735的博客
10-29 631
JS设计模式（状态模式） 介绍 一个对象有状态变化 每次状态变化都会触发一个逻辑 不能总用 if…else 来控制 演示 UML类图 传统UML类图 简化后的UML类图 示例： 交通信号灯不同颜色的变化 // 状态 class State { constructor(color) { this.color = color } // 设置 handle(context) { console.log(`turn to ${this.colo
javascript设计模式之状态模式
qq_35504206的博客
01-20 183
状态模式：当一个对象内部的状态发生改变时，会导致其行为的改变， var state = function(){ var _currentState = {}; states = { jump: function(){ console.log('jump'); }, move:function(){ ...
js设计模式之状态模式
weixin_42733155的博客
04-19 582
一、简单介绍 状态模式的关键是区分事物内部的状态，事物内部状态的改变往往会带来事物的行为改变。 总的来说，状态模式就是封装状态，允许一个对象在其内部状态改变时改变它的行为，我们之前一般都是封装行为。 二、使用场景 在一些场景中，我们会定义一些状态，根据状态去执行不同的操作。比如，一个表单，初始状态有个编辑按钮，表单是只读的。点了编辑之后，表单变为可编辑，同时编辑按钮消失，出现了保存和取消按...
学习JavaScript设计模式之状态模式
10-23
状态模式是软件设计中的一种行为设计模式，主要用于...在学习和应用状态模式时，我们需要注意它与传统设计模式在实现方式上的差异，合理利用JavaScript的语言特性，使得状态模式能够更好地服务于我们的项目开发需求。
JavaScript设计模式.pdf
10-02
JavaScript设计模式.pdf JavaScript设计模式是指在软件开发中使用JavaScript语言编写的设计模式。这些设计模式旨在提高代码的重用性、可读性、维护性和扩展性。以下是JavaScript设计模式的知识点总结： 1. 单体...
javascript设计模式 – 状态模式原理与用法实例分析
11-20
本文实例讲述了javascript设计模式 – 状态模式原理与用法。分享给大家供大家参考，具体如下： 介绍：状态模式用于解决系统中复杂对象的状态转换以及不同状态下行为的封装问题。状态模式将一个对象的状态从该对象中...
JavaScript设计模式——状态模式
前端御书房
08-28 762
JavaScript设计模式，状态模式，持续更新中……
javascript 设计模式之状态模式
u011705725的博客
05-18 332
概念 状态模式：允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。 从电灯说起 需求： 实现一个开关功能的电灯 代码实现： class Light { constructor() { this.state = 'off' // 默认关灯 this.button = null } init() { const button = document.createElement('button') th
JavaScript-状态模式
qq_42372534的博客
06-27 406
状态模式 在状态模式（State Pattern）中，类的行为是基于它的状态改变的。这种类型的设计模式属于行为型模式。 在状态模式中，我们创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context 对象。 何时使用：代码中包含大量与对象状态有关的条件语句。 如何解决：将各种具体的状态类抽象出来。 // JavaScript版本的状态机 // Light相当于环境类 // currState保存状态对象 class Light { constructor() { this.cur
Javascript设计模式-18-状态模式
mjzhang1993的博客
08-21 1188
Javascript设计模式 - 18 - 状态模式简介 状态模式的关键是区分事物内部的状态，事物内部状态的改变往往会带来事物的行为改变 通常我们谈到封装，一般都会优先封装对象的行为，而不是对象的状态，但在状态模式中刚好相反，状态模式的关键是把事物的每种状态都封装成单独的类，跟此种状态有关的行为都被封装在这个类的内部，执行上下文中，请求直接委托给状态对象，该状态对象会负责渲染它自身的行
JS设计模式之状态模式
xu_ya_fei的专栏
06-09 464
JS设计模式之状态模式
（JS）状态模式
u014572617的博客
07-26 204
（JS）状态模式 每次状态变化都会触发逻辑 不能总是使用if…else判断 class State { constructor(color) { this.color = color; } handle() { console.log(`turn to ${this.color} light`); context.setState(this); } } class Context { constructor() { this.state = null; } getS
JS状态模式
ywy502的博客
03-09 317
状态模式 状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况。把状态的判断逻辑转移到表示不同状态的一系列类中，可以把复杂的判断逻辑简化。 例子:电灯状态的切换,按同一个键会依次出现弱光、强光、关灯。 // OffLightState： var OffLightState = function (light) { this.light = light; }; OffLight...
js状态模式
最新发布
qq_73270720的博客
01-08 549
状态模式将对象的状态封装成独立的类，并使它们可以互相转换。允许一个对象在其内部状态改变时改变它的行为。
js设计模式——状态模式
梦是太匆
04-17 441
状态模式是一种面向对象的设计模式，它允许一个对象在内部状态发生改变时改变它的行为。状态模式将状态和状态相关的行为封装在一个类中，并将对象的行为委托给它的状态对象，从而使对象的行为可以随着状态的改变而改变。状态模式的核心思想是将对象的行为与其状态分离，以便在运行时动态更改对象的行为。状态模式是一种非常有用的设计模式，它可以将状态和状态相关的行为封装到一个对象中，从而降低系统的复杂度，提高代码的可维护性和可扩展性。
JavaScript设计模式：状态模式实例详解
"深入理解JavaScript系列（43）：设计模式之状态模式详解"这一篇文章详细探讨了JavaScript中的状态模式，这是一种行为设计模式，主要用于解决对象在不同状态下表现出不同行为的问题。状态模式的核心理念是将对象的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

. . . . .

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值