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

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

前言

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


正文

什么是命令模式

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

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


命令模式的实现

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

640.png

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


javascript中的命令模式

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

640.png

宏命令

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

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


小结

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

目录
相关文章
|
1月前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
31 3
|
2月前
|
设计模式 存储 算法
Java设计模式-命令模式(16)
Java设计模式-命令模式(16)
|
3月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
51 1
|
3月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
3月前
|
设计模式 存储 Java
【十二】设计模式~~~行为型模式~~~命令模式(Java)
文章详细介绍了命令模式(Command Pattern),这是一种对象行为型模式,用于将请求封装成对象,实现请求发送者与接收者的解耦,从而降低系统耦合度、提高灵活性,并支持命令的排队、记录、撤销和恢复操作。通过案例分析、结构图、时序图和代码示例,文章展示了命令模式的组成部分、实现方式和应用场景,并讨论了其优点、缺点和适用情况。
|
4月前
|
设计模式 JavaScript Go
js设计模式【详解】—— 状态模式
js设计模式【详解】—— 状态模式
80 7
|
4月前
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
71 6
|
4月前
|
设计模式 JavaScript
js设计模式【详解】—— 原型模式
js设计模式【详解】—— 原型模式
50 6
|
4月前
|
设计模式 JavaScript 算法
js设计模式【详解】—— 模板方法模式
js设计模式【详解】—— 模板方法模式
48 6
|
4月前
|
设计模式 JavaScript 前端开发
JavaScript进阶 - JavaScript设计模式
【7月更文挑战第7天】在软件工程中,设计模式是解决常见问题的标准解决方案。JavaScript中的工厂模式用于对象创建,但过度使用可能导致抽象过度和缺乏灵活性。单例模式确保唯一实例,但应注意避免全局状态和过度使用。观察者模式实现了一对多依赖,需警惕性能影响和循环依赖。通过理解模式的优缺点,能提升代码质量。例如,工厂模式通过`createShape`函数动态创建对象;单例模式用闭包保证唯一实例;观察者模式让主题对象通知多个观察者。设计模式的恰当运用能增强代码可维护性。
81 0