What is the best practice for grouping many jquery functions?

Question

I have a js file containing my all jquery code all, I followed 2 practices but I don't know which one is better:

First:

jQuery(document).ready(function(){
    var $ = jQuery;

    //some code here

    //another code not related to the first one

    //also another independent code

    //... and so on
});

Second:

jQuery(document).ready(function(){
    //call the functions here
    my_func_1();
    my_func_2();
    my_func_3();
    my_func_4();
});

//list of functions
function my_func_1() {
   //function code
}

function my_func_2() {
   //function code
}

function my_func_3() {
   //function code
}

function my_func_4() {
   //function code
}

the second method seems better and more organized, but sometime let's say that my_func_2() didn't find what it's looking for on the page for example $('#my-id'), the functions that follow my_func_2() never run.

I also tried another method, define all my jquery functions in one js file, and then adding the function using script tags in the html where they should be:

<script>my_func_2();</script>

so what is the best way to group jquery code ?

and should we use :

jQuery(document).ready(function(){
});

for each bunch of code ?

and thanks in advance.

Answer 1

If your code in func_2() potentially causes an error then you really should be wrapping the contents of your functions in try / catch blocks to ensure that there are no issues with the next function running.

Also, the following is also an option for multiple start-up functions whilst keeping their error scopes separate:

$(document).ready(function(e) { ... My function code 1 .... });
$(document).ready(function(e) { ... My function code 2 .... });
$(document).ready(function(e) { ... My function code 3 .... });
$(document).ready(function(e) { ... My function code 4 .... });

Answer 2

var myFunc1 = function() {};
var myFunc2 = function() {};
var myFunc3 = function() {};
var myFunc4 = function() {};

Declare your functions first. And see this shortener for jQuery.ready

jQuery(function($) {
    // in here $ === jQuery.
    myFunc1();
    myFunc2();
    myFunc3();
    myFunc4();
});

Answer 3

In general, it's good practice to keep your functions short and concise. Also, consider that splitting your code in small units helps you reusing it somewhere else.

Furthermore, you should keep in mind the aspect of testing your code. It is much easier to test small separate units of code than large chunks.

Answer 4

The point of putting function definitions inside $.ready() , is that those functions become enclosed into that context and not accessible from outside. This can be an advantage (to access enclosed variables or to prevent function misuse), but make it harder to debug.

For my experience, start declaring you functions outside (so you can easily test your code), than move these functions to $.ready() .