views:

48

answers:

4

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.

A: 

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.

Curtis
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
+1  A: 

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. New variables will be inside the scope, this will become the function object, and you can access the global scope with window.

digitalFresh
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.
thomas
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' );
lucideer
@thomas: found this site that has a nice description: http://helephant.com/2008/08/javascript-anonymous-functions/ "Provides scope for variables". And where do you want to put `window.onload`?
digitalFresh
digitalFresh, thank you... i will read that...
thomas
+2  A: 

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);
ChaosPandion
+1  A: 

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');
lucideer