The JQuery.Scf.js library

The jQuery library supports 2 ways of extending: you can add your own selector methods, and you can add (static) functionality to the jQuery root object itself.

Many developers have extended jQuery by creating libraries that add custom selectors, for UI creation, animation, event handling, etc...

An example of creating a custom selector is jQuery Corners.

Smartsite SXML CopyCode image Copy Code
$j("div.rounded").corner()

Selectors are accessible as methods on any jQuery selector object.

The jQuery root object can also be extended, to add (groups of) static methods:

Smartsite SXML CopyCode image Copy Code
jQuery.log = function(message) {
  if(window.console) {
     console.debug(message);
  } else {
     alert(message);
  }
};

While these extension methods are easy to implement and use, they have an inherent naming conflict risk when using multiple plugins: What if you install another plugin that includes a method with the same name?

When programming static extensions, this risk is diminished by claiming a single namespace, and placing all extension methods inside this namespace.

Smartsite SXML CopyCode image Copy Code
jQuery.MyNamespace = {
  log = function(message) {
     if(window.console) {
       console.debug(message);
     } else {
       alert(message);
     }
  }
};

As you can see, this is very easy to implement, and the SCF library does exactly this, claiming only a single object, scf, at the root level.

With jQuery selector methods, claiming a single namespace is not so easy, since jQuery doesn't provide a native way of adding selector methods within their own namespace. With multiple selectors in the SCF library, and Smartsite being a generic platform, this risk would simply be unacceptable.

The solution for this problem builds on an excellent work by Gilberto Saraiva. Thanks to this namespace handling, all SCF selector methods use the scf namespace:

Smartsite SXML CopyCode image Copy Code
<jQuery>("#myDiv").scf.busy();

 

 

 

Topics