Best approach avoid naming conflicts for javascript functions in separate .js files?

Question

Is there a preferred approach to isolating functions in a .js file from potential conflicts with other .js files on a page due to similar names?

For example if you have a function

function AddTag(){}

in Core.js and then there is a

function AddTag(){}

in Orders.js they would conflict. How would you best structure your .js files and what naming conventions would you use to isolate them?

Thanks

Answer 1

I limit the scope of the function to that file.

(function () {
    var AddTag = function AddTag () {
    };
}());

… and sometimes make some functions in it available to the global scope:

var thisNamespace = function () {
    var AddTag = function AddTag () {
        …
    };
    var foo = function foo() {
        AddTag();
        …
    };
    var bar = function bar() {
        …
    };
    return {
        foo: foo,
        bar: bar
    }
}();

Answer 2

use encapsulation (http://www.devx.com/gethelpon/10MinuteSolution/16467 and http://nefariousdesigns.co.uk/archive/2006/05/object-oriented-javascript/)

in fileA.js

function fileA()
{
  this.function1 = function()
  {
    return 'foo';
  };

}

in fileB.js

function fileB()
{
  this.function1 = function()
  {
    return 'bar';
  };

}

Answer 3

You can use 'namespacing'. Like this

File1.js:

var Orders = {}
(function(o) {
     o.function1 = function() {}
     o.function2 = function() {}
 })(Orders);

File2.js

var Sales = {}
(function(o) {
     o.function1 = function() {}
     o.function2 = function() {}
 })(Sales);

You can invoke them like this:

Sales.function1();
Orders.function1();

In general do not use global functions/variables. Read about javascript module pattern here http://yuiblog.com/blog/2007/06/12/module-pattern/