O'Reilly logo

JavaScript Web Applications by Alex MacCaw

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

$.Controller: The jQuery Plug-in Factory

JavaScriptMVC’s controllers are many things. They are a jQuery plug-in factory. They can be used as a traditional view, making pagination widgets and grid controls. They can also be used as a traditional controller, initializing controllers and hooking them up to models. Mostly, controllers are a really great way of organizing your application’s code.

Controllers provide a number of handy features, such as:

  • jQuery plug-in creation

  • Automatic binding

  • Default options

  • Automatic determinism

But the controller’s most important feature is not obvious to anyone but the most hardcore JS ninjas. The following code creates a tooltip-like widget that displays itself until the document is clicked:

$.fn.tooltip = function(){
  var el = this[0];

  $(document).click(function(ev){
    if (ev.target !== el)
      $(el).remove();
  });

  $(el).show();
  return this;
});

To use it, add the element to be displayed to the page, and then call tooltip on it:

$("<div class='tooltip'>Some Info</div>")
    .appendTo(document.body)
    .tooltip()

But this code has a problem. Can you spot it? Here’s a hint: what if your application is long-lived and lots of these tooltip elements are created?

The problem is that this code leaks memory! Every tooltip element, and any tooltip child elements, are kept in memory forever. This is because the click handler is not removed from the document, and it has a closure reference to the element.

This is a very easy mistake to make. jQuery removes all event handlers from elements ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required