”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > JavaScript 设计模式 - 行为 - 状态

JavaScript 设计模式 - 行为 - 状态

发布于2024-08-20
浏览:392

JavaScript Design Patterns - Behavioral - State

状态模式允许对象在其内部状态改变时改变其行为。

在此示例中,我们使用 Order 类创建一个简单的状态模式,该类将使用 next() 方法更新状态。

const ORDER_STATUS = {
  waitingForPayment: 'Waiting for payment',
  shipping: 'Shipping',
  delivered: 'Delivered',
};

class OrderStatus {
  constructor(name, nextStatus) {
    this.name = name;
    this.nextStatus = nextStatus;
  }

  next() {
    return new this.nextStatus();
  }
}

class WaitingForPayment extends OrderStatus {
  constructor() {
    super(ORDER_STATUS.waitingForPayment, Shipping);
  }
}

class Shipping extends OrderStatus {
  constructor() {
    super(ORDER_STATUS.shipping, Delivered);
  }
}

class Delivered extends OrderStatus {
  constructor() {
    super(ORDER_STATUS.delivered, Delivered);
  }
}

class Order {
  constructor() {
    this.state = new WaitingForPayment();
  }

  next() {
    this.state = this.state.next();
  }
}

export { Order };

完整的例子在这里? https://stackblitz.com/edit/vitejs-vite-6zcfql?file=state.js

结论

当对象的行为取决于其状态,并且其行为在运行时根据该状态而变化时,请使用此模式。


希望您觉得它有帮助。感谢您的阅读。 ?

让我们联系吧!你可以在以下位置找到我:

  • 中: https://medium.com/@nhannguyendevjs/
  • 开发:https://dev.to/nhannguyendevjs/
  • Hashnode:https://nhannguyen.hashnode.dev/
  • Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
  • X(原 Twitter):https://twitter.com/nhannguyendevjs/
  • 请我喝杯咖啡: https://www.buymeacoffee.com/nhannguyendevjs
版本声明 本文转载于:https://dev.to/nhannguyendevjs/javascript-design-patterns-behavioral-state-3e9b?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • TypeScript 如何使 JavaScript 在大型项目中更加可靠。
    TypeScript 如何使 JavaScript 在大型项目中更加可靠。
    介绍 JavaScript 广泛应用于 Web 开发,现在也被应用于不同行业的大型项目中。然而,随着这些项目的增长,管理 JavaScript 代码变得更加困难。数据类型不匹配、运行时意外错误以及代码不清晰等问题可能会导致查找和修复错误变得困难。 这就是TypeScript介入的地...
    编程 发布于2024-11-05
  • 如何使用PHP的password_verify函数安全地验证用户密码?
    如何使用PHP的password_verify函数安全地验证用户密码?
    使用 PHP 解密加密密码许多应用程序使用密码哈希等加密算法安全地存储用户密码。然而,在验证登录尝试时,将输入密码与加密的存储版本进行比较非常重要。加密问题password_hash 使用 Bcrypt,一种一元加密算法方式哈希算法,意味着加密的密码无法逆转或解密。这是一项安全功能,可确保即使数据库...
    编程 发布于2024-11-05
  • 学习 Vue 部分 构建天气应用程序
    学习 Vue 部分 构建天气应用程序
    深入研究 Vue.js 就像在 DIY 工具包中发现了一个新的最喜欢的工具——直观、灵活,而且功能强大得惊人。我接触 Vue 的第一个副业项目是一个天气应用程序,它教会了我很多关于框架功能以及一般 Web 开发的知识。这是我到目前为止所学到的。 1. Vue 入门:简单与强大 Vue...
    编程 发布于2024-11-05
  • NFT 预览卡组件
    NFT 预览卡组件
    ?刚刚完成了我的最新项目:使用 HTML 和 CSS 的“NFT 预览卡组件”! ?查看并探索 GitHub 上的代码。欢迎反馈! ? GitHub:[https://github.com/khanimran17/NFT-preview-card-component] ?现场演示:[https://...
    编程 发布于2024-11-05
  • Android 应用程序如何连接到 Microsoft SQL Server 2008?
    Android 应用程序如何连接到 Microsoft SQL Server 2008?
    将 Android 应用程序连接到 Microsoft SQL Server 2008Android 应用程序可以无缝连接到中央数据库服务器,包括 Microsoft SQL Server 2008。这种连接允许开发人员从其移动应用程序访问和管理存储在远程服务器上的数据。连接方法虽然提供的示例代码侧...
    编程 发布于2024-11-05
  • 以下是一些基于问题的标题选项,重点关注核心问题:

* C++ std::可选:为什么没有对引用类型进行专门化? (直接、切题)
* C++ std::option 中的引用类型
    以下是一些基于问题的标题选项,重点关注核心问题: * C++ std::可选:为什么没有对引用类型进行专门化? (直接、切题) * C++ std::option 中的引用类型
    C 中的可选:为什么没有对引用类型进行专门化?尽管在像 Boost 这样的库中存在对引用类型的专门化,C标准库的 std::Optional 不提供这样的功能。这一决定引发了对其理由和潜在替代机制的询问。遗漏背后的理由在讨论 n3406(可选提案)期间,有人提出了担忧关于包含可选参考文献。认识到这些...
    编程 发布于2024-11-05
  • 评估机器学习分类模型
    评估机器学习分类模型
    大纲 模型评估的目标是什么? 模型评估的目的是什么,有哪些 常见的评估程序? 分类准确率有什么用,它的作用是什么 限制? 混淆矩阵如何描述一个 分类器? 可以从混淆矩阵计算哪些指标? T模型评估的目标是回答问题; 不同型号如何选择? 评估机器学习的过程有助于...
    编程 发布于2024-11-05
  • 如何消除 Eval-Base64_Decode PHP 病毒并保护您的网站?
    如何消除 Eval-Base64_Decode PHP 病毒并保护您的网站?
    如何像 PHP 病毒文件一样删除 Eval-Base64_Decode采用 eval-base64_decode 技术的病毒,例如您的病毒已经描述过,可能会很麻烦。我们将帮助您了解该病毒的性质及其潜在漏洞,并提供有关如何消除该病毒的全面指南。了解病毒此特定病毒用 eval-base64_decode...
    编程 发布于2024-11-05
  • 如何在 Serp 中排名 4
    如何在 Serp 中排名 4
    搜索引擎排名页面 (SERP) 是网站争夺可见性和流量的地方。到 2024 年,在 Google 和其他搜索引擎上的高排名仍然对在线成功至关重要。然而,SEO(搜索引擎优化)多年来已经发生了变化,并将继续发展。如果您想知道如何在 2024 年提高 SERP 排名,这里有一个简单的指南可以帮助您了解最...
    编程 发布于2024-11-05
  • 如何使用多处理在 Python 进程之间共享锁
    如何使用多处理在 Python 进程之间共享锁
    在 Python 中的进程之间共享锁当尝试使用 pool.map() 来定位具有多个参数(包括 Lock() 对象)的函数时,它是对于解决子进程之间共享锁的问题至关重要。由于 pickling 限制,传统的 multiprocessing.Lock() 无法直接传递给 Pool 方法。选项 1:使用...
    编程 发布于2024-11-05
  • Type Script 中 readonly 和 const 的区别
    Type Script 中 readonly 和 const 的区别
    这两个功能的相似之处在于它们都是不可分配的。 能具体解释一下吗? 在这篇文章中,我将分享它们之间的区别。 const 防止重新分配给变量。 在这种情况下,hisName 是一个不能重新分配的变量。 const hisName = 'Michael Scofield' hisName ...
    编程 发布于2024-11-05
  • 如何使用 Range 函数在 Python 中复制 C/C++ 循环语法?
    如何使用 Range 函数在 Python 中复制 C/C++ 循环语法?
    Python 中的 for 循环:扩展 C/C 循环语法在编程中,for 循环是迭代序列的基本结构。虽然 C/C 采用特定的循环初始化语法,但 Python 提供了更简洁的方法。不过,Python 中有一种模仿 C/C 循环风格的方法。实现循环操作:for (int k = 1; k <= c...
    编程 发布于2024-11-05
  • TechEazy Consulting 推出全面的 Java、Spring Boot 和 AWS 培训计划并提供免费实习机会
    TechEazy Consulting 推出全面的 Java、Spring Boot 和 AWS 培训计划并提供免费实习机会
    TechEazy Consulting 很高兴地宣布推出我们的综合培训计划,专为希望转向后端开发使用Java、Spring Boot的初学者、新手和专业人士而设计,以及 AWS。 此4个月的带薪培训计划之后是2个月的无薪实习,您可以在实际项目中应用您的新技能——无需任何额外的培训费用。对于那些希望填...
    编程 发布于2024-11-05
  • Polyfills——填充物还是缝隙? (第 1 部分)
    Polyfills——填充物还是缝隙? (第 1 部分)
    几天前,我们在组织的 Teams 聊天中收到一条优先消息,内容如下:发现安全漏洞 - 检测到 Polyfill JavaScript - HIGH。 举个例子,我在一家大型银行公司工作,你必须知道,银行和安全漏洞就像主要的敌人。因此,我们开始深入研究这个问题,并在几个小时内解决了这个问题,我将在下面...
    编程 发布于2024-11-05
  • 移位运算符和按位简写赋值
    移位运算符和按位简写赋值
    1。移位运算符 :向右移动。 >>>:无符号右移(零填充)。 2.移位运算符的一般语法 value > num-bits:将值位向右移动,保留符号位。 value >>> num-bits:通过在左侧插入零将值位向右移动。 3.左移 每次左移都会导致该值的所有位向左移动一位。 右侧插入0位。 效果:...
    编程 发布于2024-11-05

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3