Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JavaScript设计模式之状态模式

JavaScript设计模式之状态模式

作者头像
w候人兮猗
发布于 2020-07-01 09:11:01
发布于 2020-07-01 09:11:01
41900
代码可运行
举报
运行总次数:0
代码可运行

Contents

介绍

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

实例

  • 交通信号灯不同颜色的变化

UML类图

代码演示

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    class State {
        constructor(color) {
            this.color = color
        }

        handle(context) {
            console.log('当前是' + this.color + '灯')
            context.setState(this)
        }
    }
    class Context{
        constructor() {
            this.state= null
        }
        getState(){
            return this.state
        }
        setState(state){
            this.state = state
        }

    }

    //test
    let context = new Context()
    let g = new State('g')
    let y = new State('y')
    let r = new State('r')

    //绿亮
    g.handle(context)
    context.getState()
    //黄亮
    y.handle()
    context.getState()
    //红亮
    r.handle()
    context.getState()

场景

  • 有限状态机
  • 简单的Promise
有限状态机制
  • 有限个状态,以及在这些状态之间的变化
  • 比如交通信号灯
  • javascript-state-machine
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 npm install javascript-state-machine --save
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    <script src="https://cdn.bootcss.com/javascript-state-machine/2.0.0/state-machine.min.js"></script>

    //初始化状态机模型
    let fsm = new StateMachine({
        init: '收藏',
        transactions: [
            {
                name: 'doStore',
                from: '收藏',
                to: '取消收藏'
            },
            {
                name: 'deleteStore',
                from: '取消收藏',
                to: '收藏'
            },
        ],
        methods: {
            //监听
            onDostore: function () {
                alert('收藏成功')
                updateText()
                //other ... ajax
            },
            onDeleteStore: function () {
                alert('取消收藏成功')
                updateText()
                //other ... ajax
            }
        }
    })

    let btn = document.getElementById('btn1')

    btn.onclick(function () {
        if(fsm.is('收藏')){
            fsm.doStore()
        }else{
            fsm.deleteStore()
        }
    })

    function updateText() {
        btn.innerText = fsm.state
    }
实现状态变化的Promise
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let fsm = new StateMachine({
        init: 'pending',
        transactions: [
            {
                name: 'resolve',
                from: 'pendinf',
                to: 'fullfilled'
            },
            {
                name: 'reject',
                from: 'pending',
                to: 'rejected'
            },
        ],
        methods: {
            //监听
            //state 当前状态机实例
            // data fsm.resolve(xxx) 传递的参数
            onResolve: function (state,data) {
                data.successList.forEach(fn=>fn())
            },
            onReject: function (state,data) {
                data.failList.forEach(fn=>fn())
            }
        }
    })

    class MyPromise{
        constructor(fn) {
            this.successList = []
            this.failList = []
            fn(()=>{
                //fsm状态机
                fsm.resolve(this)
            },()=>{
                fsm.reject(this)
            })
        }
        then(successFn,failFn){
            this.successList.push(successFn)
            this.failList.push(failFn)
        }

    }
代码

https://github.com/ahwgs/design-pattern-learning/tree/master/11.JavaScript%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B9%8B%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年1月19日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript与有限状态机
有限状态机(Finite-state machine)是一个非常有用的模型,可以模拟世界上大部分事物。 简单说,它有三个特征:   * 状态总数(state)是有限的。   * 任一时刻,只处在一
ruanyf
2018/04/12
1.1K0
JavaScript与有限状态机
设计模式学习笔记(二十)状态模式及其实现
状态模式(State Pattern)指允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类。
归思君
2023/10/16
9200
设计模式学习笔记(二十)状态模式及其实现
超轻量级有限状态机Mini-FSM
有限状态机(Finite State Machine,简称FSM),表示有限个状态以及在这些状态之间的转移和动作等行为的处理模型。在任何给定的时间点,有限状态机都处于某一特定状态,并且可以根据当前状态和输入条件,从当前状态转移到另一个状态。有限状态机相关的核心概念主要包括:
Yiwenwu
2024/05/18
1.1K0
超轻量级有限状态机Mini-FSM
设计模式手册之状态模式
内部的状态转化,导致了行为表现形式不同。 所以,用户在外面看起来,好像是修改了行为。
py3study
2020/01/03
2640
JavaScript设计模式之观察者模式
https://github.com/ahwgs/design-pattern-learning/tree/master/9.JavaScript%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B9%8B%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F
w候人兮猗
2020/07/01
6650
学习设计模式——状态模式
状态模式:(State Pattern)允许一个对象在其内部状态改变时改变它的行为。对象看起来似乎修改了它的类
玖柒的小窝
2021/11/06
9380
学习设计模式——状态模式
设计模式——状态模式
有限状态机(Finite-state machine, FSM),又称有限状态自动机,简称状态机,是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。
WEBJ2EE
2019/12/17
1.1K0
设计模式——状态模式
有限状态机模型
在阅读harbor源码时,在jobservice代码中,发现实现了一个有限状态机。状态管理在系统设计中常被使用。通过实现它,可以方便的对程序的状态进行管理。状态在现实生活中,有很多存在的例子。例如,灯有开,关两种状态,当然如果较真的话,中间还可以有多个亮度的状态。红绿灯,登录状态,程序的生命周期等等,这个太多了。
暮雨
2018/11/15
1.8K0
有限状态机模型
设计模式-状态机模式
有限状态机(英语:finite-state machine,缩写:FSM)又称有限状态自动机,简称状态机,是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。
简单的幸福
2020/05/08
4.2K0
设计模式-状态机模式
JavaScript设计模式--状态模式
解释: (1)将状态封装成独立的类,并将请求委托给当前的状态对象,当对象的内部状态发生改变时,会带来不同的行为变化。 (2)使用的对象,在不同的状态下具有截然不同的行为(委托效果)
奋飛
2019/08/15
5760
基于 Kotlin 特性开发的有限状态机
状态机是古老的计算机理论,在游戏开发、嵌入式开发、网络协议等领域,得到广泛地使用。
fengzhizi715
2020/02/25
1.5K0
基于 Kotlin 特性开发的有限状态机
【愚公系列】2023年08月 .NET CORE工具案例-XStateNet状态机
状态机是一种抽象的机器模型,用于描述事物在不同状态之间的转移过程。它由一组状态、一组事件和一组转移规则组成。在状态机中,每个状态代表一种特定的情况,每个事件触发一次状态转移,每个转移规则描述了一个状态到另一个状态的转移条件和动作。状态机可以描述许多系统的行为模型,例如计算机程序、网络协议和物理系统等。
愚公搬代码
2025/05/31
630
【愚公系列】2023年08月 .NET CORE工具案例-XStateNet状态机
有限状态机FSM的原理与GO的实现
有限状态机(Finite-state machine, 简写FSM)又可以称作有限状态自动机。它必须是可以附着在某种事物上的,且该事物的状态是有限的,通过某些触发事件,会让其状态发生转换。为此,有限状态机就是描述这些有限的状态和触发事件及转换行为的数学模型。 有限状态机组成 有限状态机有两个必要的特点,一是离散的,二是有限的。基于这两点,现实世界上绝大多数事物因为复杂的状态而无法用有限状态机表示。 而描述事物的有限状态机模型的元素由以下组成: 状态(State):事物的状态,包括初始状态和所有事件触发后的状
李海彬
2018/03/28
3.6K0
有限状态机FSM的原理与GO的实现
设计模式 | 行为型 | 状态模式
状态模式能在一个对象的内部状态变化时改变其行为,使其看上去就像改变了自身所属的类一样。
被水淹没
2023/02/25
2890
设计模式 | 行为型 | 状态模式
透过源码学习设计模式5—状态模式和Spring状态机
状态模式即允许一个对象在其内部状态改变时改变它的行为。对象看起来似乎修改了它的类,换句话说状态模式把所研究的对象的行为包装在不同的状态对象里,每一个状态对象都属于一个抽象状态类的一个子类。
java达人
2019/08/15
5.2K0
设计模式-状态模式
状态模式的特点是,对于有状态的对象,我们可以把复杂的“判断逻辑”提取到不同的状态对象中,允许内置的状态对象改变时影响它的行为。状态模式可以有效的减少if else 的分支结构;它将状态和行为绑定到一起,根据不同的状态来确定其行为。这样做的好处是将不同的状态引入独立的对象中会使得状态转换变得更加明确,且减少对象间的相互依赖。但是状态模式的结构与实现都较为复杂,如果使用不当会导致程序结构和代码的混乱。
六个核弹
2022/12/23
6720
关于状态机的技术选型,最后一个真心好!
今天想跟大家分享一个关于“状态机”的话题。状态属性在我们的现实生活中无处不在。比如电商场景会有一系列的订单状态(待支付、待发货、已发货、超时、关闭);员工提交请假申请会有申请状态(已申请、审核中、审核成功、审核拒绝、结束);差旅报销单会有单据审核状态(已提交、审核中、审核成功、退回、打款中、打款成功、打款失败、结束)等等。
陶朱公Boy
2023/01/07
3.2K0
关于状态机的技术选型,最后一个真心好!
大中台模式下如何构建复杂业务核心状态机组件
由此可见,对于复杂状态的管理是一个业务依赖,需求多变的场景。在公司初创期,可以采用硬编码方式,对于每一个操作进行状态判断,每一步操作定制一套逻辑链路。随着业务的增加,定制化链路显然不优雅,大量流程代码无法维护,此时中台通用解决思路就尤为重要,有限状态机(Finite State Machine,缩写:FSM)开始在中台落地。
玄姐谈AGI
2019/11/07
2.8K0
大中台模式下如何构建复杂业务核心状态机组件
【地铁上的设计模式】--行为型模式:状态模式
状态模式是一种行为模式,它允许对象在其内部状态发生改变时改变其行为。在状态模式中,将状态定义为独立的对象,并将对象在不同状态下的行为委托给具有相应行为的状态对象。当对象的状态发生变化时,它将使用不同的状态对象来执行不同的操作,从而使其行为随着状态的改变而改变。 状态模式可以帮助我们更好地管理复杂的状态和转换,从而使代码更加清晰和易于维护。它还能够使我们更加灵活地添加和删除状态,而不会对其他部分产生影响。但是,状态模式也有一些缺点。首先,它可能导致类的数量增加,从而使代码变得复杂。此外,在状态转换比较复杂的情况下,实现起来可能会比较困难。因此,在使用状态模式时需要权衡利弊,根据具体情况进行选择。
喵叔
2023/05/13
3500
设计模式-状态模式
晚上睡觉前,需要关灯睡觉。一关一开,类似状态模式的,而开关主要是用来切换所需要的状态,由于不同的状态产生不同的结果。
逍遥壮士
2020/09/18
5770
设计模式-状态模式
相关推荐
JavaScript与有限状态机
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验