Please visit my new campsite listing site ukcampingmap.co.uk


Archive for October, 2010

Eventful times

Friday, October 22nd, 2010

I’ve just started delving into using jQuery’s custom events. They’ve been around for a while, but I never really saw the point of using them before; I’d read one or two nice examples of how they can be used, but I kept hitting a mental block when trying to think of ways to use them in my own work. I think, like the great leap forward you have to take when realising an object can be as abstract as you want (eg a process that exists only fleetingly, such as an ajax call, can be an object), programming using events as a central aspect of your style requires a big change in the way you think about problems.

As an example, previously I was always saving references to objects that a given object might need to interact with, e.g.

function Obj1() {
   this.container = $("#container");
   this.child = new Obj2(this);

   this.method = function() {
         //do something
   }
}();

function Obj2(parent) {
   var that = this;
   this.parent = parent;
   this.container = $("#childContainer");
   $(this.container).click(function(){
       that.alter();
   });

   this.alter = function() {
      this.altered = true;
      this.parent.method();
   }
}

var obj1 = new Obj1();

So what’s wrong with this? It’s difficult to say, but it always jarred with me that you had to pass in “this” as a parameter in order to make it easy to track back to the parent. And there will be circumstances where you’re creating an object that has to interact with lots of other objects and you have to either pass in lots of parameters when creating the object or do some on the fly processing to find the objects that need to be affected.

Now, here’s the same thing achieved using custom events

function Obj1() {
   var that = this;
   this.container = $("#container");
   this.child = new Obj2();
   $("#childContainer").altered(function(){
       that.method();
   });
   this.method = function() {
         //do something
   }
};

function Obj2() {
   var that = this;
   this.container = $("#childContainer");
   $(this.container).click(function(){
      that.alter();
   });

   this.alter = function() {
      this.altered = true;
      this.container.trigger("altered");
   }
}

var obj1 = new Obj1();

Ok, so what’s so good about this? It may even use more lines of code. But crucially it gets rid of having to store references to objects, freeing you up to create ever more complicated applications without having to create a web of dependencies that is difficult to maintain*. A good analogy I think is to think of an object triggering an event as a child shouting. If the child shouts when it needs something then it doesn’t have to constantly hold its parent’s hand; it’s parent comes to it on hearing the shout. And this gives the child freedom to explore the world on its own terms, and develop into a more rounded, unstifled human being… but I think I’m straying off the point.

So to sum up, javascript/jQuery custom events are a very useful feature.

And don’t smother your progeny.

*I’ve just re-read the API and found out that you can attach all manner of data to the event as extra parameters, which will also be very useful for this.