Wednesday, December 6th, 2006

Creating extensible Prototype Widgets

Category: Articles, JavaScript, Prototype

Justin Palmer has written about avoiding bloat in widgets with respect to Prototype.

Widgets walk a fine line between abstractions and implementations. Implementation, in this case, is a practical solution chosen to perform a given function. The problems with widgets occur when the widget author walks too far in one direction, or worse, walks an outward spiral covering both directions. Both choices lead to script bloat and complexity thats hard to manage. You no longer have a simple solution for a defined problem, you have a complex solution for a variety of problems. The good news is there are ways to avoid both the bloat and complexity.

He details the world of extending classes in JavaScript, and then gets to actsAsAspect, which lets you get AOP-y via before, after, and around advice.


  1. function actsAsAspect(object) {
  2.   object.yield = null;
  3.   object.rv    = { };
  4.   object.before  = function(method, f) {
  5.     var original = eval("this." + method);
  6.     this[method] = function() {
  7.       f.apply(this, arguments);
  8.       return original.apply(this, arguments);
  9.     };
  10.   };
  11.   object.after   = function(method, f) {
  12.     var original = eval("this." + method);
  13.     this[method] = function() {
  14.       this.rv[method] = original.apply(this, arguments);
  15.       return f.apply(this, arguments);
  16.     }
  17.   };
  18.   object.around  = function(method, f) {
  19.     var original = eval("this." + method);
  20.     this[method] = function() {
  21.       this.yield = original;
  22.       return f.apply(this, arguments);
  23.     }
  24.   };
  25. }

As someone who has worked with AOP via AspectJ and other libraries, it makes me a bit queasy to consider this AOP. One of the key elements is the pointcut language, which is very primitive here.

I do like the conclusion though:

While this is a rather convoluted example, the premise is solid. When creating widgets, don’t over abstract, and avoid hacking when possible. Even though we jazzed up our widget in the end, it’s original purpose is still intact and we added no additional overhead to it. Those who want ”more cowbell” can get it by plugging-in the additional scripts.

Posted by Dion Almaer at 8:01 am

3.5 rating from 22 votes


Comments feed TrackBack URI

As mentioned on the blog the eval evil isn’t required!

var original = this[method];

works a treat!

Comment by Ross — December 6, 2006

why using eva(“this.”+method)?
use instead this[method];

Comment by Uriel Katz — December 6, 2006

This is one of the reasons I avoid frameworks like Prototype. One man’s “object oriented” system is another mans “poor implementation”. I think Javascript is great at being function and object based, but anything beyond that is just an exercise is confusion.

Comment by Ivan — December 8, 2006

Leave a comment

You must be logged in to post a comment.