A good way to organize a small javascript application
<p>What I'm basically looking for is if there is a better way of doing this, <strong>organizing</strong> this and learning. This being the code I've pasted here. Imagine a 1800 lines long javascript file with about 50 similar bindings.</p>

<p>I have a Java EE backed REST Api for a basic one page application. I'm using jQuery, underscore for templates, jQueryUI for autocomplete and Blueimp's jQuery file upload.
The rendered JSP is 940 lines, which includes the <code>&lt;script id="template"&gt;&lt;/script&gt;</code> for templates, with about 630 DOM elements in total.</p>

<p><strong>Are about 70 events very expensive for the browser on a average computer config? Should I be rewriting all of these to delegate to a container element? It won't be growing much beyond this.</strong></p>

<p>The jsp file is rendered with most of the content on the server before loading with JSTL instead of loading and then doing ajax calls since there isn't much dynamic content constantly updating. For any significant update, I refresh the page, other wise its just DOM appends.</p>

<p>I see people saying things like 10k lines of code is considered a big application, so I'm no where close.
All my templates are inside <code>&lt;script id="tpl_xxx"&gt;&lt;/script&gt;</code> tags within the code where they're expected to be inserted itself. My assumption is its easier to see templates where they will be inserted so who ever is going to make changes to these in the future, wont have to go hunting for them.
<strong>Should I be putting them in an external .html file and then loading it on runtime?</strong></p>

<p>With the advent of all these MVC frameworks like backbone, etc. would it be worth re-writing this code to sit in one of those? Would there be significant benefits?</p>

<p>The code currently is pretty messy with a whole bunch of variables in the global scope(Cached dom elements, constants, other caches) and it basically destroys JSLint and it gives up at about 6% of the file scan. I realise this is bad, but I'm wondering if its worth the effort for code that isn't very big.
Its thoroughly tested for IE7+(client requirement) and it works fine, so this is purely a developer/maintainability/efficieny/coding practice question. I wish I could paste the code here but I can't, so even vague suggestions of what I should be aiming for would be excellent help.</p>

<p>The code is basically the following x50 with a ton of constants in the global scope for user messages, template names, cached dom elements, etc.</p>

<pre><code>$('#contact-form').submit(function(e) {
    e.preventDefault();
    var $frm = $(this);
    var $submitBtn = $frm.find('a.submit-btn');
    var $errorBox = $frm.find('div.error');
    var frmSerialized = $frm.serializeObject();
    var validStatus = validateContact(frmSerialized);

    $frm.find('input, select, textarea').bind("keydown change", function() {
        $errorBox.hide();
    });

    if (validStatus == true) {
        busyCursor('show', $submitBtn);
        var jsonReq = JSON.stringify(frmSerialized);
        $.post($frm.attr('action'), jsonReq, function(data) {
            busyCursor('hide', $submitBtn);
            if (data.status == ResponseStatus.SUCCESS) {
                $('#contact-form-div').addClass('no-display');
                $('#contact-confirm').removeClass('no-display');
            } else {
                if (data.status == ResponseStatus.ERROR) {
                    showError($errorBox, data.message);
                } else {
                    showError($errorBox, UserMessages.serverException);
                }
            }
        });
    } else {
        showError($errorBox, validStatus);
    }
});
$('#submit-contact').click(function(e) {
    e.preventDefault();
    $('#contact-form').submit();
});
</code></pre>
