tips for working on a large javascript project

I have some exp开发者_运维技巧erience with JavaScript - but mainly with some small stuff, I never did anything really big in Javascript previously.

Right now, however, I'm doing quite a large javascript-related project, a jquery-powered frontend that communicates with the server-side backend by sending/receiving JSON via Ajax.

I'm wondering if you could provide some useful information on how to deal with large javascript projects - are there any helpful tools/libaries/good practices?

Thanks in advance.

---

My one big tip would modularize

In JavaScript, it is very easy for variables to clobber other variables. In order to avoid this, modularization is a must. There are several ways to take advantage of JavaScripts scope rules to minimize the possibility of variable conflicts.

var myProject = {};

myProject.form = function(p_name, p_method, p_action)
{
    var name = p_name,
        method = p_method,
        action = p_action;
    var addInput = function(p_input)
    {
        // etc...
    }

    return {
        addInput: addInput,
        name: name
    };
}

myProject.input = function(p_name, p_type, p_value)
{
    var name, method, value;
    var setValue = function(p_value)
    {
        value = p_value;
        return true;
    }

    return {
        setValue: setValue,
        name: name
    };
}

// etc...

If you're careful about using var, and keep track of your function scope, then you have only one global variable - myProject.

In order to get a new form Object, you'd simply do the following: var myForm = myProject.form('form1', 'post', 'post.php').

---

You may want to check out Backbone.js

Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

---

Grigory ,

Even i moved from a backend to UI few months back only follow this approach

1. read all the concepts of jquery either from google or through some book or through jquery documentation.
2. follow some of the jquery best practices http://psdcollector.blogspot.com/2010/03/77-best-jquery-tips-i-have-ever-read.html
3. write utitlity functions for all repeated code like getcookie ,subsstrings etc etc
4. keep getting your code reviewed by experienced person who can guide you
5. post to stackoverflow if you get stuck anywhere.
6. as it is big project divide into mutiple files and use proper naming convintion.

please let me know if you need anything else

---

jQuery and YUI 3: A Tale of Two JavaScript Libraries is a nice comparison of them in the context of a complex application, and gives useful hints for jQuery programmers as well.

---

The best advice is to keep your code segmented in different files as "classes". I personally hate working in a file that's more than a few hundred lines long.

Then assemble and minify your code with one of the tools on the web, like Shrinksafe or Google Closure Compiler

Note that Dojo, YUI, and Ext are all designed to handle large Ajax applications. You'll struggle a bit with jQuery. But I'm guessing this app isn't all that big and you should be fine.

---

Have you consider checking out MooTools?

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.