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

命令模式

命令模式（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