javascript ES6中的命令模式

对于我正在开发的应用程序，我需要实现支持撤销/重做操作的命令模式。我还想使用javascript ES6的新特性，如类、常量等。 我从来没有使用过这个模式，因此我真的很有兴趣听到使用javascript es6语法可以很好地实现这个模式

在Google上阅读了这个模式之后，为了简单起见，我用一个只有两种命令类型（update和delete）和一个模拟数据库的小示例编写了自己的实现

在任何情况下，请随时批评/纠正

mockupDB.js

// mockupDB.js


export default {
    key1: "value1",
    key2: "value2",
    key3: "value3"
}

Command.js

// Command.js

import mockupDB from "./mockupDB";


class Command {

    constructor(execute, undo, serialize, value) {
        this.execute = execute;
        this.undo = undo;
        this.serialize = serialize;
        this.value = value;
    }

}



export function UpdateCommand(key, value) {

    let oldValue;

    const execute = () => {
        if (mockupDB.hasOwnProperty(key)) {
            oldValue = mockupDB[key];
            mockupDB[key] = value;
        }
    };

    const undo = () => {
        if (oldValue) {
            mockupDB[key] = oldValue;
        }
    };

    const serialize = () => {
        return JSON.stringify({type: "Command", action: "update", key: key, value: value});
    };

    return new Command(execute, undo, serialize, value);
}


export function DeleteCommand(key) {

    let oldValue;

    const execute = () => {
        if (mockupDB.hasOwnProperty(key)) {
            oldValue = mockupDB[key];
            delete mockupDB[key];
        }
    };

    const undo = () => {
        mockupDB[key] = oldValue;
    };

    const serialize = () => {
        return JSON.stringify({type: "Command", action: "delete", key: key});
    };

    return new Command(execute, undo, serialize);
}

CommandManager.js

// CommandManager.js

export class CommandManager {

    constructor() {
        this.executeHistory = [];
        this.undoHistory = [];
    }

    execute(command) {
        this.executeHistory.push(command);
        command.execute();
        console.log(`Executed command ${command.serialize()}`);
    }

    undo() {
        let command = this.executeHistory.pop();
        if (command) {
            this.undoHistory.push(command);
            command.undo();
            console.log(`Undo command ${command.serialize()}`)
        }
    }

    redo() {
        let command = this.undoHistory.pop();
        if (command) {
            this.executeHistory.push(command);
            command.execute();
            console.log(`Redo command ${command.serialize()}`);
        }
    }
}

client.js

// client.js

import {CommandManager} from "./CommandManager";
import {UpdateCommand, DeleteCommand} from "./Command";
import mockupDB from "./mockupDB";

"use strict";

const main = () => {

    const commandManager = new CommandManager();

    console.log("DB status", mockupDB, "\n");
    commandManager.execute(new UpdateCommand("key2", "newValue2"));
    commandManager.execute(new DeleteCommand("key3"));
    console.log("DB status", mockupDB, "\n");
    commandManager.undo();
    commandManager.undo();
    console.log("DB status", mockupDB, "\n");
    commandManager.redo();
    commandManager.redo();
    console.log("DB status", mockupDB, "\n");

};

main();

输出

DB status { key1: 'value1', key2: 'value2', key3: 'value3' }

Executed command {"type":"Command","action":"update","key":"key2","value":"newValue2"}
Executed command {"type":"Command","action":"delete","key":"key3"}
DB status { key1: 'value1', key2: 'newValue2' }

Undo command {"type":"Command","action":"delete","key":"key3"}
Undo command {"type":"Command","action":"update","key":"key2","value":"newValue2"}
DB status { key1: 'value1', key2: 'value2', key3: 'value3' }

Redo command {"type":"Command","action":"update","key":"key2","value":"newValue2"}
Redo command {"type":"Command","action":"delete","key":"key3"}
DB status { key1: 'value1', key2: 'newValue2' }