Ext

In today’s modern web applications it is typical to include many libraries, widgets and snippets of code from many different sources. You must be mindful that other developers may be interacting with your code simply by both sets of code being included on the same page. It is not a safe assumption that you have the entire global namespace at your disposal.

Why use namespaces?

The Ext JS forums are an example which utilizes 3 distinctly different sets of scripts from different organizations. We use Ext JS for enhancements, Google Analytics for tracking site usage and the native vBulletin scripts. You can see how all of this code from different sources has been included in the same page. You can also imagine how that there is the potential for a collision as more and more scripts are added.

When looking at Firebug’s Dom tab we can see that hundreds of variables have been created in the window when including these files. Ext consolidates all of its classes into a single namespace of Ext and further organizes its classes into various packages.

When developing your own scripts you should place all of your classes and singletons into namespaces to avoid collisions with other developers code. A namespace as defined by Wikipedia is “an abstract container providing context for the items (names, or technical terms, or words) it holds and allowing disambiguation of items having the same name”

Namespacing is important for developers in order to organize their code and ensure that their code is not overwritten when loaded in the JavaScript interpreter. If another developer defines a variable with the same name your existing definition will be overwritten. The last person to have their code included wins.

Because JavaScript is a functionally scoped language creating a function and/or variable which is not wrapped in another function will result in that variable being created in the global scope (window). To combat this, developers place their classes in Objects.

Namespaces without Ext JS

Without using Ext you could setup namespaces in the following way:

if (!App) App = {};
if (!App.form) App.form = {};
if (!App.data) App.data = {};

Ext.namespace

Ext provides the Ext.namespace method (or the shorthand Ext.ns) which will setup namespaces for you, including checking if the namespace already exists. First define the higher level namespace, then you can define various packages within your namespace. For example to setup a namespace of App and the packages form and data:

/* Ext.namespace will create these objects if they don't already exist */
Ext.namespace('App', 'App.form', 'App.data');
 
/* Now you can define a new class such as SampleForm inside of the App.form package */
App.form.SampleForm = Ext.extend(Ext.form.FormPanel, {
    initComponent: function() {
        /*component configuration code here! */
       App.form.SampleForm.superclass.call(this);
   }
});
 
/* Define MySingleton inside of the App.data package */
App.data.MySingleton = function() {
    return {
        sampleStaticMethod: Ext.emptyFn
    };
}();

Summary

As the client-side JavaScript included in web applications gets larger and more advanced, organization of 3rd party code and your own code becomes increasingly important. Using namespaces will ensure your JavaScript code is safe from other code overwriting it in the global namespace.

This entry was posted on Wednesday, May 28th, 2008 at 1:07 pm and is filed under Ext Tips. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.