Tips on managing large amounts of code?

Question

My project seems to be getting bigger and bigger and some of my classes are thousands of lines long, it's too hard to search through them every time I want to make changes.

I find javascript is not as easy to lay out cleanly as some other programming languages. So when the classes get to be a few thousand lines, I have troubles reading it.

I've tried splitting it into multiple files, but then you're breaking classes apart which doesn't seem right. For example, if every method in a class uses a global variable you would only be able to find the global variable in one of the files for that class.

Also, if I want to use the javascript code from 100 different .js files, I end up with something like this...

<script type="text/javascript" src="Scripts/classes/Node.js"></script>
<script type="text/javascript" src="Scripts/classes/Queue.js"></script>
<script type="text/javascript" src="Scripts/classes/DblyLinkedList.js"></script>
  .... 97 more lines like this

Although I figured there may be something where I can do...

<script type="text/javascript" src="Scripts/.../*.js"></script>

or something similar... is that right?

Anyone have any tips on managing code as it reaches it's extremes?

Tips on cleaning up javascript code would also be helpful.

Answer 1

Well, a good editor is always usefull, as it will give you shortcuts to all your functions defined in the files.

Second, make sure you're not looking at a wall of code. Indentation, spaces and newlines are a good help.

Be extremely strict in your indentation. 2 spaces is 2 spaces, always(or whatever amount you use)

if you put your { under a declaration, then always put it there, without exception)

Clear rules about how you want your text aligned will help a lot.

And I don't know about that last thing... I'm not sure browsers can work with that kind of wildcard.

Answer 2

<script type="text/javascript" src="Scripts/.../*.js"></script>

will not work, and besides, you end up with an interesting problem when splitting up dependent files, as you can't guarantee they will all be downloaded in the order you expected.

Unfortunately, your best bet is really a good IDE that can produce an outline for easy navigation. I use Eclipse with Spket and/or Aptana, but whatever makes it easier to manage is what you're looking for.

edit: one more quick note about splitting js into multiple files. Avoid it where possible. Each separate file means a separate http request. Reducing the number of requests required can make a massive difference in site performance.

Answer 3

Breaking up JS into separate files has some major drawbacks, chiefly that you're forcing web browsers to make a separate request for each file.

Have you taken a look at leaving all of your files separated out, but making a single-file "bundle" for each project containing only the necessary files? This can be automated via a script.

This SitePoint article might help you get started: http://www.sitepoint.com/blogs/2007/04/10/faster-page-loads-bundle-your-css-and-javascript/

Answer 4

• (a) keep your classes shorter [even though that will mean yet more files],
• (b) keep them "full-text indexed" for speed of search and operation (not aware of any IDE specifically supporting Javascript this way, but strong editors like Emacs, Vim, Eclipse, or TextMate sure do),
• (c) group them up hierarchically so your pages can have just a few <script> tags for "upper layer" scripts each of which just pulls in several of the "lower layer" ones.

Oh, and, of course, religiously keep everything under a good change control system (SVN, Mercurial, or the like), otherwise your life will be surely very very miserable:-(.

Answer 5

You might want to group related classes together into packages, where each package is a single file. Check out YSlow for best practices on performance.

Answer 6

AvatarKava's advice is sound. Work in separate files and concatenate them at build time. However, I would also recommend you take a look at your class structure. A class "thousands of lines long" doesn't sound too healthy. Are you sure you classes aren't taking on too much responsibility? Are there not tasks that can be shipped out to other single responsibility classes? This would help improve the clarity in your code far more than cunning ways of splitting files.

Answer 7

Same advice applies to most languages...

Avoid globals wherever possible. You can often get the desired behavior by wrapping a static variable, or using objects.

if (foo == undefined)
   var foo

Use naming conventions where possible so you can track things down just by reading the variable or function names. Either that or get good with grep, or get an IDE with intellisense.

Split things into directories. Having 100 files in a directory called "classes" is not helpful. As an example, you may have a collections directory for queues, lists, trees, etc. If you've got a lot you may even have a tree subdir, or a list subdir, etc. You can then also create a global include for that directory... simply a file called collections.js that includes all of the files in that directory. Of course you have to be careful about splitting things up well, since you don't want to be including files you'll never use.