Should a Javascript function be written and called inside jQuery document ready or outside?
I just have a question about writing functions in jQuery. When defining your own functions should they be written inside $(function(){}); or outside it? Please note that these are just example functions and could be anything. I chose a jQuery function and a native JavaScript to see if there are any differences i.e. should a self-defined jQuery function be defined inside document ready?
For example:
$(function(){
$('select').jQueryExample();
nativeExample();
});
$.fn.jQueryExample = function(){
//Do something
}
function nativeExample(a, b)
{
return a + b;
}
As opposed to this where they are called AND defined in document ready?
$(function(){
$('select').jQueryExample();
nativeExample();
$.fn.jQueryExample = function(){
//Do something
}
function nativeExample(a, b)
{
return a + b;
}
});
::EDIT::
One extra question. If a function is defined outside document ready and also called outside document ready, what would happen as opposed to having it defined outside but called inside document ready?
I am asking this because I have a function defined outside the document ready scope and this function is an ajax call which gets new messages on page load. Should it be called outside or inside document ready?
For example:
$(function(){
//Hello, I am jQuery
});
nativeExample();
function nativeExample(a, b)
{
return a + b;
}
as opposed to:
$(function(){
nativeExample();
});
function nativeExample(a, b)
{
return a + b;
}
Thanks in advance for replying.
Answer
I think you should defined your functions outside the jQuery ready method, because:
- the function definition code is a "passive" code: it doesn't need the DOM to be runt
- if you want to use your function before the
readyevent, you can't do it if the function is defined inside the event, - the jQuery
readymethod should be used only when it's really needed, it means when you *really have to wait for the DOM to be ready
For information, here is a simplified but common HTML page pattern that I use every time, it works pretty well:
<!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>
The jquery.plugins.js file could contains something like you provided:
// 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;
}
The file yourcode.js could be:
// place here all "active" code
// by "active" code I mean all code that will interact/alter/modify your page
$(function(){
$('select').jQueryExample();
nativeExample();
});
About your edit, your question what would happen as opposed to having it defined outside but called inside document ready doesn't have a universal answer. Look at this example:
<!-- 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>
The function getFoo doesn't need the DOM to work. So, its 4 calls always returns 'foo', so the function works wherever and whenever she was called (inside or outside the 'ready' event).
The function getAnchor query the DOM and return a collection of the anchor tag in the page. The first call, in the script "ONE", is outside the ready event and returns undefined. The third call, in the script "THREE", is also outside the ready event but it logs an array of anchor elements in the console. This means that, the placement of the function call can alter the function behavior. In the first call, obviously the anchor tag was not present in the page, and that's why the function returns undefined. Then, the second call and fourth call, placed at the beginning and at the end of the page, both logs an array. In this case, the placement of the function call doesn't alter the function behavior, because the function getAnchor is actually called after all the DOM elements have been loaded. If you look at your console logs, you'l see something like this:
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>]
Look at the log order: one, three, two, four; which is different from the source order: one, two, three, four. Functions is the ready have been delayed until the page loading is complete.