I normally put my JavaScript function/classes/other things in namespaces. Namespacing your JavaScript is good, it avoids conflicts between scripts on the page and keeps the global namespace clean. I could go into more detail, but luckily it has been done for me.
Declaring namespaces, and checking they exist before using them is a bit of a pain. You might find yourself doing something like:
if(!window.com) window.com = {};
if(!com.mycompany) com.mycompany = {};
if(!com.mycompany.mypackage) com.mycompany.mypackage = {};
…and then add things to it like:
com.mycompany.mypackage.myfunction = function() { return 138; };
To make things worse, if your webpage includes a different script that uses slightly different namespace, say "com.mycompany.mypackage2" you’ll have to check again that the objects "com" and "com.mycompany" already exist.
The following function allows you to use a namespace, without having to manually go through the throws of checking each "space" exists and creating an empty object for each level.
/**
* I declare a namespace if it doesn't already exist.
*
* @param {String} ns The namespace to create/use
* @param {Object} parent (Optional) The parent object onto which this namespace will be attached.
* @return True if the namespace was created successfully.
* @type Boolean
*/
function namespace(ns, parent) {
if(!parent) {
parent = window;
} else {
// Parent must be an object
if(typeof(parent) != 'object') {
return false;
}
}
var names = ns.split('.');
if(!names.length) {
return true;
}
var name = names[0];
if(!parent[name]) {
parent[name] = {};
}
if(names.length > 1) {
names.shift();
return namespace(names.join('.'), parent[name]);
}
return true;
}
…and is used like so:
namespace('com.mycompany.mypackage');
com.mycompany.mypackage.myfunction = function() { return 138; };