Skip to content

Whatstyle.net

By Harmen Janssen

• Home
• About
• Archive
• Résumé
• Portfolio
• Accessibility
• Contact

Making the most of Javascript namespacing

Posted on 29 October 2008 (05:33 PM)

Comments (2)

Back? Good :)

The Javascript single namespace approach is, in my opinion, a great thing. I have used it quite a lot and have even set up a code snippet in Textmate which I use as a spring board for every single script I've written over the past months.
After reading Robert's article, I realized more people might benefit from the way I approach this design pattern. Here goes...

Automatically initializing your namespace

My script files always look a little something like this:

1. // when developing for the XYZ Corporation:
2. var XYZCorp = {
3. // modules go here
4. };
6. XYZCorp.init ();
7. Download this code: /code/making_the_most_of_javascript_namespacing1.txt

Every module used on the website resides inside the global XYZCorp object. After defining the XYZCorp object, I execute its init function. This init function looks a little something like this:

1. // when developing for the XYZ Corporation:
2. var XYZCorp = {
3. init: function () {
4. for (var i in this) {
5. if (typeof this[i].init == 'function') {
6. this[i].init ();
7. }
8. }
9. }
10. };
12. XYZCorp.init ();
13. Download this code: /code/making_the_most_of_javascript_namespacing2.txt

That's it! I loop through all members of the global XYZCorp object, and if a member contains an init method, I execute it, successfully firing up the module.

This is a very easy approach, which can be reused over and over and over again, and if you ever wish to append a new module to the site, just stuff it inside the global namespace and give it an init method. Here's an example:

1. // ...
2. myModule: {
3. init: function () {
4. this.say ('myModule initiated!');
5. },
6. say: function (msg) {
7. alert (msg);
8. }
9. },
10. // ...
11. Download this code: /code/making_the_most_of_javascript_namespacing3.txt

If you would like to use my template in Textmate, just copy the following code into a new snippet inside the Bundle Editor:

1. /**
2. * ---------------------------
3. * Client: ${1:client-name}
4. * URL: ${2:client-url}
5. * Author: ${3:author-name}
6. *
7. * ---------------------------
8. */
10. /**
11. * General namespace
12. */
13. var ${4:global-namespace} = {
14. /**
15. * Initialize all objects
16. */
17. init: function () {
18. for (var i in this) {
19. if (typeof this[i].init == 'function') {
20. this[i].init ();
21. }
22. }
23. },
24. $5
25. };
27. /**
28. * Initialize general namespace
29. */
30. $4.init ();
31. Download this code: /code/making_the_most_of_javascript_namespacing4.txt

Then assign it to a Tab Trigger and make sure you point the Scope Selector to source.js.

Back to top

Filed under Javascript

• ← previous article: Generate unique slugs in CakePHP
• → next article: Guessing font availability with Javascript

Leave a comment

RE: Making the most of Javascript namespacing

Note to spammers: rel="nofollow" will be added to links. If I consider your comment spam, your IP-address might get blocked.

Your name: * Your email (not shown): * Your website: Your comment: *

HTML not allowed. URLS will be auto-linked. Maximum length is 1250 characters.

Remember me? Copy the following string to this input field: i hate spam

I understand this is inconvenient, but the spam I'm receiving on this website is driving me nuts. Please forgive me and cope with it until I find a better solution.

Mandatory fields are marked by an asterisk (*).

Increase textarea-size Decrease textarea-size

Back to top

Preferences

• Layout:
  • High contrast
  • Regular
• Language / Taal:
  • English
• Text-size:
  • Increase text-size
  • Decrease text-size
  • Regular text-size

These settings will be saved for your convenience.