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

Popular posts from this blog

Sort a complex associative array in PHP -

vb.net - How to ignore if a cell is empty nothing -

recursion - Can every recursive algorithm be improved with dynamic programming? -