How to stucture JavaScript Code in Large Applications

Question

I work on an application which now has a rather large JavaScript code base. It's got code we have written and files for the various libraries (jQuery) and plug-in being used.

This has grown to be an awful mess. Repeated methods, no clear structure and so on.

Are there any good guidelines on using JavaScript within large applications?

Edit: To answer some questions:

1) I am looking for recommendations on how to structure both code and the files 2) It's being used to add functionality to existing pages and to make calls to the server.

Answer 1

In our web application, we create JS files for each page and include it in the corresponding aspx page.

When we find any method being used in more number of pages, we add the method to default.js and include the same in need aspx pages.

Answer 2

First of all, Pro JavaScript Design Patterns is a must. Highly recommended. We had the exact problem here. Many different pages required different functionality, code was just a big mess.

For us, we ended up using singleton pattern, all functionality to a specific page ended up inside an object. Object was called from a module which determined what type of functionality was required and executed that object. Any shared functionality was also placed inside that module.

But design patterns are though, there is no single right answer. Our solution worked well for us, reduced the amount of code with 15%. Anyhow, hope this answer has been of any help. Good luck.

Answer 3

Learn from the bigger OO languages, use namespacing in code and folder structure.

For example, suppose you have the following folder structure:

• util/
  • Text.js
  • Template.js
• employees/
  • EmployeeEditor.js

You would define in each file the necessary namespaces:

if (!com) com = {};
if (!com.example) com.example = {};
if (!com.example.util) com.example.util = {};
com.example.util.Text = {
  rot13: function(text) { ... }
} 

To use, either use the full notation: com.example.util.Text.rot13, or define a temporary shortcut (var utilText = com.example.util.Text), somewhat like how you would do an "import" in other languages.

Namespacing helps you organize your code because you have to think about where things belong. It also helps you find code again when you need it. The cherry on top is that collisions with third party code are reduced to zero (provided you choose your top-level namespace correctly).

For actually integrating this into pages, use a combination of the following approaches:

• Build scripts for packaging up files
  Concatenate the various files that go together (e.g. util.js contains all the files in the util folder)
• On-demand loader classes
  Loading on-demand with a simple bootstrap class requires some thought on how you organize code, but it's worthwhile to be able to split the payload. I've gotten used to automatically designing my code so it can initialize itself after a loader callback, so writing code for on-demand loading has become second nature.

By the way, I shouldn't need to say this, but I will anyway: put all code into separate js files, even if it's specific to a page. It makes organizing your code much easier. If necessary, you can always use build scripts to combine files again for performance.