proper sequence of functions when coding in js

Question

I am using jquery and am really frustrated at how I write my code. I started coding in JS and Jquery a few months ago and my code looked like this:

$(document).ready(function(){

$(function(){// a function that applies a plugin to an element});

$(function(){// another function that applies a plugin to an element});

$(function(){// and another function that applies a plugin to an element});

$(function(){// yet another function that applies a plugin to an element});
});

$(function(){//functions applied to certain elements that does not require to be initially loaded})

basically what I did before was put everything inside the $(document).ready

and here's how I am coding now

function a(){//a function that applies plugin to an element}

function b() {// another function}

$(document.ready(function(){a(); b();});

$(function(){//functions applied to certain elements that does not require to be initially loaded})

a little improvement, yet I am not satisfied. What if I want to call certain functions for a certain page only? are there ways to accomplish this? and I am really disgusted at how my $(document) gets really huge when I am using a lot of plugins.

How do you go about writing your functions in jquery?

Answer 1

You might try to split your functions into multiple files and include just those which are needed for each page. In each file would be separate $(document).ready(function(){ ... });

Answer 2

I recommend having one Javascript file for the whole site. That file should only contain functions:

function a() { ... }
function b() { ... }

The reason is that with one file it gets cached once (if done right) and that's it. And then using inline JS on each page I put:

$(function() {
  a();
  b();
});

I haven't really found a need to have multiple ready() calls.

The reason for this is efficiency. You don't want to be executing unnecessary Javascript and what's why the external JS file actually does nothing but include functions that you can call. Then each page only calls what it needs. Plus you can easily find it by just looking at one place (the page).

Answer 3

In my apps I tend to write all the functions for a given section of the app in within a closure to avoid namespace issues.

Something like this:

(function($) {
    function a() {
       // stuff
    }
    function b() {
       // stuff
    }
    // ...
    $(function() {
        // invoke dom ready setup methods here
    });
})(jQuery);

This has a bonus of letting my code be usable in other pages that may be using prototype or other js libraries (in large webapp with many devs like the one i work on, it's important to keep the namespace clean).

I generally only have one ready call per file. That call is responsible for setting up all the related things in that file. This allows each file to sort've act as a "library": developers that want to use the functionality just have to include it on the page and add the appropriate markup and the functionality will set itself up.

I admit I copied this layout from the way several jQuery plugins are built.

I like cletus' suggestion of a single file, but only when the app isn't too large. It starts to be difficult to maintain if you have too many things within a single file.

Answer 4

I'd suggest at least namespacing things to ensure you don't pollute the global namespace. For example:

var myNameSpace = {
a: function(){//a function that applies plugin to an element},
b: function() {// another function}
};

$(document).ready(function() {

myNameSpace.a();

});

The main benefit is that you're able to compartmentalize your code into logical units of work which focus on specific tasks. It'll make code organization substantially easier.

Rebecca Murphey did a wonderful write-up on this topic which you can read here: http://bit.ly/6og36U

You can also separate your JS into their own unique files and write a routine to leverage jQuery's getScript() method to load the necessary files on-demand (http://docs.jquery.com/Ajax/jQuery.getScript). The key would be to determine the dependencies in your script and load the .js file at the appropriate time.

Answer 5

I think there are two ways of archieving this:

A: split JavaScript into serveral files. (One library file and each with the side - specific code which also call the ready function.)

B: make one file with all the JavaScript and then some inline JavaScript file like this:

var tasksToRun = [ function_a, function_b,...]

In your library JavaScript you check for the global var and execute each function referenced in the array.