Javascript実践におけるコマンドモードの詳しい説明

インターフェースコマンド{
    実行():void
}

タイプ Keymap = { [キー:文字列]: コマンド }
クラスホットキー{
    キーマップ: キーマップ = {}

    コンストラクタ(キーマップ: キーマップ) {
        this.keymap = キーマップ
    }

    呼び出し(e: キーボードイベント) {
        定数プレフィックス = e.ctrlKey ? 'ctrl+' : ''
        定数キー = プレフィックス + e.key
        this.dispatch(キー)
    }

    ディスパッチ(キー: 文字列) {
        this.keymap[キー].exec()
    }
}

クラスCopyCommandはCommandを実装します{
    コンストラクタ(クリップボード: 任意) {}
    実行() {}
}

CutCommandクラスはCommandを実装します{
    コンストラクタ(クリップボード: 任意) {}
    実行() {}
}

PasteCommandクラスはCommandを実装します{
    コンストラクタ(クリップボード: 任意) {}
    実行() {}
}

const クリップボード = { データ: '' }
定数キーマップ = {
    'ctrl+x': 新しいCutCommand(クリップボード)、
    'ctrl+c': 新しいCopyCommand(クリップボード)、
    'ctrl+v': 新しい PasteCommand(クリップボード)
}
const hotkey = 新しい Hotkey(キーマップ)

document.onkeydown = (e) => {
    ホットキー.call(e)
}

インターフェース IPerson {
    moveTo(x: 数値, y: 数値): void
}

クラスPersonはPersonを実装します{
    x = 0
    y = 0

    移動先(x: 数値, y: 数値) {
        this.x = x
        this.y = y
    }
}

インターフェースコマンド{
    実行(): 無効
    元に戻す(): 無効
}

MoveCommandクラスはCommandを実装します{
    前X = 0
    前 = 0

    人: 人

    コンストラクタ(人: Person) {
        this.person = 人
    }

    実行() {
        this.prevX = this.person.x
        this.prevY = this.person.y
        this.person.moveTo(this.prevX++、this.prevY++) は、
    }

    元に戻す（）{
        this.person.moveTo(this.prevX, this.prevY)
    }
}


const ezio = 新しい Person()
const moveCommand = 新しい MoveCommand(ezio)
移動コマンド.exec()
コンソールログ(ezio.x、ezio.y)
移動コマンド.undo()
コンソールログ(ezio.x、ezio.y)

クラスコントロール{
    コマンド: コマンド[] = []
    
    exec(コマンド) {
        this.commands.push(コマンド)
        コマンド.exec(this.person)
    }
}

const ezio = 新しい Person()
const コントロール = 新しいコントロール()
control.exec(新しいMoveCommand(ezio))
control.exec(新しいMoveCommand(ezio))

console.log(コントロールコマンド)

クラスコマンド履歴 {
    コマンド: コマンド[] = []
    
    インデックス = 0
    
    現在のコマンドを取得します（）{
        this.commands[index]を返す
    }
    
    コンストラクター(コマンド: Command[]) {
        this.commands = コマンド
    }
    
    やり直し（）{
        this.index++
        this.currentCommand.exec()
    }
    
    元に戻す() {
        this.currentCommand.undo()
        this.index--
    }
}

[{
    タイプ: '移動'、
    x: 1,
    y: 1,
}, {
    タイプ: '移動'、
    x: 2,
    y: 2,
}]

クラスBatchedCommandはCommandを実装します{
    コマンド = []
    
    コンストラクタ(コマンド) {
        this.commands = コマンド
    }
    
    実行() {
        this.commands.forEach(コマンド => command.exec())
    }
}

const batchedMoveCommand = 新しいBatchedCommand([
    新しいMoveCommand(ezio)、
    新しいSitCommand(ezio)、
])

バッチ化されたMoveCommand.exec()