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 .... });