Geek Answers Handbook

Is there an elegant way to upgrade jQuery slowly?

We want to switch from one version of jQuery to another. We use various online plugins and have written a lot of our own. The challenge now is to try SLOWLY MIGATING all your script objects SLOWLY without completely rewriting. I have an idea on how to handle this:

BUT QUESTIONS:

  • Is the idea below even a good idea?
  • Can I (directly) tell each jQuery object where the dependencies live?
  • If this is a bad idea ... how do you handle it?
  • Am I just rewriting EVERY object that interrupts when updating? (Ek!)

EXPLANATED QUESTION:
If your entire plug-in is ONLY within the same page, then the different versions are easily addressed: just use your file at the page level, not at the main page level (duh!). However, the objects that live on the main page or in user controls are a bit more complicated ... because they need specific versions to work properly.

HERE IS MY IDEA:
The definition of a plugin starts with an anonymous function.

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

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

EXAMPLES: jQuery dependencies include plugins 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 OBJECTS to various internal and online modules?

:

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

:
() ,

:

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

... !

...

// 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);

... .

:
( ). , :

  • ui.widget, ui.position, ui.core .. ( ).

, :
jQuery THAT . AS jQuery.

- ... !

+5
1

$.noConflict

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

jQuery, , :

(function(jQuery, $) {

    ... // code

}(jQuery_1_x, jQuery_1_x));

, , - , var foo . //

window.foo = ...

, // , .

+1

More articles:


All Articles