Injecting a private jQuery, Part 2: Plugins and noConflict()

This is my continuing blog about injecting jQuery into a page...  Although I still haven't gotten to the inections part!

In part 1, I discussed jQuery's noConflict() method for using jQuery with other libraries (like prototype) and different versions of jQuery.

In this post, I want to simply make 1 point clear:
When you include a jQuery library, it attaches itself to the current global window.jQuery instance.

So, let's first look at the typical scenario where you load the jQuery library and then the jQuery UI plugin.  From the jQuery UI website:
http://jqueryui.com/docs/Getting_Started

<link type="text/css" href="css/themename/jquery-ui-1.8.21.custom.css" rel="Stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>

Here we load the UI's CSS file, then jQuery, then the UI library.  Before we look at jQuery UI's "hook" into jQuery, let's take a baby step and look at section from jQuery's on how to author a plugin:
http://docs.jquery.com/Plugins/Authoring

Getting Started

To write a jQuery plugin, start by adding a new function property to the jQuery.fn object where the name of the property is the name of your plugin:

jQuery.fn.myPlugin = function() {

  // Do your awesome plugin stuff here

};

But wait! Where's my awesome dollar sign that I know and love? It's still there, however to make sure that your plugin doesn't collide with other libraries that might use the dollar sign, it's a best practice to pass jQuery to an IIFE (Immediately Invoked Function Expression) that maps it to the dollar sign so it can't be overwritten by another library in the scope of its execution.

(function( $ ) {
  $.fn.myPlugin = function() {
  
    // Do your awesome plugin stuff here

  };
})( jQuery );

Ah, that's better. Now within that closure, we can use the dollar sign in place of jQuery as much as we like.

So you can see that when you author a plugin, the plugin expects the global jQuery (or rather the window.jQuery) variable to be set.

Now let's take a look at the jQuery UI code...  In particular, the jQuery UI core code from:
http://code.google.com/p/jquery-ui/downloads/detail?name=jquery-ui-1.7.3.zip

In jquery-ui.js  we will look at just the top of the code:

/*
 * jQuery UI 1.7.3
 *
 * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * http://docs.jquery.com/UI
 */
;jQuery.ui || (function($) {

var _remove = $.fn.remove,
 isFF2 = $.browser.mozilla && (parseFloat($.browser.version) < 1.9);

//Helper functions and ui object
$.ui = {
 version: "1.7.3",

And the bottom of the code:

})(jQuery);

Basically the top of the code says: If jQuery.ui is already defined, then skip the rest, otherwise, execute this anonymous function to add the jQuery.ui library to the global jQuery.  Then, you see that the global jQuery variable is passed into the anonymous function so that the "ui" library can be attached to it.

Again, the point of this post is to simply show that when loading a jQuery plug in, the plug will attach to whichever "jQuery" is the current global variable called "jQuery".  A secondary, but perhaps obvious point is that jQuery plugins must be loaded AFTER jQuery.

As I described in my previous post, the global jQuery variable and the ($) can be various versions of jQuery.

In Part 3 of this blog post, I will look at loading jQuery and jQuery plugins asynchronously.