Question

I’m working on a web application that includes different JavaScript files, depending on where I am in the app. For instance, I have a display.js for each page, each of which has an “init()” function that is called as soon as the page is loaded.

This works well for the webapp, but in my QUnit tests, where all script files are included from a single index.html, functions of the same names override each other.

How are such problems best handled? One test index.html file per page creates lots of boilerplate code and makes it non-trivial to execute all test cases. That’s why I decided to name each and every function distinctively, e.g. “initFrontPage()” instead of “init()”. This, however, makes the application code a bit weird: Not only do I have to include the right file, I also have to call the right functions in it. Is there a better way?

Answer 1

The solution is to use namespaces:

In foo/display.js:

window.foo = {};
foo.init = function () { ... };

In bar/display.js:

window.bar = {};
bar.init = function () { ... };

Then, in the page that uses bar/display.js’s init method:

(function (display) {
    display.init();
}(bar));

It would be a good idea to wrap your display.js code in an IIFE as well.