JavaScript: global scope

Question

Nowdays, i create a .js file with a lot of functions and then I link it to my html pages. That's working but I want to know what's the best way (good practices) to insert js in my pages and avoid conflicts with scope... Thank you.

Solution 1

You could wrap them in an anonymous function like:

(function(){ /* */ })();

However, if you need to re-use all of the javascript functions you've written elsewhere (in other scripts), you're better off creating a single global object on which they can be accessed. Either like:

var mySingleGlobalObject={};
mySingleGlobalObject.someVariable='a string value';
mySingleGlobalObject.someMethod=function(par1, par2){ /* */ };

or the alternative, shorter syntax (which does the same thing):

var mySingleGlobalObject={
  someVariable:'a string value',
  someMethod:function(par1, par2){ /* */ }
};

This can then be accessed later from other scripts like:

mySingleGlobalObject.someMethod('jack', 'jill');

Solution 2

A simple idea is to use one object that represents your namespace:

var NameSpace = {
    Person : function(name, age) {

    }
};

var jim= new NameSpace.Person("Jim", 30);

Solution 3

The best way is to create a new scope and execute your code there.

(function(){
  //code here
})();

This is best used when the global scope is accessed at a minimum.

Basically, this defines an anonymous function, gives it a new scope, and calls it.

Solution 4

It's perhaps not the BEST way, but a lot of PHP systems (I'm looking at you, Drupal) take the name of their particular plugin and prepend it to all their function names. You could do something similar, adding the name of your capability to your function names - "mything_do_action()"

Alternately, you could take a more "OO" approach, and create an object that encapsulates your capability, and add all your functions as member functions on IT. That way, there's only one thing in global scope to worry about.

View more solutions

Comments

[thomas]

I'm trying to learn OO with JavaScript but it's hard to me. There are a lot of syntax to make a simple "class" or anything else in JavaScript :) Thank you.

[thomas]

What the "()" means? Any link about that? And what about window.onload? Where should i put that? Is there something bootstrap-like practice in JavaScript? Thank you.

[lucideer]

Personally I think it's easier to understand an anonymous function if you see it all on one line. Unfortunately I've got no line-breaks in comments, but if you think of it this way: it's like executing an already existing function, but instead of using the name of the function, you put the function definition in brackets.

[lucideer]

You can actually do this for example: (function(param){ /* */ })( 'param value' );

[tcooc]

@thomas: found this site that has a nice description: helephant.com/2008/08/javascript-anonymous-functions "Provides scope for variables". And where do you want to put window.onload?

[endavid]

I think it's safer to always wrap your code with (function(){ /* */ })(); just in case you include a script that it's badly terminated. Then, I guess you could add your mySingleGlobalObject to "document" for instance, to share it with other scripts.