Make it easy

jQuery is one of the most widely used front-end frameworks today, and a large number of third side libraries and plug-ins are developed based on it. To avoid global namespace pollution, jQuery provides the jQuery.noConflict () method to resolve variable conflicts. This method, no doubt, is very effective. Unfortunately, the official documentation for jQuery does not provide a clear description of this method, and many developers do not know exactly what happens when they call jQuery.noConflict (), leading to many problems in use. Still, the principles behind jQuery.noConflict () are worth learning for Web developers, and can be a useful tool for solving similar global namespace pollution problems.

jQuery.noConflict()?
The & # 8195; The & # 8195; jQuery. noConflict() exists for one purpose only: it allows you to load multiple instances of jQuery on the same page, especially different versions of jQuery. You may wonder why you would want to load/use multiple versions of jQuery objects in one page. Generally speaking, there are two cases. In the first case, your business code uses the latest version of the jQuery library, while your third party plug-in relies on an earlier version of the jQuery library. In the second case, you are maintaining a system whose existing business code references an older version of the jQuery library for a variety of reasons, and your newly developed module uses another version of the jQuery library. In either case, you have to face the problem of jQuery object/method conflicts. Fortunately, jQuery. noConflict() helps you out.

What happens when jQuery is loaded?
The & # 8195; The & # 8195; When jQuery is referenced/loaded by the page, it is encapsulated in a self-executing function (anonymous function). All 1-cut variables, functions, and objects provided by jQuery are in the executable environment inside the anonymous function and cannot be called by the external environment to prevent global namespace pollution.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

jQuery defines two global objects within the anonymous function :jQuery and $to expose itself to the external environment. Various public methods that developers are accustomed to using, such as jQuery.ajax (), jQuery.css (), and so on, are accessed through these two objects. Initially, they point to the same object inside the anonymous function, jQuery(private variable), through which private variables and functions inside the anonymous function are accessed. This allows anonymous functions to keep their internal private variables and functions in memory after execution and not be cleaned up by javascript's garbage collection mechanism.

window.jQuery = window.$ = jQuery;

The & # 8195; The & # 8195; When jQuery is loaded by the page, it is possible that the current page already has two global variables, jQuery and $(for example, the other third library is loaded, and both are defined internally), which causes the existing objects to be overwritten (global namespace pollution). To solve this problem, jQuery internally first caches the existing global variables and stores them in the private variables _jQuery and _$for subsequent calls. So, if the jQuery and $object don't exist when the page loads the jQuery library, then _jQuery and _$are both undefined; Otherwise, they all hold references to existing jQuery and $(perhaps from a previously referenced third repository or a different version of the jQuery library). jQuery then overrides these two global variables and exposes itself to the external environment, as described above. At this point, the global variables jQuery and $on the page point to the jQuery library that you just introduced.

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

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

// Otherwise expose jQuery to the global object as usual
window.jQuery = window.$ = jQuery;

jQuery.noConflict() magic effect?
The & # 8195; The & # 8195; Assume that the system you maintain already references the 1.7.0 version of the jQuery library, and that you refer to the 1.10.2 version of the jQuery library in the new additions. So, is there a way to reuse jQuery 1.7.0 or use both versions of jQuery? The answer is yes, jQuery.noConflict (). In fact, with jQuery.noConflict (), you can immediately redirect the global variables jQuery and $to the previously referenced object. Isn't that amazing? This is why jQuery internally caches previously referenced objects before exposing itself externally.
The & # 8195; The & # 8195; jQuery.noConflict() accepts one optional Boolean parameter, and is usually default to false. What is the effect of this parameter? Actually, it's very simple. If you call jQuery.noConflict () or jQuery.noConflict (false), only the global variable $will be reset to its previous reference value. If you call jQuery.noConflict () or jQuery.noConflict (true), the global variables jQuery and $are reset to their previous referenced values. This is a very important point to keep in mind. When you call ES91en. noConflict(false/true), it returns an instance of the current jQuery, and we can rename jQuery using this feature.

// "Renaming" jQuery
var jayquery = jQuery.noConflict( true );
// Now we can call things like jayquery.ajax(), jayquery.css(), and so on

Let's look at one more code snippet and test 1 to see if we really understand the magic of noConflict()

<!-- jQuery and $ are undefined -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- jQuery and $ now point to jQuery 1.10.2 -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
<!-- jQuery and $ now point to jQuery 1.7.0 -->

<script>jQuery.noConflict();</script>
<!-- jQuery still points to jQuery 1.7.0; $ now points to jQuery 1.10.2 -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
<!-- jQuery and $ now point to jQuery 1.6.4 -->

<script>var jquery164 = jQuery.noConflict( true );</script>
<!-- jQuery now points to jQuery 1.7.0; $ now points to jQuery 1.10.2; jquery164 points to jQuery 1.6.4 -->

Avoid conflicts with the third repository
The & # 8195; The & # 8195; The above code snippet shows how to resolve conflicts with multiple versions of jQuery. Next, we try to resolve the conflict between the jQuery library and the third library. The following code snippets are in the official documentation of jQuery, which interested programmers can read carefully to see the difference.

1. Use No-Conflict mode directly
The & # 8195; The & # 8195; Using the ES113en-ES114en pattern, you are essentially renaming and calling jQuery.

<!--  using no-conflict Mode, jquery.js in prototype.js And then it was introduced . -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
 
var $j = jQuery.noConflict();
// $j  Refer to the jQuery The object itself .
 
$j(document).ready(function() {
  $j( "div" ).hide();
});
 
// $  Redirected prototype.js Object defined in 
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
  var mainDiv = $( "main" );
}
 
</script>

2. Use self-executing function encapsulation
The & # 8195; The & # 8195; In this way, you can continue to use the standard $object inside anonymous functions, as many jQuery plug-ins do. Note that with this approach, the $object defined by prototype.js can no longer be used internally within the function.

<!-- jquery.js in prototype.js And then it was introduced . -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
 
jQuery.noConflict();
 
(function( $ ) {
  // Your jQuery code here, using the $
})( jQuery );
 
</script>

3. Use the standard jQuery(document).ready () function
The & # 8195; The & # 8195; If the jQuery library is introduced before other libraries, then the jQuery and $defined internally by jQuery will be overwritten by the third library, and there will be no point in using noConflict() again. The solution is simple, using jQuery's standard invocation style.

<!-- jquery.js in prototype.js Was introduced before . -->
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
 
// Use full jQuery function name to reference jQuery.
jQuery( document ).ready(function() {
  jQuery( "div" ).hide();
});

//  or 
jQuery(function($){
  // Your jQuery code here, using the $
});
 
// Use the $ variable as defined in prototype.js
window.onload = function() {
  var mainDiv = $( "main" );
};

</script>

The above is the introduction of jQuery. noConflict(), I hope you can play with jQuery. noConflict() in a minute.