你不知道的javascript设计模式(九) ---- 命令模式

简介: 你不知道的javascript设计模式(九) ---- 命令模式

前言

       上一章我们介绍了设计模式中的发布-订阅模式,通过分离发布者和订阅者之间的逻辑,来减少两者间的耦合性,以应用于异步等场景。今天我们要介绍的就是设计模式中的命令模式


正文

什么是命令模式

       什么是命令模式呢?比如你去餐厅点菜,服务员把点好的菜给厨师,你不用关心是哪位厨师或者厨师是怎么做的,你只需要点好菜,就会有做好的菜端过来给你吃,这就是命令模式的一种体现。

       命令模式是最简单以及最优雅的设计模式之一,命令模式最常见的应用场景是:有时候需要向某些对象发送请求,但是并不知道请求的接受者和具体操作,就像你不知道做菜的厨师和菜是怎么做的,你只是想吃这道菜,这时候就需要使用命令模式去降低命令者与执行者之间的耦合性


命令模式的实现

       和以前惯例一样,在实现之前我们先来看一个场景,假设一个很大的系统,需要定制几十个button,那我们就不好就每个button去直接绑定事件了,因为这样的话,这些button的事件可能就会不那么好维护,这里我们就可以考虑使用命令模式去实现了。因为目前来说我们还并不知道按钮接收者是谁,又要具体怎么做去实现到最后预期的一个目的

640.png

       这样我们就只需要定制对应的按钮命令传给命令者也就是setCommand函数就可以了


javascript中的命令模式

       之前我们已经说过很多次,javascript与传统语言的不同之处,javascript不需要基于类去实现相关的设计模式,函数是它的第一对象,基于相关高阶函数可以使得命令模式的实现更加优雅

640.png

宏命令

       宏命令指的是一组命令的集合,通过执行宏命令的方式,可以一次执行一批命令。举一个场景的例子,假设我们买了一个新的咖啡机,我们只需要按一下开关,它就会执行装入咖啡豆,磨碎咖啡豆,加入热水以及倒入牛奶的命令,我们用命令模式尝试实现一下。

       这样我们就封装好了,只需要把4个命令函数传入macroCommand,就可以执行宏命令,其实就是使用一个数组对象去存储宏对象中的对象,然后在执行的时候遍历执行即可


小结

       这一章我们介绍了命令模式,可能大家发现使用js实现命令模式是很简单的,的确是这样,使用js的高阶函数可以很轻松地实现命令模式,只需要把函数作为参数传入,再在执行函数中调用回调函数就可以了,可以说,命令模式是js的一种隐形模式。

目录
相关文章
|
9天前
|
设计模式 存储 算法
「全网最细 + 实战源码案例」设计模式——命令模式
命令模式(Command Pattern)是一种行为型设计模式,将请求封装成独立对象,从而解耦请求方与接收方。其核心结构包括:Command(命令接口)、ConcreteCommand(具体命令)、Receiver(接收者)和Invoker(调用者)。通过这种方式,命令的执行、撤销、排队等操作更易扩展和灵活。 适用场景: 1. 参数化对象以操作。 2. 操作放入队列或远程执行。 3. 实现回滚功能。 4. 解耦调用者与接收者。 优点: - 遵循单一职责和开闭原则。 - 支持命令组合和延迟执行。 - 可实现撤销、恢复功能。 缺点: - 增加复杂性和类数量。
48 14
「全网最细 + 实战源码案例」设计模式——命令模式
|
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
|
5月前
|
设计模式 存储 算法
Java设计模式-命令模式(16)
Java设计模式-命令模式(16)
|
6月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
92 1
|
6月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
6月前
|
设计模式 存储 Java
【十二】设计模式~~~行为型模式~~~命令模式(Java)
文章详细介绍了命令模式(Command Pattern),这是一种对象行为型模式,用于将请求封装成对象,实现请求发送者与接收者的解耦,从而降低系统耦合度、提高灵活性,并支持命令的排队、记录、撤销和恢复操作。通过案例分析、结构图、时序图和代码示例,文章展示了命令模式的组成部分、实现方式和应用场景,并讨论了其优点、缺点和适用情况。
|
7月前
|
设计模式 JavaScript Go
js设计模式【详解】—— 状态模式
js设计模式【详解】—— 状态模式
112 7
|
7月前
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
95 6

热门文章

最新文章