« Faking Interfaces in Javascript
Creative Commons Salon, 2009 »

The Strategy Pattern (Part 1)

The Strategy Pattern is more useful for programming languages that do not support first-class functions. Fortunately, JavaScript treats everything as an object, and allows for run-time object modification. That enables the use of the strategy pattern quite nicely.

Here’s a simple example for changing the behavior of an object without hard-coding the behavior options into the object itself. It allows for flexible changing of object behavior down the road, without having to refactor an entire code block.

Here’s our object. It’s just a simple object whose constructor takes a string argument. It has one property and one member method.

  1. var SimpleText = function(txt) {
  2.         this.text = txt;
  3.         this.defaultShowAction = this.show;
  4. };
  5. SimpleText.prototype.show = function() {
  6.         alert(this.text);
  7. };

One interesting thing to note about the constructor is the second line. It saves the initial show method as a member property, so it can be easily reset later. Note that it’s saved as a public property, so it is possible to even change the default behavior. Here are some example behaviors:

  1. var AppendToDocument = function() {
  2.     var txtNode = document.createTextNode(this.text);
  3.     document.body.appendChild(txtNode);
  4. };
  5. var AppendToDocumentWithDiv = function() {
  6.     var div = document.createElement("DIV");
  7.     div.appendChild(document.createTextNode(this.text));
  8.     document.body.appendChild(div);
  9. };

Note that they all reference this.text. It doesn’t make much sense now, so I’ll go into it after we create our test case:

  1. var txt = new SimpleText("Hello World!");
  2. txt.show(); // alerts "Hello World!"
  3. txt.show = AppendToDocument;
  4. txt.show(); // appends "Hello World!" to the end of the document
  5.             // as a text node
  6. txt.show = AppendToDocumentWithDiv;
  7. txt.show(); // wraps "Hello World!" in a div element and appends
  8.             // it to the document.
  9. txt.show = txt.defaultShowAction;
  10. txt.show(); // alerts it again

When adding a method to an instantiated object this way, the this keyword will reference the object it’s attached to. Pretty handy, right? Now you can redefine the behavior of any JavaScript object as you go. It’s inherent in the language, unlike Java, where you must wrap each new behavior in a class which implements the requisite behavior interface. In this way, JavaScript is a little bit more powerful than Java. On the one hand, it’s really easy to quickly redefine behaviors of an object.

On the other hand, it opens up many pitfalls. The new behavior may not necessarily conform to what the object is expecting, and there is no way to define what a method’s signature must look like. If someone else is using your code, they may not know that your object is built to let them do this. It can also make things messily difficult to debug later on, if the implementation of SimpleText changes down the line - say, if you rename the text member to textblock - you’ll have to go through and change every single one of your behavior methods!

Look to Part 2 (coming soon!) to see how you can overcome these pitfalls.

Reblog this post [with Zemanta]

Tags: , , ,

This entry was posted on Saturday, February 21st, 2009 at 8:12 pm and is filed under JavaScript, Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply