Using Multiple jQuery Scripts
-
Hi I'm new to jQuery and would like to clear up a few questions regarding the use of multiple script files on the same web page. Suppose I have a large jQuery script file and I want to break it up so that I have smaller script files. Before I break up my large file, everything is done inside of '$(document).ready ()'. My question is if I take some of the code from the large file and put them in other files, do I need to put them in document ready as well in the new files? Please explain why or why not.
-
Hi I'm new to jQuery and would like to clear up a few questions regarding the use of multiple script files on the same web page. Suppose I have a large jQuery script file and I want to break it up so that I have smaller script files. Before I break up my large file, everything is done inside of '$(document).ready ()'. My question is if I take some of the code from the large file and put them in other files, do I need to put them in document ready as well in the new files? Please explain why or why not.
You should understand why you need $( document ).ready()[^]. Outside of this ready() method, a script has to be placed after those html elements that it seeks to manipulate, try this:
<script>
$("p").css("color", "red")
</script>
<p>What color will I become?</p>
<script>
$("p").css("color", "green")
</script>It will never become red, as the p tag has not being rendered yet when the first script is read. So it depends on the context of your script. If you really want to break the script into several, you can wrap them in separate ready() functions.
Peter Leow http://www.peterleowblog.com/ https://www.amazon.com/author/peterleow
-
You should understand why you need $( document ).ready()[^]. Outside of this ready() method, a script has to be placed after those html elements that it seeks to manipulate, try this:
<script>
$("p").css("color", "red")
</script>
<p>What color will I become?</p>
<script>
$("p").css("color", "green")
</script>It will never become red, as the p tag has not being rendered yet when the first script is read. So it depends on the context of your script. If you really want to break the script into several, you can wrap them in separate ready() functions.
Peter Leow http://www.peterleowblog.com/ https://www.amazon.com/author/peterleow
Hi, thanks for replying. If I understand you correctly, you are saying that I can break up my large jQuery file into smaller ones as long as I put document ready inside of the new files, then put my code from the large file into document ready. Am I correct?
-
Hi, thanks for replying. If I understand you correctly, you are saying that I can break up my large jQuery file into smaller ones as long as I put document ready inside of the new files, then put my code from the large file into document ready. Am I correct?
Say you have an external js file called external.js that contains this code:
$( document ).ready(function() {
// other code
console.log( "script 1!" );
});
$( document ).ready(function() {
// other code
console.log( "script 2!" );
});In your html file, place the link to this external.js after the jquery library like this: <script src="jquerylibrary.js"></script> <script src="external.js"></script>
Peter Leow http://www.peterleowblog.com/ https://www.amazon.com/author/peterleow
-
Say you have an external js file called external.js that contains this code:
$( document ).ready(function() {
// other code
console.log( "script 1!" );
});
$( document ).ready(function() {
// other code
console.log( "script 2!" );
});In your html file, place the link to this external.js after the jquery library like this: <script src="jquerylibrary.js"></script> <script src="external.js"></script>
Peter Leow http://www.peterleowblog.com/ https://www.amazon.com/author/peterleow
Hi, I guess I'm asking about best practices when breaking up script files into multiple external files. Suppose I want to do something like below where I only call the functions which reside in other files
// Inside File1
$(document).ready(function(){
function1();
function2();
function3();
function4();
function5();
});The definitions of the functions being called inside of File1 are in other files. Is this a common practice? If it is not how most people keep their files small, please suggest how it is done by most people.
-
Hi, I guess I'm asking about best practices when breaking up script files into multiple external files. Suppose I want to do something like below where I only call the functions which reside in other files
// Inside File1
$(document).ready(function(){
function1();
function2();
function3();
function4();
function5();
});The definitions of the functions being called inside of File1 are in other files. Is this a common practice? If it is not how most people keep their files small, please suggest how it is done by most people.
Based on your clarification, a function is a block of code that will only be executed when it is called, as such, there is no need to place a function inside the ready() method. You may put functions into multiple files and link them to your html file.
Peter Leow http://www.peterleowblog.com/ https://www.amazon.com/author/peterleow
-
Hi, I guess I'm asking about best practices when breaking up script files into multiple external files. Suppose I want to do something like below where I only call the functions which reside in other files
// Inside File1
$(document).ready(function(){
function1();
function2();
function3();
function4();
function5();
});The definitions of the functions being called inside of File1 are in other files. Is this a common practice? If it is not how most people keep their files small, please suggest how it is done by most people.
You're looking for a technology called Asynchronous Module definitions (AMD). In general, breaking down actual required JavaScript into separate files that are loaded into the browser is an anti-pattern, because it creates more overhead and load times. JS files are loaded synchronously by default, so a file must be fully loaded before another is even requested. A common tactic is to bundle and minify (uglify) multiple files into a single one for performance gain. If you have optional components that may or may not be needed in a specific execution workflow, you can separate that functionality out and call it at runtime with a module loader that uses AMD like requirejs. Since you're using jQuery, have a look at How to use RequireJS with jQuery[^]
"There are three kinds of lies: lies, damned lies and statistics." - Benjamin Disraeli