Structure Javascript file for a web application

I'm working on my first web application, and as it becomes larger and larger I'm having some questions as to what the cleanest way to organize the code is. Would some more experienced developers care to share what method they use?

This is what I'm currently doing:

When the page loads, it's pretty much an html "template" with empty div's that have an id or class identifier

<div id="calendar">
</div>

...

<div class="description" name="description[0]">
</div>

etc.

and then I fill it in upon page load using Javascript functions (that will also be called later upon user actions).

All code is in a separate file, but I've found that it really ends up looking like a list of selectors, events, and the corresponding function. For instance:

$('#current-view li a').click(function() { ... });

$('#save-form-button').click(function() { ... });

$('.employee-name').focus(showAutoComplete);

$('input, textarea').a开发者_开发知识库ttr('spellcheck', false);

My whole file is basically a long list of these sorts of things. Is this the way other developer's structure a web app? I'm pretty much just teaching myself so I don't have any code for comparison.

And another thing I've wondered -- is it cleaner to do something like this:

$('#current-view li a').click(function() { *set the current tab* });

$(document).ready(function() { $('#current-view li#'+last_active_tab+' a').click(); });

or where a separate function like selectView is defined and then:

$('#current-view li a').click(selectView);

$(document).ready(function() { selectView.apply($('#current-view li#'+last_active_tab+' a')[0]); });

Thanks!

For simple situations like a couple of click handlers and some simple logic, I wouldn't deviate far from what you are doing. Once it gets more complicated, you will want to break your code down into components such that it is maintainable over time.

A component in your application should take an object oriented approach. UI components can be represented with objects, such as "Calendar" which may have functions for adding and removing calendar events. Each object should be in its own file, and can be instantiated perhaps multiple times, or perhaps as a singleton once the document is ready.

Here are some nice articles which talk about breaking your code into components, including how to achieve encapsulation and polymorphism:

For namespacing, object layout and encapsulation you could take a look at the module pattern by Justin Diaz, but Jonathan Snook is against encapsulation like this as it prevents inheritance and makes it difficult to debug since you cannot inspect the element (http://snook.ca/archives/javascript/no-love-for-module-pattern).

The best article I have found on how to create an object hierarchy with objects that are going to be instantiated many times (using the object's prototype) is by Mike Koss (http://mckoss.com/jscript/object.htm). XML.com also has a more simple introduction (http://www.xml.com/pub/a/2006/06/07/object-oriented-javascript.html).

Try taking an MVC approach to your JavaScript design with JavaScript MVC. Aside from a more simplified structure, you gain a number of other advantages by using it.