设计模式-状态模式

介绍

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

示例

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

UML类图

  • 传统UML类图
    传统UML类图

  • 简化后的UML类图
    简化后的UML类图

代码演示

// 状态(红灯、绿灯、黄灯)
class State {constructor(color) {this.color = color;}// 设置状态handle(context) {console.log(`turn to ${this.color} light`)context.setState(this)}
}// 主体
class Context {consructor() {this.state = null}// 获取状态getState() {return this.state}setState(state) {this.state = state}
}// test
let context = new Context()let green = new State('green')
let yellow = new State('yellow')
let red = new State('red')// 绿灯亮了
green.handle(context)
console.log(context.getState())

场景

有限状态机

  • 有限个状态、以及在这些状态之间的变化
  • 如交通信号灯
  • 使用开源lib:javascript-state-machine
  • github.com/jakesgordon/javascript-state-machine

有限状态机- “收藏”和“取消”

// 状态机模型
var fsm = new StateMachine({init: '收藏', // 初始状态,待收藏transitions: [{name: 'doStore',from: '收藏',to: '取消收藏'},{name: 'deleteStore',from: '取消收藏',to: '收藏'}],methods: {// 执行收藏onDoStore: function () {alert('收藏成功')updateText()},// 取消收藏onDeleteStore: function () {alert('已取消收藏')updateText()}}
})var $btn = $('#btn')// 点击事件
$btn.click(function() {if (fsm.is('收藏')) {fsm.doStore()} else {fsm.deleteStore()}
})// 更新文案
function updateText() {$btn.text(fsm.state)
}// 初始化文案
updateText()

写一个简单的Promise

  • 回顾Promise的语法
function loadImg(src) {const promise = new Promise(function (resolve, reject) {var img = document.createElement('img');img.onload = function() {resolve(img)}img.onerror = function() {reject()}img.src = src})return promise
}var src = '';
var result = loadImg(src)result.then(function(img){console.log('success 1')
}, function() {console.log('failed 1')
})
result.then(function(img) {console.log('success 2')
}, function() {console.log('failed 2')
})
  • 分析:Promise就是一个有限状态机

    • Promise三种状态:pending fullfilled rejected
    • pending -> fullfilled或者 pending -> rejected
    • 不能逆向变化
  • 写代码

// 模型
var fsm = new StateMachine({init: 'pending',transitions: [{name: 'resolve',from: 'pending',to: 'fullfilled'},{name: 'reject',from: 'pending',to: 'rejected'}],methods: {// 成功onResolve: function (state, data) {// 参数:state - 当前状态实例;data - fsm.resolve(xxx) 执行时传递过来的参数data.successList.forEach(fn => fn())},// 失败onReject: function (state, data) {// 参数: state - 当前状态实例;data - fsm.reject(xxx)   执行时传递过来的参数data.failList.forEach(fn => fn())}}
})// 定义Promise
class MyPromise {// fn 回调函数constructor(fn) {this.successList = []this.failList = []// 接收两个函数参数,第一个为resolve回调,第二个为reject回调fn(() => {// resolve 函数 fsm.resolve(this) // fsm触发onResolve函数}, () => {// reject 函数fsm.reject(this) // fsm触发onResolve函数})}// then函数,successFn failFn 不会立即执行,放进数组里then(successFn, failFn) {this.successList.push(successFn)this.failList.push(failFn)}
}// 测试代码
function loadImg(src) {const promise = new MyPromise(function (resolve, reject) {let img = document.createElement('img')img.onload = function() {resolve(img)}img.onerror = function() {reject()}img.src = src})return promise
}let src = 'https://imgxxx';
let result = loadImg(src)result.then(function() {console.log('ok1')
}, function() {console.log('fail1')
})result.then(function() {console.log('ok2')
}, function() {console.log('fail2')
})

设计原则验证

  • 将状态对象和主题对象分离,状态的变化逻辑单独处理
  • 符合开放封闭原则

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/102760.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件工程概论

文章目录 软件的定义软件的特点软件的种类软件工程的起源软件工程的三个阶段软件工程概念的提出软件开发的本质软件工程框架软件工程的目标软件工程的原则软件工程的活动 软件的定义 计算机系统中的程序及其文档。 程序是计算任务的处理对象和处理规则的描述; 文档…

SQL基本语法用例大全

文章目录 SQL语法概述简单查询计算列查询条件查询范围查询使用逻辑运算符过滤数据使用IN操作符过滤数据格式化结果集模糊查询行数据过滤数据排序数据统计分析分组总计简单子查询多行子查询多表链接插入数据更新和删除数据使用视图数据库管理数据表管理 SQL语法概述 SQL(Struct…

腾讯云优惠券种类、领取方法及使用教程分享

腾讯云是国内领先的云计算服务提供商,为用户提供丰富的云计算产品和服务。为了吸引更多用户使用腾讯云的产品和服务,腾讯云会定期推出各种优惠券活动。本文将为大家介绍腾讯云优惠券的种类、领取方法及使用教程。 一、腾讯云优惠券种类介绍 腾讯云优惠券…

Ubuntu的中文乱码问题

一、Ubuntu的中文乱码问题 sudo apt-get install language-pack-zh-hans 二、修改/etc/environment(在文件的末尾追加): LANG"zh_CN.UTF-8" LANGUAGE"zh_CN:zh:en_US:en" 三、修改/var/lib/locales/supported.d/loca…

“.NET视频总结:认识框架的结构和组件,掌握开发工具的奥妙“

目录 第一单元:二十一世纪程序执行 背景: 总结: 第二单元:对象导向与类别设计 背景: 总结: 第三单元:使用类别与基底类别库 背景: 总结: 第四单元:Windows开发程序 背景: 总结: 第五单元:防护式程序设计 背景: 总结…

SXSSFWorkbook-MinIo-大数据-流式导出

文章目录 前言业务现状架构思路技术细节生成摘要IDSXSSFWorkbookMinIomybatis 流查询PipedInputStream 保存到minio 总结 前言 由于业务涉及到数据比较大,用户对导出功能使用频繁,每次导出数据两10万以上。 为了减少数据库压力,及应用服务器…

代理IP端口是什么意思呢?

今天,咱们来聊聊一个小众但很有料的话题——代理IP端口,它可是你纵横互联网世界的好搭子哦! 首先,我们得先弄明白,代理IP端口是个啥? 代理IP端口就像是通往网络世界的门票,是你和代理服务器之间的桥梁。…

API接口安全运营研究(内附官方开发平台api接口接入方式)

摘 要 根据当前API技术发展的趋势,从实际应用中发生的安全事件出发,分析并讨论相关API安全运营问题。从风险角度阐述了API接口安全存在的问题,探讨了API检测技术在安全运营中起到的作用,同时针对API安全运营实践,提出…

关于系统/网络运维面试经验总结

一. 熟悉Linux命令 1. 最最最常问到的是 如何查看系统内存占用情况? ① free命令:free [-h][-m] 显示系统的内存使用情况,包括总内存、已使用内存、空闲内存等信息。其中,-m选项是以MB为单位来展示内存使用信息;-h选…

Ubuntu-Ports更新源 ARM64更新源

Ubuntu-Ports更新源 Ubuntu ARM64更新源 简介: Arm64,Armhf等平台的Ubuntu软件仓库。 Ubuntu-Ports国内镜像源 华为镜像Ubuntu-Ports 阿里云镜像Ubuntu-Ports 清华大学镜像Ubuntu-Ports 改用清华大学镜像更新源 Ubuntu 的软件源配置文件是 /etc/ap…

办公室人人在用的iTab桌面真的好用吗?

本人坐标北京,在一家中型互联网公司当社畜多年。最近发现一个奇怪的现象,我工位前后左右的同事都跟我在用一样的浏览器桌面——iTab新标签页。我表示莫非真的英雄所见略同? 我是去年1月份在刷B站时偶然刷到一条评论,有人分享自己…

日语学习网站web项目

支持日语五十音,平片假名、罗马音、词义转换、百度翻译功能,方便日语初学者学习日语发音 介绍 采用vitevue3ts技术栈开发, pinia管理全局化。主要是为了日语入门学习五十音, 以及日语句子罗马 发音对照练习。 参考以下两个项目完成 https://github.com/hexenq/kuroshiro ht…

【算法作业记录】

插入排序 递归实现 直接插入 #将a[n]插入有序区间a[0,n-1]中 时间复杂度 O(n) def Insert(a,n):inwhile(i>0 and a[i-1]>a[i]):tmpa[i]a[i]a[i-1]a[i-1]tmpi-1return #直接插入排序 def Insertsort(a,n):for i in range(1,n):#【1,n-…

AM@数列极限

文章目录 abstract极限👺极限的主要问题 数列极限数列极限的定义 ( ϵ − N ) (\epsilon-N) (ϵ−N)语言描述极限表达式成立的证明极限发散证明常用数列极限数列极限的几何意义例 函数的极限 abstract 数列极限 极限👺 极限分为数列的极限和函数的极限…

卫星/RedCap/高算力/解决方案/创新金奖……移远通信为IOTE 2023再添新活力

9月20日,IOTE 2023第二十届国际物联网展深圳场震撼来袭。 作为IOTE多年的“老朋友”,移远通信在参展当天,不仅有5G RedCap、卫星通信、高算力、车载等高性能产品及终端展出,还携智慧出行、智慧生活、智慧能源、工业互联网等多领域…

基于http的protobuf服务实现

本文介绍在http协议中&#xff0c;使用protobuf格式进行二进制数据通信。双方需设置http的header中ContentType为application/x-protobuf。 1、springboot下实现protobuf&#xff1a; 1&#xff09;pom.xml <dependency><groupId>org.springframework.boot</g…

SettingsView/设置页 的实现

1. 创建设置视图 SettingsView.swift import SwiftUI/// 设置页面 struct SettingsView: View {/// 环境变量&#xff0c;呈现方式&#xff1a;显示或者关闭Environment(\.presentationMode) var presentationMode/// 默认网址let defaultURL URL(string: "https://www.…

淘宝天猫商品历史价格API接口

获取淘宝商品历史价格接口的步骤如下&#xff1a; 注册淘宝开放平台&#xff1a;首先在淘宝开放平台上注册一个账号&#xff0c;并进行登录。创建应用&#xff1a;在淘宝开放平台上创建一个应用&#xff0c;并获取该应用的App Key和App Secret&#xff0c;用于后续的接口调用。…

外卖App点菜页-两个tableView联动【1】

这里新开一个项目 配置两个tableView的section和row以及ce 处理常见的tableView约束错误rowHeight 去掉滚动条 tableView的sectionHeaderxib初探 默认自带效果 不用这个 配置sectionHeader的内容 点击左侧tableViewCell使右边tableView 设置cell被选中后的样式及初始被选中ce…

Python爬虫提高排名

在如今竞争激烈的互联网时代&#xff0c;网站的SEO优化变得尤为重要。而Python爬虫作为一种强大的工具&#xff0c;可以帮助网站主们提升搜索排名&#xff0c;吸引更多的流量和用户。本文将为您揭秘如何利用Python爬虫来改善您的SEO优化&#xff0c;并帮助您提升搜索排名。无论…