Jquery plug in conflict of jquery.noconflict solution sharing

2020-03-30 02:24:42
OfStack

Many JS framework libraries choose to use the $sign as the function or variable name, jQuery is the most typical one. In jQuery, the $sign is just a reference to the window.jQuery object, so even if the $is deleted, window.jQuery is still a strong guarantee for the integrity of the entire class library. JQuery's API is designed to allow for reference conflicts between multiple frameworks, and we can easily hand over control using the jquery.noconflict method.

The jQuery. NoConflict method contains an optional Boolean parameter [1] to determine whether to hand over the $reference as well as the jQuery object itself:


jQuery.noConflict([removeAll])

By default, executing noConflict hands over control of the variable $to the first library that generates the $; When removeAll is set to true, executing noConflict hands over control of the $and jQuery objects themselves to the first library to produce them.

For example, if you mix KISSY with jQuery and use $= KISSY to simplify API operations, you can use this method to solve naming conflicts.

So how is this mechanism implemented? The first thing to do when reading the jQuery source code is this:


// Map over jQuery in case of overwrite
_jQuery = window.jQuery,

// Map over the $ in case of overwrite
_$ = window.$,

It is easy to understand that jQuery maps the jQuery and $objects in the window environment with two private variables to prevent the variables from being overwritten. Once the noConflict method is called, the transfer of control is determined by the difference between _jQuery, _$, jQuery and $4. The specific code is as follows:

NoConflict: function(deep) {
If (window.$=== jQuery) {
Window. $= _ $;
}

If (deep && window.jQuery === jQuery) {
Window. The jQuery = _jQuery;
}

Return the jQuery;
}
If deep is not set and _$overwrites window.$, the jQuery alias $is invalid, but jQuery itself remains intact. If any other class library or code redefines the $variable, its control is completely handed over. If deep is set to true, _jQuery overrides window.jquery, and both $and jQuery become invalid.

The advantage of this operation is that, whether it is a mixed framework or a highly conflicted execution environment with multiple versions of jQuery, conflicts can be resolved by means of variable mapping, thanks to the transition mechanism provided by the noConflict method and the fact that it returns unoverwritten jQuery objects.

However, the unavoidable fact is that there may be problems such as plug-in invalidation. Of course, the $alias can be restored by simply modifying the context parameter:


var query = jQuery.noConflict(true);
(function ($) {
//Plug-ins or other forms of code can also be set to jQuery
})(query);

The following example also addresses this problem

There have been more and more versions of jQuery since its inception, and the new version of jQuery official website is still being updated and released, but we have used the old version of jQuery in previous projects, such as 1.3.x, 1.4.x, 1.5.x, 1.6.2 and so on.

Due to the needs of the project, newer versions of jQuery must be used continuously, but for the old version of jQuery that already exists and has been adopted, how can we make several different versions of jQuery coexist on the same page without conflict?

In fact, with the jQuery. NoConflict () feature, we can not only make jQuery coexist with other JS libraries, such as Prototype. It can also coexist with other versions of jQuery itself without conflict.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title> Load multiple different ones on the same page jQuery version </title>
        <!--  Load from Google server jQuery The latest version  -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
        <script type="text/javascript">
            var jQuery_New = $.noConflict(true);
        </script>
        <!--  loading jQuery1.6.2 version  -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            var jQuery_1_6_2 = $.noConflict(true);
        </script>
        <!--  loading jQuery1.5.2 version  -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script type="text/javascript">
            var jQuery_1_5_2 = $.noConflict(true);
        </script>
        <!--  loading jQuery1.4.2 version  -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            var jQuery_1_4_2 = $.noConflict(true);
        </script>
        <!--  loading jQuery1.3.2 version  -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            var jQuery_1_3_2 = $.noConflict(true);
        </script>
        <script type="text/javascript">
            alert(jQuery_New.fn.jquery);
            alert(jQuery_1_6_2.fn.jquery);
            alert(jQuery_1_5_2.fn.jquery);
            alert(jQuery_1_4_2.fn.jquery);
            alert(jQuery_1_3_2.fn.jquery);

            jQuery_New(function($){$('<p> I'm the latest '+$.fn.jquery+' Version added. </p>').appendTo('body');});
            jQuery_1_6_2(function($){$('<p> I am a '+$.fn.jquery+' Version added. </p>').appendTo('body');});
            jQuery_1_5_2(function($){$('<p> I am a '+$.fn.jquery+' Version added. </p>').appendTo('body');});
            jQuery_1_4_2(function($){$('<p> I am a '+$.fn.jquery+' Version added. </p>').appendTo('body');});
            jQuery_1_3_2(function($){$('<p> I am a '+$.fn.jquery+' Version added. </p>').appendTo('body');});
        </script>
    </head>
    <body>
         Load multiple different ones on the same page jQuery version 
        <br>
    </body>
</html>