An effective way to resolve jquery version conflicts

  • 2020-03-30 03:50:17
  • OfStack

Anyone who has used jQuery knows that different versions of jQuery can cause conflicts. In this paper, an effective solution to this problem is put forward as follows:

Case: resolve conflicts between jQuery1.3.2 and 1.4.2. (this example has been tested!)

Step 1: add a sentence at the end of the 1.4.2 source code:


var $j4 = jQuery.noConflict(true);

The reason to add in the source code here, rather than when you want to use it as mentioned in most articles, is that many plug-ins based on 1.4.2 need to add, add here to avoid too many plug-ins add this code caused duplication. This sentence is to 1.4.2 jQuery and $reference permissions are abandoned. That is, the 1.4.2-based plug-in can no longer use jQuery and $. Also give $j4 a new namespace, notice that it is a property of the window. If you look at the 1.4.2 source code, you will see that it actually executes these two sentences:


window.$=_$;
window.jQuery=_jQuery;

This is the same as window.$=_temp$(returns the namespace), but with a different name.

Step 2: add the following code to the headers of all plug-ins based on the 1.4.2 framework:


var _temp$ = window.$,_tempjQuery = window.jQuery;

Put the $and jQuery of query1.3.2 into a temporary variable space:


window.$ = $j4;

This and the following sentence are intended to give the intermediate code the right use of jQuery and $. The next $j4 is to give them the correct reference.


window.jQuery = $j4;

There are three reasons why temporary variable storage is necessary:

(2) because 1.4.2 has given up the control of jQuery and $, but the existing plug-in code USES them as references, because plug-ins can not predict conflicts, even if there is a conflict to the plug-in must use $or jQuery reference, unless it is not a jQuery plug-in.

In order to prevent the plug-in directly using window.$and window.jquery to reference to the 1.3.2 jQuery and $, this is rare, but just in case.

The original code in the middle is not moved, and the following code is added at the end:


window.$ = _temp$;//Returns the reference permission for $to jQuery1.3.
window.jQuery = _tempjQuery;//Returns the reference permission for jQuery to query1.3.

Step 3: use the $j4(element) option based on query1.4.2.

Summary: so far feasible: jQuery1.4.2 completely give up $and jQuery control rights. 1.3.2 give up the control permission of $but do not give up the permission of jQuery. In fact, jQuery can also give up, but only to give the individual name $j3. Prototype is best placed after jQuery1.3.2, which gets control of $. However, if you want to use jQuery1.4.2 in the future, you must use $j4 to reference it. However, no matter how many jQuery framework version conflicts there are, they are all resolved. What if there is a 1.2 jQuery, refer to the steps of (2), but the first step is changed to:


var $j2 = jQuery.noConflict(true);

The third step is just $j2(element). It's all the same.

I believe that this article has a certain reference value for your jQuery programming.


Related articles: