你不知道的javascript设计模式(十六)----状态模式

简介: 你不知道的javascript设计模式(十六)----状态模式

前言

       同学们,上一章我们介绍了装饰者模式,装饰者模式可以在不影响原类的情况下,给对象新增额外的功能,并且我们也尝试了使用AOP面向切面去拓展function的原型来实现装饰者模式。这一章,我们将进一步学习一种新的设计模式,状态模式。

正文

状态模式的定义

允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎改变了它的类

       通常对于一般的设计模式,我们的关注点集中在对象的行为上,而不是对象的状态上,而状态模式相反,状态模式是一种封装对象的状态的设计模式。状态模式的关键在于区分事物内部的状态,事物内部状态的改变往往会带来事物的行为改变。


状态模式的实现

       引入一个很常见的场景,比如我们需要拿代码实现一个电灯开关的场景,我相信大部分同学的想法一定是用一个标识量去标识这个状态,根据标识量的切换,来切换电灯的状态,但是这种写法隐藏着一个问题,如果这盏电灯不止有两个状态,比如像酒店里一些灯可能还有旋转一闪一闪的效果,这时候就体现出了状态模式的优势,我们封装所有的状态模式,再对电灯的状态切换进行维护就可以了

       这里我们为了方便后面的实现,不妨假设这盏灯有三种模式,强光,弱光和关闭,按之前说的我们先封装一下这三种状态的类型

       然后我们再封装一下飞机类即可,在飞机类中为每个状态都创建一个状态对象,至于每个状态所做的行为操作我们只要委托给对应的状态类即可

640.png

状态模式的优缺点

       从上面的例子我们不难发现状态模式的优点:

  • 状态模式定义了状态和行为之间的关系,并将它们封装在类里,我们可以更加简单地新建新的状态和行为,符合开放-封闭原则
  • 避免主类因状态过多而导致地过度膨胀,状态的定义被分散到状态类中,并且也避免了主类中出现大量条件语句的问题用对象代替字符串表现状态,使得状态的切换更加一目了然

       但是状态模式也有一个明显的缺点,它会定义很多额外的状态类,逻辑被分散在状态类中,系统中也会因此增加不少额外的对象

小结

今天我们学习了一种新的设计模式,状态模式,一般设计模式分离对象的行为,而状态模式不同,状态模式的关注点在于对象的状态,将对象的状态单独抽出维护,以避免主类的逻辑过于臃肿的情况

目录
相关文章
|
8天前
|
设计模式 Java Go
【再谈设计模式】状态模式~对象行为的状态驱动者
状态模式属于行为型设计模式。它将对象的行为封装在不同的状态类中,使得对象在不同的状态下表现出不同的行为。上下文(Context):这是一个包含状态对象的类,它定义了客户感兴趣的接口,并维护一个具体状态对象的引用。上下文将操作委托给当前的状态对象来处理。抽象状态(State):这是一个抽象类或者接口,它定义了一个特定状态下的行为接口。所有具体的状态类都实现这个接口。具体状态(Concrete State):这些是实现抽象状态接口的类,每个具体状态类实现了与该状态相关的行为。
45 18
|
1月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
90 33
|
3月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
57 2
|
4月前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
49 3
|
6月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
92 1
|
5月前
|
设计模式 Java 测试技术
Java设计模式-状态模式(18)
Java设计模式-状态模式(18)
|
6月前
|
设计模式 网络协议 Java
【十五】设计模式~~~行为型模式~~~状态模式(Java)
文章详细介绍了状态模式(State Pattern),这是一种对象行为型模式,用于处理对象在其内部状态改变时的行为变化。文中通过案例分析,如银行账户状态管理和屏幕放大镜工具,展示了状态模式的应用场景和设计方法。文章阐述了状态模式的动机、定义、结构、优点、缺点以及适用情况,并提供了Java代码实现和测试结果。状态模式通过将对象的状态和行为封装在独立的状态类中,提高了系统的可扩展性和可维护性。
【十五】设计模式~~~行为型模式~~~状态模式(Java)
|
6月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
7月前
|
设计模式 JavaScript Go
js设计模式【详解】—— 状态模式
js设计模式【详解】—— 状态模式
112 7
|
7月前
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
95 6

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    53
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62