Is there an elegant way to upgrade jQuery slowly?

Question

We are wanting to upgrade from one version of jQuery to another. We use various online plug-in's and have written many of our own. The challenge now comes in the form of trying to SLOWLY MIGRATE all your scripted objects SLOWLY without a complete re-write. I have an idea on HOW to handle this:

BUT I HAVE QUESTIONS:

1. Is the idea below even a good idea?
2. Can I (directly) tell each jQuery object where dependencies live?
3. If this is a bad idea...how do YOU handle it?
4. Do I simply re-write EVERY object that happens to break upon upgrading? (sux!)

EXPLAINING THE ISSUE:
If all your plug-in's live ONLY within the scope of a single page, then different versions are easily addressed: simply do your file-includes at the page level instead of the master-page level (duh!). However, objects that live in the master-page or in user-controls are a bit tougher...as they need specific versions to run correctly.

HERE'S MY IDEA:
The definition of a plug-in starts with an anonymous function.

(function ($){<!- code goes here -->})(jQuery);

All of the dependencies I've seen use this as a starting point.

EXAMPLES: jQuery dependencies include plug-ins like: ui.widget, ui.position, ui.core, etc.

So what if I reference each version of jQuery (and its dependencies) using a JavaScript object and pass THAT OBJECT INTO the various in-house and online plug-ins?

THE OBJECT REFERENCES MIGHT GO LIKE THIS:

var jQueryVersion1_3_2 = function(){<!- paste the files contents here-->};
var jQueryVersion1_4_4 = function(){<!- paste the files contents here-->};

THE PLUG-INS:
My in-house and online plug-ins could still be included as (normal) file-links, but with the following changes

GO FROM THIS:

// Plug-in X
(function ($){<!- its untouched code -->})(jQuery);
// Plug-in Y
(function ($){<!- its untouched code -->})(jQuery);
// Plug-in Z
(function ($){<!- its untouched code -->})(jQuery);

...versioning sucks here!

TO THIS...

// Plug-in X
(function ($){<!- its untouched code -->})(jQueryVersion1_3_2);
// Plug-in Y
(function ($){<!- its untouched code -->})(jQueryVersion1_3_2);
// Plug-in Z
(function ($){<!- its untouched code -->})(jQueryVersion1_4_4);

...now we can upgrade our objects SLOWLY.

THE ONLY ISSUE I SEE:
The challenge becomes the plug-in dependencies (between versions). In a test upgrade the following began to break across various plug-ins, things like:

• ui.widget, ui.position, ui.core, etc. (all broke upon upgrading).

THE ONLY ANSWER I SEE IS:
Wrapping jQuery and all the various references into a single function and saving THAT into the variable above. Then pass THAT intermediary object into each plug-in AS jQuery.

Help me Obi-Wan Kenobi...you're my only hope!

Answer 1

Using $.noConflict to globally create all your versions

<script src="jquery 1.x" />
<script> 
    var jQuery_1_x = $.noConflict(true);
</script>
...

Then wrap every jQuery plugin, internal or 3rd party in closures like:

(function(jQuery, $) {

    ... // code

}(jQuery_1_x, jQuery_1_x));

The only thing that can break with this method is 3rd party code that uses var foo outside of any functions to create global objects. You need look for any global functions/objects/methods and hoist them manually using

window.foo = ...

Thankfully creating global functions/objects/methods is considered bad form by that method anyway so there shouldn't be too many of those.