Geek asks and answers

Should a Javascript function be written and called inside a jQuery document, ready or outside?

I only have a question about writing functions in jQuery. When defining their own functions, should they be written inside $(function(){});or outside it? Please note that these are just sample functions and may be any. I chose the jQuery function and native JavaScript to see if there are any differences if a specific jQuery function needs to be defined inside the document?

For instance:

$(function(){
    $('select').jQueryExample();
    nativeExample();    
});

$.fn.jQueryExample = function(){
    //Do something
}

function nativeExample(a, b)
{   
    return a + b;
}

In contrast, when are they called and defined in the document ready?

$(function(){
    $('select').jQueryExample();
    nativeExample();

    $.fn.jQueryExample = function(){
        //Do something
    }

    function nativeExample(a, b)
    {   
        return a + b;
    }
});

:: EDIT ::

. , , , , , ?

, , , ajax, . ?

:

$(function(){
 //Hello, I am jQuery

});

nativeExample();

function nativeExample(a, b)
{   
    return a + b;
}

:

$(function(){

 nativeExample();

});


function nativeExample(a, b)
{   
    return a + b;
}

.

+3
2

, jQuery ready, :

  • - "" : , DOM
  • ready, , ,
  • jQuery ready , , , DOM

, HTML-, , :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page title</title>
    <!-- your CSS code -->
    <link rel="stylesheet" href="/path/to/file.css">
</head>
<body>
    <!-- your HTML elements -->

    <!-- all your scripts elements at the bottom -->

    <!-- load jQuery from Google CDN -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <!-- load all your "passive" code that defines custom or vendor jQuery plugins -->
    <script src="jquery.plugins.js"></script>

    <!-- load all your "active" code -->
    <script src="yourcode.js"></script>
</body>
</html>

jquery.plugins.js - :

// define all jQuery plugin, aka "passive" code
// "passive" means it won't affect the page
$.fn.jQueryExample = function(){
    //Do something
};

$.fn.somePlugin = function(){
    // Do something
};

// you could define vanilla JavaScript functions in a separated file if you want
function nativeExample(a, b)
{
    return a + b;
}

yourcode.js :

// place here all "active" code
// by "active" code I mean all code that will interact/alter/modify your page
$(function(){
    $('select').jQueryExample();
    nativeExample();    
});

, what would happen as opposed to having it defined outside but called inside document ready . :

<!-- basic html setup -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page title</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        // placing <script> tag in the <head> tag is considered as a bad practice
        // I use it for the example but you should not do the same in real code

        // define your functionsin the <head> tag
        function getFoo() {
            return "foo";
        }
        function getAnchor() {
            return document.getElementsByTagName('a');
        }
    </script>

    <script>
        // reference: ONE
        // call your function in the <head> tag
        console.log( "one", getFoo() ); // "foo"
        console.log( "one", getAnchor() ); // empty array
    </script>
    <script>
        // reference: TWO
        $(document).ready(function(){
            // call your function inside the jQuery 'ready' event
            console.log( "two", getFoo() ); // "foo"
            console.log( "two", getAnchor() ); // array with one element
        });
    </script>
</head>
<body>

    <a href="www.example.com">bar</a>


    <script>
        // reference: THREE
        // call your function at the end of the <body> tag
        console.log( "three", getFoo() ); // "foo"
        console.log("three",  getAnchor() ); // array with one element
    </script>

    <script>
        // reference: FOUR
        $(document).ready(function(){
            // call your function inside the jQuery 'ready' event
            console.log( "four", getFoo() ); // "foo"
            console.log( "four", getAnchor() ); // array with one element
        });
    </script>
</body>
</html>

getFoo DOM. , 4 "foo", , ( "" ).

getAnchor DOM . script "ONE" ready undefined. script "THREE" ready , . , . , , , undefined. , , . , getAnchor , DOM . , - :

one foo
one []

three foo
three [<a href=​"www.example.com">​bar​</a>​]

two foo
two [<a href=​"www.example.com">​bar​</a>​]

four foo
four [<a href=​"www.example.com">​bar​</a>​]

: , , , ; : , , , . ready .

+13

sure - , . , . , . , ; .

, $(function(){}); (document.ready).

, HTML ( DOM) , jQuery. (IMO) jQuery - JavaScript css . , 100% , .

<head>
  <link type="text/css" href="myStyle.css">
  <script type="text/javascript" src="myFunctions.js" ></script>
  <script type="text/javascript" src="myUtils.js" ></script>
  <script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
</head>

... , , .

re: -

jQuery JavaScript. AJAX , , , , , ( jQery AJAX). . " " - , jQuery .

+2

More articles:


All Articles