js设计模式之（命令模式）

﹏ヽ暗。殇╰゛Y 2023-06-27 12:36 15阅读 0赞

## 命令模式 ##

命令模式（Command Pattern）是一种数据驱动的设计模式，它属于行为型模式。请求以命令的形式包裹在对象中，并传给调用对象。调用对象寻找可以处理该命令的合适的对象，并把该命令传给相应的对象，该对象执行命令。

## 介绍 ##

### 意图: ###

将一个请求封装成一个对象，从而使您可以用不同的请求对客户进行参数化。

### 主要解决: ###

在软件系统中，行为请求者与行为实现者通常是一种紧耦合的关系，但某些场合，比如需要对行为进行记录、撤销或重做、事务等处理时，这种无法抵御变化的紧耦合的设计就不太合适。

### 何时使用: ###

在某些场合，比如要对行为进行"记录、撤销/重做、事务"等处理，这种无法抵御变化的紧耦合是不合适的。在这种情况下，如何将"行为请求者"与"行为实现者"解耦？将一组行为抽象为对象，可以实现二者之间的松耦合。

### 可以理解为： ###

一辆汽车有转向系统、刹车系统、驱动系统，我们不可能说跳过转向系统直接去搬动轮胎做转向（老式汽车是这样的），我们需要通过发送指令（也就是转动方向盘），然后  
指令到达转向系统，转向系统会根据用户指令然后做相应的转换，这里可以根据转向的角度做矫正、自动驾驶等等，可以做很好的扩展，降低用户与轮胎的转向的耦合度

### 优点： ###

1.  降低了系统耦合度。
2.  新的命令可以很容易添加到系统中去。

### 缺点： ###

使用命令模式可能会导致某些系统有过多的具体命令类。

### 使用场景： ###

认为是命令的地方都可以使用命令模式，

#### 比如： ####

1.  GUI 中每一个按钮都是一条命令。

#### 作业： ####

用命令模式模拟一辆汽车的转向系统

AbstractMethodError.js

export default class AbstractMethodError extends Error {
        constructor() {
            super("this method should be overried");
            this.name = "AbstractMethodError";
        }
    }

Command.js

import AbstractMethodError from "./AbstractMethodError";
    
    export default class Command {
        constructor(name) {
            this.name = name;
        }
    
        execute() {
            throw new AbstractMethodError();
        }
    }

CommandManager.js

export default class CommandManager {
        constructor() {
            this.commands = [];
        }
    
        add(command) {
            this.commands.push(command);
        }
    
        execute() {
            while (this.commands.length) {
                this.commands.shift().execute();
            }
        }
    }

TransformManager.js

export default class TransformManager {
        constructor(target) {
            this.target = target;
        }
    
        translationXBy(x) {
            this.target.style.left = parseFloat(this.target.style.left || 0) + x + "px";
        }
    
        translationYBy(y) {
            this.target.style.top = parseFloat(this.target.style.top || 0) + y + "px";
        }
    }

TranslateXCommand.js

import Command from "./Command";
    
    export default class TranslateXCommand extends Command {
        constructor(transformManager, distance) {
            super("TranslateXCommand");
            this.distance = distance;
            this.transformManager = transformManager;
        }
    
        execute() {
            this.transformManager.translationXBy(this.distance);
        }
    }

TranslateYCommand.js

import Command from "./Command";
    
    export default class TranslateYCommand extends Command {
        constructor(transformManager, distance) {
            super("TranslateYCommand");
            this.distance = distance;
            this.transformManager = transformManager;
        }
    
        execute() {
            this.transformManager.translationYBy(this.distance);
        }
    }

测试demo：

import CommandManager from "./src/CommandManager";
    import TranslateXCommand from "./src/TranslateXCommand";
    import TranslateYCommand from "./src/TranslateYCommand";
    
    import TransformManager from "./src/TransformManager";
    export default {
        name: 'page-command-mode',
        mounted() {
            this.commandManager = new CommandManager();
            this.transformManager= new TransformManager(this.$el.querySelector("#id-command-pattern"));
        },
        methods: {
            translateX(x) {
                this.commandManager.add(new TranslateXCommand(this.transformManager,x));
                this.commandManager.execute();
            },
            translateY(y) {
                this.commandManager.add(new TranslateYCommand(this.transformManager,y));
                this.commandManager.execute();
            }
        }
    };

参考：

> [https://www.runoob.com/design-pattern/design-pattern-tutorial.html][https_www.runoob.com_design-pattern_design-pattern-tutorial.html]

[https_www.runoob.com_design-pattern_design-pattern-tutorial.html]: https://www.runoob.com/design-pattern/design-pattern-tutorial.html