Last Updated: 25 Jul 2023

   |   

Author: dordal

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
Last revision Both sides next revision
front-end-tech:javascript:namespacing-and-aliasing-namespaces-in-javascript [May 12, 2008 08:47 AM]
dordal 		front-end-tech:javascript:namespacing-and-aliasing-namespaces-in-javascript [Jul 11, 2023 10:16 PM]
110.249.201.18 removed
Line 1: Line 1:
 += Namespacing & Aliasing Namespaces in JavaScript =
 +
 +Javascript has an //implied global namespace//. This means any functions, variables, etc. that you create are put into the global namespace by default. If you're writing a lot of JavaScript code, it can be a good idea to put your own code into your own namespace. It's doubly important if you are going to share that code with the world. The [[http://developer.yahoo.com/yui/|Yahoo YUI]] people do this, for example. 
 +
 +To do this, create an object. As a convention, I like to start the name of the object with a $ to indicate it is a namespace. Then declare your functions inside your new namespace. You may even want to declare sub-namespaces to group functions.
 +
 +<code javascript>
 +// Make sure the $O namespace exists ($O is a random name; it can be anything)
 +var $O = window.$O || {};     
 +
 +// Create a sub-namespace for admin functions
 +$O.admin = {};               
 +
 +// create an array in the main $O namespace
 +$O.usernames = ['dordal','kate','jane'];  
 +
 +// create a function in the admin sub-namespace, that uses a variable from the main namespace.
 +$O.admin.getUsername = function(arrayIndex) {     
 + return $O.usernames[arrayIndex];
 +}
 +</code>
 +
 +**IMPORTANT:** You'll generally want to access any functions with their fully qualified name, e.g. ''$O.admin.getUsername'', not just ''getUsername()''
 +
 +== Aliasing Namespaces ==
 +You can alias other people's namespaces (and even functions) to make them easier to remember. I like to do this with the YUI stuff:
 +<code javascript>
 +var $D = YAHOO.util.Dom;
 +var $E = YAHOO.util.Event;
 +var $El = YAHOO.util.Element;
 +var $ = $D.get;
 +
 +// Now, I can access functions more simply:
 +$D.getElementsByClassName('someElementId');     // instead of YAHOO.util.Dom.getElementsByClassName()
 +
 +// Above, I've even aliased YUI's 'get' function, which means I can get any element simply by saying:
 +var myElementVar = $('someElementId');
 +</code>