an article by Dumitru
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?
In our example we see managed some tasks which are differenced by received and created tasks. It is important that code in received_tasks.js and created_tasks.js can have the same objects, variables and functions identifiers – this can create some real problems in big applications.
When looking at Firebug’s Dom tab we can see that hundreds of variables have been created in the window when including different files.
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 [...] For many programming languages, a namespace is a context for identifiers. In an operating system, an example of namespace is a directory.”
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 which will setup namespaces for you, including checking if the namespace already exists.
The ExtJS API defines Ext.namespace:
Ext.namespace( String namespace1, String namespace2, String etc ) : void
Ext.namespace('Company', 'Company.data');
Company.Widget = function() { ... }
Company.data.CustomStore = function(config) { ... }
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
};
}();
Here we see a implementation of 3 namespaces: Admin, CV, Candidates. As we see the objects and functions are very well structured, and no collision is expected.
Summary
As the client-side JavaScript included in web applications gets larger and more advanced. Using namespaces will ensure your JavaScript code is safe from other code overwriting it in the global namespace.
