Question

What is the best way to create a static variables for jQuery plugins?

I have 2 example use cases to illustrate my thinking so far; each with some ideas.
Any other ideas welcomed of course…

One example is for a static variable containing: animation settings, layout settings, product details, etc; the other for a static variable caching data.

I hope ‘static’ is the correct terminolgy here… single globals. please correct if wrong.

Case 1: for settings

// defining globally
var anObject = {
 value1 = 0;
 value2 = 0;
}

jQuery.anObjectSet(partialObject) {
 anObject = jQuery.extend(anObject, partialObject);
}

jQuery.fn.myPlugin = function (partialObject) {
 obj = jQuery.extend(anObject, partialObject);
}

or maybe?

// adding to the jQuery object
jQuery.anObject = {
 value1 = 0;
 value2 = 0;
}

jQuery.anObjectSet(partialObject) {
 jQuery.anObject = jQuery.extend(jQuery.anObject, partialObject);
}

jQuery.fn.myPlugin = function (partialObject) {
 obj = jQuery.extend(jQuery.anObject, partialObject);
}

or maybe?

jQuery.anObjectSet(partialObject) {
 if(!jQuery.anObject) 
  jQuery.anObject = {
    value1 = 0;
    value2 = 0;
  }

 jQuery.anObject = jQuery.extend(jQuery.anObject, partialObject);
}

jQuery.fn.myPlugin = function (partialObject) {
 if(!jQuery.anObject) 
  jQuery.anObject = {
    value1 = 0;
    value2 = 0;
  }
 obj = jQuery.extend(jQuery.anObject, partialObject);
}

Case 2: for caching

jQuery.fn.myPlugin = function (newObject) {
 if(!cache[newObject])
  cache[newObject] = $(newObject);

 return cache[newObject];
}

or maybe? (I seen this method elsewhere)

window.$cache = {};

jQuery.fn.myPlugin = function (newObject) {
 if(!$cache[newObject])
  $cache[newObject] = $(newObject);

 return $cache[newObject];
}

Thanks. I want to build up a .js library, getting starting on the right track…

Answer 1

If you are looking to make a “global” or static variable for your library and your library alone, a closure is the way to go.

A normal global is a bad thing because it pollutes the namespace, and you haven’t any idea who is going to be running your library.

By defining the static variable inside an anonymous function, we give ourselves access to a a variable that no one can touch and is effectively “global” for the purposes of our functions. If I understand correctly what you are trying to do, this should accomplish it.

(function($){
    var $cache = {};

    jQuery.fn.myPlugin = function (newObject) {
      if(!$cache[newObject])
        $cache[newObject] = $(newObject);

      return $cache[newObject];
    }

})(jQuery);

Edit:

The $cache variable will only be accessible to functions defined within this anonymous function. So if the other functions need to access this file, they must also be defined inside this anonymous function.

The only alternative to defining everything here (AFAIK) is to have some combination of accessor functions, a simple function defined inside this closure whose purpose is to provide outside functions access to the $cache.

Preferably, I’d go with defining the necessary functions inside this closure. However that is ultimately an implementation detail, and is up to your discretion.