JavaScript设计模式之状态模式

最新推荐文章于 2023-12-24 10:00:00 发布
最新推荐文章于 2023-12-24 10:00:00 发布
阅读量439 收藏
点赞数
分类专栏： 前端开发 javaScript设计模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yexudengzhidao/article/details/89930188
版权

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

介绍：

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

示例：

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

UML类图：

在这里插入图片描述

场景：

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

有限状态机：

在这里插入图片描述

在这里插入图片描述

写一个简单的promise

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

. . . . .

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

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

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

打赏作者

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

抵扣说明：

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

余额充值