One of the most common questions that beginners in JavaScript ask, is how to initialize their JS code in a web page and make sure that it adheres to suggested practices and avoid conflicts with other JS libraries or code currently running on the same web page.
Here are some of the most common patterns that JavaScript developers use to initialize their app. Most of the examples are based on plain (vanilla) JavaScript but there are also examples using jQuery. Keep in mind that you can combine these patterns together to achieve optimal results.
Let us know about your feedback, practices and suggestions in the comments below.
(1) Initializing our Web App using (vanilla/no libraries) JavaScript
window.addEventListener('DOMContentLoaded', function(event){
// At this point our DOM has been loaded and parsed and we are ready to work with it through the JavaScript DOM API, e.g. document.querySelector(), etc. This is the most common pattern used to initialize web apps. In case you need other resources (images, links, etc.) to be ready, checkout the 2nd pattern below.
});(2) Initializing our Web App using (vanilla/no libraries) JavaScript
window.addEventListener('load', function(event){
// At this point our DOM has been loaded and parsed and all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading and we are ready to access them through the JavaScript APIs.
});(3) Using an IIFE (Immediately Invoked Function Expression) to initialize our (vanilla) JavaScript
;(function(){
// Our code is placed here, and everything that we declare (functions, variables, etc.) live in the function's local scope and therefore we are not 'polluting' the global scope with any variables and prevent conflicts with other similarly named variables, functions, etc.
// Remember that the rule is: "Minimize the use of global variables".
// At this point, we can even use one of the patterns above to wait for the DOM or all the resources to be loaded, e.g. window.addEventListener( "DOMContentLoaded", callback ), etc.
// NOTE: The ; semicolon at the beginning of the IIFE is placed to avoid conflicts with previous JavaScript code.
}());(4) Initializing our App using jQuery
jQuery(function($){
// At this point our DOM has been loaded and parsed and we are ready to work with it through the $ jQuery alias!
});
// (4.1) Initializing our App using jQuery (This pattern does exactly what the above example does)
jQuery(document).ready(function($) {
// At this point our DOM has been loaded and parsed and we are ready to work with it through the $ jQuery alias!
});(5) Wait for all the resources to load and run our App. Same as #2 but using jQuery syntax
// (5) Wait for all the resources to load and run our App. Same as #2 but using jQuery syntax
jQuery( window ).load(function() {
// At this point our DOM and all the page resources have been loaded and we are ready to work with it through the $ jQuery alias!
});
Recent Comments