全能指挥官:玩转JavaScript命令模式,让代码听你的话!

简介: 全能指挥官:玩转JavaScript命令模式,让代码听你的话!

全能指挥官:玩转JavaScript命令模式,让代码听你的话!

命令模式的含义

  • 命令模式指的是一个执行某些特定的指令。
  • 命令模式的示例 demo:
// 命令接口
class Command {
    execute() {}
}
// 具体命令:打开文档
class OpenDocumentCommand extends Command {
    constructor(document) {
        super();
        this.document = document;
    }
    // 执行打开文档命令
    execute() {
        this.document.open();
    }
}
// 具体命令:保存文档
class SaveDocumentCommand extends Command {
    constructor(document) {
        super();
        this.document = document;
    }
    // 执行保存文档命令
    execute() {
        this.document.save();
    }
}
// 接收者:文档
class Document {
    open() {
        console.log("打开文档");
    }
    save() {
        console.log("保存文档");
    }
}
// 调用者:按钮
class Button {
    constructor(command) {
        this.command = command;
    }
    // 点击按钮执行命令
    click() {
        this.command.execute();
    }
}
// 使用示例
const document = new Document();
// 创建打开文档命令并关联文档对象
const openCommand = new OpenDocumentCommand(document);
// 创建保存文档命令并关联文档对象
const saveCommand = new SaveDocumentCommand(document);
// 创建按钮并关联打开文档命令
const openButton = new Button(openCommand);
// 创建按钮并关联保存文档命令
const saveButton = new Button(saveCommand);
// 点击按钮执行命令
openButton.click(); // 打开文档
saveButton.click(); // 保存文档

命令模式的特点

  • 在命令模式中,Command 对象拥有更长的生命周期。还支持撤销,排队等操作。而设计模式的主题总是会把不变的事物和变化的事物分离出来,命令模式也不例外。

JavaScript 中的命令模式

  • 所谓的命令模式,就是给对象的某个方法取一个 execute 的名字,引入 command 对象和 receiver 这两个无中生有的角色无非是把简单的事情复杂化了。
  • 命令模式的由来,其实是回调(callback)函数的一个面向对象的替代品。

宏命令

  • 宏命令是一组命令的集合,可通过宏命令的方式,可一次执行一批命令。

完整版demo:

// 命令接口
class Command {
    execute() {}
    undo() {}
    redo() {}
}
// 具体命令:打开文档
class OpenDocumentCommand extends Command {
    constructor(document) {
        super();
        this.document = document;
    }
    execute() {
        this.document.open();
    }
    undo() {
        this.document.close();
    }
    redo() {
        this.execute();
    }
}
// 具体命令:保存文档
class SaveDocumentCommand extends Command {
    constructor(document) {
        super();
        this.document = document;
    }
    execute() {
        this.document.save();
    }
    undo() {
        // 撤销保存操作,恢复文档到上一个保存点或初始状态
        this.document.restore();
    }
    redo() {
        this.execute();
    }
}
// 接收者:文档
class Document {
    constructor(name) {
        this.name = name;
        this.content = "";
        this.savedContent = "";
    }
    open() {
        console.log(`打开文档:${this.name}`);
    }
    close() {
        console.log(`关闭文档:${this.name}`);
    }
    save() {
        this.savedContent = this.content;
        console.log(`保存文档:${this.name}`);
    }
    restore() {
        this.content = this.savedContent;
        console.log(`恢复文档:${this.name}`);
    }
    setContent(content) {
        this.content = content;
        console.log(`设置文档内容:${this.name}`);
    }
    getContent() {
        return this.content;
    }
}
// 调用者:按钮
class Button {
    constructor() {
        this.commandQueue = [];
        this.undoStack = [];
        this.redoStack = [];
    }
    // 将命令加入队列
    addToQueue(command) {
        this.commandQueue.push(command);
    }
    // 执行队列中的命令
    executeQueue() {
        console.log("执行命令队列:");
        while (this.commandQueue.length > 0) {
            const command = this.commandQueue.shift();
            command.execute();
            this.undoStack.push(command);
        }
    }
    // 撤销上一次执行的命令
    undo() {
        if (this.undoStack.length === 0) {
            console.log("没有可撤销的命令");
            return;
        }
        const command = this.undoStack.pop();
        command.undo();
        this.redoStack.push(command);
        console.log("撤销上一次命令");
    }
    // 重做上一次撤销的命令
    redo() {
        if (this.redoStack.length === 0) {
            console.log("没有可重做的命令");
            return;
        }
        const command = this.redoStack.pop();
        command.redo();
        this.undoStack.push(command);
        console.log("重做上一次撤销的命令");
    }
}
// 使用示例
const document = new Document("example.txt");
// 创建按钮
const button = new Button();
// 创建打开文档命令并关联文档对象
const openCommand = new OpenDocumentCommand(document);
// 创建保存文档命令并关联文档对象
const saveCommand = new SaveDocumentCommand(document);
// 将命令加入队列
button.addToQueue(openCommand);
button.addToQueue(saveCommand);
// 执行命令队列
button.executeQueue();
// 撤销命令
button.undo();
// 重做命令
button.redo();
  • • 在这个示例中,我们首先定义了命令接口Command,其中包含execute、undo和redo方法。然后创建了两个具体的命令类OpenDocumentCommand和SaveDocumentCommand,它们分别实现了命令的执行、撤销和重做操作。
  • • 接着,我们定义了文档类Document作为接收者,其中包含了打开文档、关闭文档、保存文档和恢复文档的操作。
  • • 然后,我们创建了调用者类Button,它包含命令队列、撤销栈和重做栈的管理。通过addToQueue方法将命令加入队列,executeQueue方法执行队列中的命令,undo方法撤销上一次执行的命令,redo方法重做上一次撤销的命令。
  • • 在示例的最后,我们创建了文档对象、按钮对象,并关联了打开文档和保存文档命令。然后将命令加入队列,执行命令队列,撤销命令,重做命令。

命令模式的优缺点

  • • 优点:
  1. 1. 解耦发送者和接收者:命令模式通过将请求封装为命令对象,将发送者和接收者解耦。发送者只需要知道如何触摸命令,而不需要关心具体的接收者和执行操作。
  2. 2. 易扩展:由于命令模式将请求封装成了独立的命令对象,因此添加一个命令只需要实现一个新的命令的类,不需要修改原有的代码结构
  3. 3. 支持队列化和延迟执行:命令模式将多个命令对象组合成一个命令队列(宏命令),实现批量执行和撤销操作。也可以实现延迟执行,将命令对象存储起来,在需要的时候在执行。
  4. 4. 支持撤销和重做:通过保存命令的执行历史,可实现撤销和重做操作,对于用户操作的回退和恢复非常有用。
  5. 5. 支持日志和记录:可记录命令的执行日志,用于系统的跟踪和调试。
  • 缺点:
  1. 1. 增加了类的数量:随着引入命令模式的增加,会导致类的数量增加,增加代码的复杂性。
  2. 2. 命令执行效率降低:由于将命令模式需要封装成对象,因此会增加一定的执行开销,对于性能要求较高的场景可能会有影响。

命令模式的适用场景

  1. 1. 撤销和重做
  2. 2. 异步任务处理:若在后台处理数据或执行长时间运行的操作。
  3. 3. 日志记录和系统操作记录
  4. 4. 队列和调度任务:可将命令对象添加到队列中,然后按照队列中的顺序依次执行。

命令模式的最佳实践

  1. 1. 封装命令:将每个操作封装为独立的命令对象
  2. 2. 使用接口和抽象类:定义一个接口和抽象类来表示命令对象,以确保命令对象具有抑制的方法和属性
  3. 3. 参数化命令:在命令对象中传递参数,使命令对象能够执行不同的操作
  4. 4. 解耦调用者和接收者:调用者只需要知道如何触发命令,而不需要了解命令的具体实现。
  5. 5. 支持的撤销操作
  6. 6. 宏命令
  7. 7. 单一职责原则:每个命令对象应该只负责一个具体的操作或请求,这样可以确保命令对象的职责清晰,代码结构清晰。
  8. 8. 代码的灵活性和可扩展性

特殊字符描述

问题标注 Q:(question)答案标注 R:(result)注意事项标准:A:(attention matters)详情描述标注:D:(detail info)总结标注:S:(summary)分析标注:Ana:(analysis)提示标注:T:(tips)

相关文章
|
16天前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
116 58
|
27天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
195 2
|
29天前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
33 0
|
2月前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
2月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
4天前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
12 3
原生js炫酷随机抽奖中奖效果代码
|
9天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
110 4
|
10天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
54 6
|
7天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
22 1