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

Why is it necessary to use namespaces?

Take, for 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 site usage, plus the usual vBulletin forum scripts. The figure shows how all this code from various sources is included in the body of the page. Imagine the number of possible inconsistencies with an even larger growth of connected files.

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

When you write your own script, you should put all your classes and singletons in some namespaces to prevent conflicts with the code of other developers. The term "namespace" is defined on Wikipedia ( EN , RU ) as follows: "... an abstract container that provides a context for the elements contained in it (names, terms or words) and helps to prevent the occurrence of ambiguities in the case of elements with the same name ...".
Namespaces are an important developer tool that makes it impossible to overwrite one code with another. After all, if another developer defines a variable with the same name as yours, then the previously existing definition will be overwritten. The last connected, in this case, code fragment will always prevail.
Since JavaScript is a language with functional scopes ^* , the creation of a function or / and a variable that is not “wrapped” in a function leads to their appearance in the global scope (in the context of window). To prevent this, developers put their classes in objects.
^* - probably, the author has in mind the creation of various areas of visibility, which is achievable in this language only with the help of functions (approx.

Namespaces without Ext JS

Without Ext JS, you can create a namespace as follows:

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 shortcut Ext.ns), which checks the created namespace for existence and creates it, if it does not already exist. First you need to determine the initial level of space, and then you can create various sublevels-packages. For example, create the App namespace and the form and data packages included in it :

/ * Ext.namespace will create objects with the given names if they do not 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 configuration 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. Therefore, the importance of properly organizing the collaboration of your code and third-party code is also growing. Using namespaces ensures that your code is protected from being overwritten by other code in the global scope.

From translator

Author of the original: Aaron Conran
Original article: Use Namespaces to organize your JavaScript code
This habratopik is a cross-post from my blog .

Attention! After I published a translation of the article by Joseph Sakalos (Jozef Sakalos) "Creating a complex application in Ext", he contacted me and asked to transmit the following to the users: "To the best of my knowledge of the Russian language, I have looked at the translation comments and am ready to answer any questions related to the article on 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. ”