Five Ways to Load jQuery Script

TL;DR: Skip to asynchronous module loading with AMD.

Yet Another…

If you want to use jQuery, your first order of business is loading the infamous jQuery library, then loading your jQuery script. If you’ve never used jQuery before, you’ll probably stare at the home page for a bit wondering where the Introductory Tutorial is. The Download tab has some minimal installation instructions but still, no cigar. The next logical tab, the API Documentation, takes you right in to the Reference Manual. Ouch! Ok, so you go back to the home page to check again. Ah, what have we here? A “How jQuery Works” link. Ok, not bad. You should be able to get your first minimal jQuery script running now that you’ve found the magic $(document).ready(function() {});.

I recently went through this experience. I wasn’t just starting to learn jQuery though. My usual trips to that site start off at api.jquery.com for nitty gritty details but this time it was different. I was working with the jQuery Validation Plugin and noticed a different loading pattern. This started me on a quest to figure out what was going on and to ultimately write this article as a quick reference to bring together the most common ways to load jQuery script.

jQuery 101 – The standard way to load jQuery

So if you were really paying attention back on jquery.com, you would have noticed that the “How jQuery Works” link took you to the jQuery Learning Center. Surely, you’d learn bootstrapping fundamentals here. Well ironically, the magic is explained back in the API Reference under the ready function. When the jQuery JavaScript file is loaded by the browser, jQuery loads itself via an anonymous function and attaches itself to the window as jQuery. We can use its ready method to load our jQuery code. The formal method of doing this, according to the documentation, is as follows:

Method #1

The jQuery object is passed in to the handler function as a parameter, so you can receive it by adding a parameter to the function, e.g.:
jQuery( document ).ready(function( another_reference_to_jquery ) { });

Of course, we don’t really need to do this because we already have the jQuery object and as you no doubt already know, the $ also references it. However, we’ll make good use of this when working in a WordPress environment because jQuery runs in no-conflict mode under WordPress. So while $ isn’t available, we can make it available in our code like this:

Method #2

Shortcuts

There are some shortcuts to the above that obscure what’s really going on but you should be familiar with them as you’re likely to see them more often than not. We’ll make three changes to come up with a super shortcut.

  1. We’ll use the $ alias for jQuery.
  2. Since the .ready() method can only be called on a jQuery object matching the current document, jQuery allows us to omit the selector.
  3. The .ready() method can also be eliminated; the jQuery framework will know to use it anyway.

Method #3

Under WordPress, this’ll work:

Method #4

Alternatives, but not recommended

You should also be aware of alternative methods that are not recommended, deprecated or to be used with caution. I’d stay clear of all these methods.

  • $().ready( handler ); – not recommended per the jQuery site, though I don’t know why.
  • $( document ).on( "ready", handler ); – this relies on the document’s ready event and is deprecated as of jQuery 1.8. It relies on your event handler being set up before the ready event is fired.
  • (function( $ ) { ... })( jQuery ); – this bypasses the ready method so you’ll need to understand the script loading process to use this properly, which usually means this will need to be done at the end of your HTML <body>. Though script loading at the end of the body is currently the recommended way, you still don’t need this method.

Asynchronous Module Definition

If you’re writing modular JavaScript with AMD, you’ll need to load your jQuery code a little differently. Basically, you need to check for the existence of AMD and load your script accordingly.

Method #5

So we have an anonymous function that is wrapped in parentheses so that it can be called immediately, passing in function( $ ) { ... } as the factory parameter. Next, we check to see if there is an object called defined that is a function and if that object also has a property called amd. This is how we check to see if the AMD loader is available. If it is, we load our script with AMD’s define function. Otherwise, we revert to the standard method.

Summary

There are various ways to load your jQuery script and I’m sure you’ll come across other methods not listed here. There is no set standard for writing modular JavaScript but AMD seems to be the current prevailing choice and works well with jQuery. Here are some useful links for more details on asynchronous modular loading.

Ryan started programming at an early age of 10 and quickly chose to focus on C-based languages throughout his software development career and on iOS app development starting with the iPhone SDK released in 2008. He now specializes in iOS app development with C, C++, Objective-C and Swift as well as React and React Native app development. When he is not programming, he's usually honing his skills in human-based languages, including Spanish, French and Mandarin Chinese. Born in Trinidad, W.I., his travels have taken him all over North America, Europe and Asia. He still has his eyes set on South America.

0 Comments

Leave a reply