JavaScript – Command Design Pattern

Git Hub Commit

With a sustained JavaScript project at work, I have been focusing more and more of my time here.  To that end, I have decided that besides creating mature and scalable TGIMBA rest service to replace the current C# one, I am going to resurrect many of the old design pattern samples I had done before.  But instead of C# or Java, I am going to use JavaScript 🙂

I am also using vanilla JavaScript instead of some intermediaries like TypeScript or Babble (see references #2 or #3) to try and understand its inner workings.  Where both TypeScript, Babble and other such tools allow you to use an Object Oriented Programming (OOP) approach that generates JavaScript, I want to see what is possible coding in the basic JavaScript language.  That said, if this were a real project, I would use TypeScript.  So far in other projects I am involved with, it seems very capable.

So, my adventure into the JavaScript wild has proved more difficult than I thought.  I knew that JavaScript was not really OOP friendly out of the box.  But I also discovered things like inheritance and interface implementations that are second nature in C# and Java are not so in JavaScript.  Classes are supported (ish), but it seems like in name only and none of the advanced OOP concepts apply.

For example, in the first pattern I have choosen to re-implement is the command pattern.  It makes use of an interface based receiver contained in a command that is derived from an abstract class and finally executed by an invoker.  The receiver, command and invoker classes are not supposed to know anything about each other and function as a framework to which new commands can be added.  Starting with the finished project, here is what it looks like:

screen-shot-2017-02-20-at-5-18-21-pm

screen-shot-2017-02-20-at-5-18-28-pm

To get kinda close to the interface implementation (receivers) and abstract derived classes (commands) that I needed, I found a very useful method (see reference #1).  I saw other more complicated ways of kinda getting an interface, but they didn’t seem worth the work when my only goal here is to become more familiar with the ins and outs of JavaScript programming.

Where in C# or Java you would create an interface or abstract class, I opted to create:

  • CommandAbstract.js – This has a property for the receiver implementation and a method that needs to be overridden in the concrete command implementations.  Using the method in reference #1 is pretty darn close to inheritance.  In running the sample, this class’s execute() was never called.

screen-shot-2017-02-20-at-5-47-42-pm

  • Receiver.js – This is not really an interface, but an object that has a method defined.  It is here only for visual since I use the same method here as I did for CommandAbstract.js.  It is inheritance and not an implementation.  I may update this at some point if I find a supported easy way to do interfaces in native JavaScript.

screen-shot-2017-02-20-at-5-47-50-pm

For the commands, I inherited the execute() method from CommandAbstract.js into the four command implementations.  For the receivers, I ‘implemented’ (well, not really…but sounds good :)) the receivers action() method in the four receiver implementations.

screen-shot-2017-02-20-at-5-18-52-pm

All of this is put together in command.js (a driver file of sorts).  I hope to have all of the patterns I am interested in implemented by the end of March.

Stay tuned!

references

  1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
  2. https://www.typescriptlang.org
  3. https://babeljs.io
Advertisements

One thought on “JavaScript – Command Design Pattern

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s