Currently, most web applications consist of a large number of libraries, widgets and snippets from many, many sources. It should be remembered that other developers' code can interact with your code in case both of them are connected on the same page. And if you operate with global variables, then it is completely unsafe.

Why use namespaces?

Let us take, as an example, the Ext JS forum, which uses three completely different sets of scripts created by different manufacturers: Ext JS is used by us to expand the functionality, Google Analytics to track the use of the site, plus the usual vBulletin forum scripts. The figure shows how all this code from various sources is included in the page body. Imagine the number of possible inconsistencies with even greater growth of the included files.

If you look at the Firebug debugger DOM tab, you can see the hundreds of window context variables created by connected scripts. At the same time, Ext JS combines all of its classes in a single Ext namespace and then organizes them as separate packages.

When you write your own script, you should put all your classes and singletones in some namespaces to prevent conflicts with other developers' code. The term "namespace" is defined in Wikipedia ( EN , RU ) as follows: "... an abstract container provides context for the elements it contains (names, terms or words) and allows to prevent ambiguities in the case of the existence of elements with the same name ...".
Namespaces are an important developer tool to ensure that one code cannot be rewritten by another. After all, if another developer defines a variable with the same name as yours, then the definition that existed before will be overwritten. The last connected, in this case, code snippet will always prevail.
Since JavaScript is a language with functional scopes ^* , creating a function or / and a variable that is not “wrapped” in a function results in their appearance in the global scope (in the context of a window). To prevent this, developers place their classes on objects.
^* - the author probably means creating various scopes that can be achieved in this language only with the help of functions.

Namespaces without Ext JS

Without Ext JS, you can create a namespace like this:

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

Ext.namespace

The Ext object provides the Ext.namespace method (or its Ext.ns shortcut), which checks the created namespace for existence and creates it if it does not already exist. You must first determine the initial level of space, and then you can create different sublevels-packages. For example, create an App namespace and its form and data packages:

 / * Ext.namespace will create objects with the passed names if they do not already exist * /
 Ext.namespace ('App', 'App.form', 'App.data');
 
 / * Now you can define a new class, for example, SampleForm, inside the App.form package * /
 App.form.SampleForm = Ext.extend (Ext.form.FormPanel, {
     initComponent: function () {
         / * component setting code * /
        App.form.SampleForm.superclass.call (this);
    }
 });
 
 / * Definition of MySingleton inside the App.data package * /
 App.data.MySingleton = function () {
     return {
         sampleStaticMethod: Ext.emptyFn
     };
 } ();

In conclusion

The JavaScript code used in client-side web applications is becoming more and more complex and complex. Therefore, the importance of proper collaboration between your code and third-party code also grows. Using namespaces ensures that your code is protected from being overwritten by other code in the global scope.

From translator

Original author: Aaron Conran
Original article: Use Namespaces to organize your JavaScript code
This habratopic is a cross-post from my blog .

Attention! After I published a translation of the article by Jozef Sakalos “Creating a complex application in Ext”, he contacted me and asked me to tell the habrap users the following: “I read the comments on the translation to the best of my knowledge of the Russian language and are ready to answer any questions related to the article in my blog in the relevant topic . The only request is to formulate the questions in Russian briefly, please, so that it will be easier for me to understand them. ”