Command pattern in javascript ES6 -
for app developing need implement command pattern support undo/redo actions. want use javascript es6 new features classes, constants etc. i've never used pattern i interested in hearing implementations of pattern using javascript es6 syntax.
after reading pattern on google i've written own implementation using small example 2 types of command (update , delete) , mockup db simplicity.
please feel free criticize/correct in case!
mockupdb.js
// mockupdb.js export default { key1: "value1", key2: "value2", key3: "value3" } command.js
// command.js import mockupdb "./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} "./commandmanager"; import {updatecommand, deletecommand} "./command"; import mockupdb "./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(); output
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' }
Comments
Post a Comment