Best way to organize jQuery/JavaScript code (2013)

Question

The Problem

This answer has been answered before but are old and not up to date. I have over 2000 lines of code in a single file, and as we all know this is bad practice, especially when i'm looking through code or adding new features. I want to better organize my code, for now and for the future.

I should mention that I'm building a tool (not a simple website) with lots of buttons, UI elements, drag, drops, action listeners/handlers and function in the global scope where several listeners may use the same function.

Example code

$('#button1').on('click', function(e){
    // Determined action.
    update_html();
});

... // Around 75 more of this

function update_html(){ .... }

...

More example code

Conclusion

I really need to organize this code for best use and not to repeat myself and be able to add new features and update old ones. I will be working on this by myself. Some selectors can be 100 lines of code others are 1. I have looked a bit at require.js and found it kinda repetitive, and actually writing more code than needed . I'm open to any possible solution that fit this criteria and link to resource / examples are always a plus.

Thanks.

Answer 1

I suggest that you use something like Backbone. Backbone is a RESTFUL supported javascript library. Ik makes your code cleaner and more readable and is powerful when used together with requirejs.

http://backbonejs.org/

http://requirejs.org/

Backbone isn't a real library. It is meant to give structure to your javascript code. It is able to include other libraries like jquery, jquery-ui, google-maps etc. Backbone is in my opinion the closest javascript approach to Object Oriented and Model View Controller structures.

Also regarding your workflow.. If you build your applications in PHP use the Laravel library. It'll work flawlessly with Backbone when used with the RESTfull principle. Below the link to Laravel Framework and a tutorial about building RESTfull APIs:

http://maxoffsky.com/code-blog/building-restful-api-in-laravel-start-here/

http://laravel.com/

Below is a tutorial from nettuts. Nettuts has a lot of High Quality tutorials:

http://net.tutsplus.com/tutorials/javascript-ajax/understanding-backbone-js-and-the-server/

Answer 2

Here is a simple way to split your current codebase into multiple files, using require.js. I will show you how to split your code into two files. Adding more files will be straightforward after that.

Step 1) At the top of your code, create an App object (or whatever name you prefer, like MyGame):

var App = {}

Step 2) Convert all of your top-level variables and functions to belong to the App object.

Instead of:

var selected_layer = "";

You want:

App.selected_layer = "";

Instead of:

function getModified(){
...
}

You want:

App.getModified = function() {

}

Note that at this point your code will not work until you finish the next step.

Step 3) Convert all global variable and function references to go through App.

Change stuff like:

selected_layer = "."+classes[1];

to:

App.selected_layer = "."+classes[1];

and:

getModified()

to:

App.GetModified()

Step 4) Test Your code at this stage -- it should all work. You will probably get a few errors at first because you missed something, so fix those before moving on.

Step 5) Set up requirejs. I assume you have a web page, served from a web server, whose code is in:

www/page.html

and jquery in

www/js/jquery.js

If these paths are not exactly like this the below will not work and you'll have to modify the paths.

Download requirejs and put require.js in your www/js directory.

in your page.html, delete all script tags and insert a script tag like:

<script data-main="js/main" src="js/require.js"></script>

create www/js/main.js with content:

require.config({
 "shim": {
   'jquery': { exports: '$' }
 }
})

require(['jquery', 'app']);

then put all the code you just fixed up in Steps 1-3 (whose only global variable should be App) in:

www/js/app.js

At the very top of that file, put:

require(['jquery'], function($) {

At the bottom put:

})

Then load page.html in your browser. Your app should work!

Step 6) Create another file

Here is where your work pays off, you can do this over and over.

Pull out some code from www/js/app.js that references $ and App.

e.g.

$('a').click(function() { App.foo() }

Put it in www/js/foo.js

At the very top of that file, put:

require(['jquery', 'app'], function($, App) {

At the bottom put:

})

Then change the last line of www/js/main.js to:

require(['jquery', 'app', 'foo']);

That's it! Do this every time you want to put code in its own file!