Namespaces with JavaScript

If you develop a page containing multiple javascript files theres a good chance that sooner or later you are going to declare a function or variable with the same name in multiple files – breaking your code and causing a bug that could be hard to trace. The solution is to place your code inside another uniquely named object, or even chain of objects – called a namespace. A simple solution could look like this:

acme.sales.js

if (acme == null) acme = {};
if (acme.sales == null) acme.sales = {};

acme.sales.addTarget = function() {
  ...
}


acme.marketing.js

if (acme == null) acme = {};
if (acme.marketing == null) acme.marketing = {};

acme.marketing.addTarget = function() {
  ...
}

This ensures that the second addTarget function doesn’t overwrite the first.

However, we can improve this code pattern by creating a function. This allows us to take advantage of the this keyword inside the function:

acme.marketing 2.0.js

if (acme == null) acme = {};
if (acme.marketing == null) acme.marketing = new function() {
  this.addTarget = function() {
    ..
  }
};

This also provides a useful way of creating public and private methods:

if (acme == null) acme = {};
if (acme.marketing == null) acme.marketing = new function() {
  this.addTarget = function() {
    ..
  }

  //Private functions
  var internal = function() {
    ..
  }
};

The public function addTarget is visible to the namespace, but the internal function isnt.

The namespace function

The namespace function takes these ideas and makes the code more succinct and readable. Using the namespace function, we could rewrite our examples so:

namespace('acme.sales', function() {

  this.addTarget = function() {
    ..
  }
}

namespace('acme.marketing', function() {

  this.addTarget = function() {
    ..
  }
  var internal = function() {
    ..
  }
}

All parent namespaces are created if they dont exist and the namespace is only declared in one place, making it much easier to change if required. If the namespace already exists, you can use the object directly instead of the string representation.

View code

Advertisements
Namespaces with JavaScript

Introducing jQuery superpng plug-in

The superpng plug-in has been written to provide a flexible png alpha api to developers using jQuery and who need to support IE6. Other scripts didn’t provide the performance, features or flexibility that I required, as well as not using functionality available in jQuery which is fairy ubiquitous these days. The script uses either the AlphaImageLoader filter or the vml approach, depending on the type of tag and whether background-position is required.

For more information on alpha pngs and IE6, please see my previous post here.

Usage

Enable alpha images for all elements with a class of .png providing the relative path of the replacement transparent gif image:

$(document).ready(function() {
	$('.png').superpng({path: '../images/blank.gif'});
});

The full list of options are as follows:

  • path: define the location of the transparent .gif file used to replace the original png image
  • mode: filter/vml/auto (default) – describes the method used to enable png alpha.
    • filter:  The alpha loader fix is used, replacing the existing image with the blank image found in path.
    • vml: vml markup is placed inside the container. Requires a <div> or other block element.
    • auto:  A mode is chosen based on the tag type and background-position value.
  • cache: Determines if background images are cached. Default true.

Superpng is licenced under the the MIT, BSD, and GPL Licenses. Online examples are available here and the code is available on Github.

Please contact me with any feedback or any issues you may encounter.

Introducing jQuery superpng plug-in