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:
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.initComponent.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.
[...] Conran of ExtJS just published a post today recommending using namespaces to organize your Javascript code. I have a rewrite of the Ext.namespace function that I find a little more [...]
[...] Ext JS - Use Namespaces to organize your JavaScript code - Using namespaces will ensure your JavaScript code is safe from other code overwriting it in the global namespace. [...]
That posting explores the benefits of namespacing, but goes further showing also how one can use an ‘import’ like feature to bring a long namespace into scope. For example you could write stuff like:
namespace(“com.trifork.tribook.model”);
using(com.trifork.tribook.model).run(function(m){
var rsvReader = new Ext.data.JsonReader({
root: “reservations”
}, m.Reservation);//converts JSON objects to Reservation objects
[...]Explains what namespaces are in JavaScript, how, when and why to use them.

Also explains how to use Ext.namespace, a convenience method in the Ext JS library to setup namespaces.[...]
Thanks for the topic about Namespaces! I am going to buy research papers on line or buy an essay paper with the help of the research paper writing services.
This is so cool… a couple days ago another guy on our team was trying to tell me why to use namespaces. But he just couldn’t articulate it. I’ll have to go in tomorrow and show him up now!
This is based on looking at the Extending Using initComponent tutorial and the fact that my code based on this tutorial did not work until I added the initComponent call.
This makes sense because the superclass property contains the superclass object instance rather than a function.
Thanks for the info! This will definitely help me with my gcse coursework due next week. I’m also considering the comments to be sure I get the best result.
thanks its really great artical. i have one question you have passed three argument in Ext.namespace constructor. plz post detail about passed argument or mail me.
Gerçekten harika yaz?lar yaz?yorsunuz. Web sitenizi Live.com yoluyla buldum. RSS okuyucuma ekleyece?im. Yay?nlanacak tüm içeriklerinizi büyük bir heyecanla bekleyece?im. Çok te?ekkür ederim.
I have a problem with namespaces having capital letters when generating the documentation using Extdoc.
For example App.CMS.GridPanel class was actually seen in documentation as CMS.GridPanel class from the App package, while App.cms.GridPanel class was working fine, showing the GridPanel class from the cms package contained in App package.
So, I suggest not using capital letters for intermediate packages.
International Holidays are always a superb idea when want to witness diverse cultures and lifestyles across the globe. Find your perfect international holiday from a wide range of exciting destinations across the world. From Cape Town to Amsterdam, Manila to Los Angeles, the world is yours to explore!
Ext.namespace or Ext.ns are really bad! Didn´t compile using Google Closure Compiler. I really hate to rewrite all “namespaces” with every new Ext JS release! :(
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.
There are 40 responses. Add yours.
Peter Butler
4 years agoThanks Aaron, great article, very well thought out and written and certainly food for thought that I will applying to my own work from now on.
Fran
4 years agoIt’s good to remember.
Thanks!
Gordon B
4 years agoVery interesting. I’m new to using javascript and found this article fascinating. Thank you for sharing with a newcomer of the Ext community.
ExtJS - Using Namespaces Improved at Jason Clawson
4 years ago[...] Conran of ExtJS just published a post today recommending using namespaces to organize your Javascript code. I have a rewrite of the Ext.namespace function that I find a little more [...]
Daily del.icio.us for May 25th through May 28th &#
4 years ago[...] Ext JS - Use Namespaces to organize your JavaScript code - Using namespaces will ensure your JavaScript code is safe from other code overwriting it in the global namespace. [...]
Karl Krukow
4 years agoHello,
I completely agree with your points about the value of namespacing. In fact, I explored this topic in more depth on my blog, recently: http://higher-order.blogspot.com/2008/02/designing-clientserver-web-applications.html
That posting explores the benefits of namespacing, but goes further showing also how one can use an ‘import’ like feature to bring a long namespace into scope. For example you could write stuff like:
namespace(“com.trifork.tribook.model”);
using(com.trifork.tribook.model).run(function(m){
var rsvReader = new Ext.data.JsonReader({
root: “reservations”
}, m.Reservation);//converts JSON objects to Reservation objects
m.Room = Ext.data.Record.create([...]);//detail omitted
});
This can really help you structure large JS/Ext applications.
- Karl
Web 2.0 Announcer
4 years agoUse Namespaces to organize your JavaScript code
[...]Explains what namespaces are in JavaScript, how, when and why to use them.

Also explains how to use Ext.namespace, a convenience method in the Ext JS library to setup namespaces.[...]
???????????? ???? ? JavaScript | ????????.??
4 years ago[...] ExtJS. ?????????: JavaScript?????: Spider ????: 3 ???? 2008 ?????: 0:10 [...]
web-dev.info » ????? » ????????????? ?
4 years ago[...] ??????: Use Namespaces to organize your JavaScript code « Pre-Post ???????????????, ??????????? ? [...]
TaunT
4 years agoThanks, great article
????
3 years ago???????JavaScript??????????C????????????????????????????
jQuery Howto
3 years agoGreat article. Here is an article on how to use it with the jQuery object. In other words namespasing with the jQuery http://jquery-howto.blogspot.com/2009/01/namespace-your-javascript-function-and.html
Carla Lunardoni
3 years agoThanks for the read, and that was very inciteful ; very helpful post! Add me guys, please keep me updated.
manual directory submission
3 years agoOnce again an excellent written post from you. Keep it up!
mario oyunlar?
3 years agothanks for tutorial
John
3 years agoThanks for the very useful post, it was just what I was looking for many days
sacha
3 years agoThanks for the topic about Namespaces! I am going to buy research papers on line or buy an essay paper with the help of the research paper writing services.
cinsellik
3 years agoI am grateful to you for this great content.
Gretter
3 years agowonderful article, thankyou so much for share your knowledge!!!
Asep Nugraha
3 years agohay,
i have quetion…if i’m crete javascript in ext-js not readed??
how??
Coder48
3 years agoWhat are your Terms of Service? ,
Motor Club
3 years agoi am using visual studio 2005 is it possible to manage this in visual studio 2005?
portrait from picture
2 years agoThis is so cool… a couple days ago another guy on our team was trying to tell me why to use namespaces. But he just couldn’t articulate it. I’ll have to go in tomorrow and show him up now!
Michael White
2 years agoThe line “App.form.SampleForm.superclass.call(this);” should be
“App.form.SampleForm.superclass.initComponent.call(this);”
This is based on looking at the Extending Using initComponent tutorial and the fact that my code based on this tutorial did not work until I added the initComponent call.
This makes sense because the superclass property contains the superclass object instance rather than a function.
LutherPolly
2 years agoThanks for the info! This will definitely help me with my gcse coursework due next week. I’m also considering the comments to be sure I get the best result.
Ben 10 Alien Force
2 years agoUseful share.
favourite world
2 years agothanks for sharing it, but usually name space are important for the webdesigning work,
nirala
2 years agothanks its really great artical. i have one question you have passed three argument in Ext.namespace constructor. plz post detail about passed argument or mail me.
shallyd
2 years agothis is really a great article.This article will surely help me.
Fikret Asu
2 years agoGerçekten harika yaz?lar yaz?yorsunuz. Web sitenizi Live.com yoluyla buldum. RSS okuyucuma ekleyece?im. Yay?nlanacak tüm içeriklerinizi büyük bir heyecanla bekleyece?im. Çok te?ekkür ederim.
Love Is
2 years agothank you for share your knowledge
Genel Kültür Sitesi
2 years agothat’s right, an article was true.
Congratulations.
Backlink Kazan
2 years agoTage ekle, site kay?t.
Sergiu
2 years agoI have a problem with namespaces having capital letters when generating the documentation using Extdoc.
For example App.CMS.GridPanel class was actually seen in documentation as CMS.GridPanel class from the App package, while App.cms.GridPanel class was working fine, showing the GridPanel class from the cms package contained in App package.
So, I suggest not using capital letters for intermediate packages.
Marionn
2 years agoAwesome! I will definitely take a look on it.
Thanks
Perfume Online
2 years agoWhy didn’t I think about that, great tip will get around to implementing these new methods.
International Travel Guide
2 years agoInternational Holidays are always a superb idea when want to witness diverse cultures and lifestyles across the globe. Find your perfect international holiday from a wide range of exciting destinations across the world. From Cape Town to Amsterdam, Manila to Los Angeles, the world is yours to explore!
axmetolgun
1 year agoawesome article. Thanks… i will be using this from now on…
André
1 year agoExt.namespace or Ext.ns are really bad! Didn´t compile using Google Closure Compiler. I really hate to rewrite all “namespaces” with every new Ext JS release! :(
tryecrot
9 months agoYes there should realize the opportunity to RSS commentary, quite simply, CMS is another on the blog.
Comments are Gravatar enabled. Your email address will not be shown.
Commenting is not available in this channel entry.