Example analysis of noConflict() usage in jQuery_jquery

The example in this article describes the usage of noConflict() in jQuery. Share it with everyone for your reference. The specific analysis is as follows:

jQuery uses the "$" operator by default. The $ symbol is just a reference to the window.jQuery object, jQuery.noConflict(). This function transfers control of the variable $ to the first library that implements it. This helps ensure that jQuery doesn't conflict with other libraries' $objects. After running this function, you can only access jQuery objects using jQuery variables. For example, where $("div p") is used, it must be replaced by jQuery("div p").

1. "$" operator

1. jQuery uses the "$" operator by default, and other frameworks such as prototype also use "$". Therefore, if jQuery is introduced after other libraries, then jQuery will obtain the right to use "$". This situation is easy to understand, after all, JS is executed from top to bottom.

2. If jQuery is introduced before other libraries that use "$", then jQuery will not occupy "$".

Tip: This method is useful when other JavaScript libraries use $ for their functions.

We all use $ when getting variables in jquery, but there are many plug-ins that can use the $ symbol. If we want to reference it at the same time, it will cause problems. jquery introduced it to prevent this from happening. noconflict()

2. Definition of jQuery.noConflict

The jQuery.noConflict method contains an optional boolean parameter that determines whether to hand over the $ reference along with the jQuery object itself:

jQuery.noConflict([removeAll])

Description of function:

By default, executing noConflict will transfer control of the variable $ to the first library that generates $; when removeAll is set to true, executing noConflict will transfer all control of $ and the jQuery object itself to The first library to generate them.

3. jQuery.noConflict source code analysis

At the beginning of the jQuery source code, the first thing to do 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 two objects jQuery and $ in the window environment through two private variables to prevent the variables from being forcibly overwritten. Once the noConflict method is called, the difference between _jQuery, _$, jQuery, $ is used to determine the transfer method of control. The specific code is as follows:

noConflict: function( deep ) {
 if ( window.$ === jQuery ) {
 window.$ = _$;
 }
 if ( deep && window.jQuery === jQuery ) {
 window.jQuery = _jQuery;
 }
 return jQuery;
}

Looking at the parameter setting issue mentioned above, if deep is not set, _$ covers window.$. At this time, the jQuery alias $ becomes invalid, but jQuery itself is intact. If another library or code redefines the $ variable, control of it is completely transferred. On the other hand, if deep is set to true, _jQuery overwrites window.jQuery, and both $ and jQuery will be invalid.
The advantage of this operation is that whether it is a mixture of frameworks or a highly conflicting execution environment such as the coexistence of multiple versions of jQuery, due to the handover mechanism provided by the noConflict method and its return of uncovered jQuery objects, it can be completely resolved through variable mapping. conflict.

4. jQuery.noConflict instance

1. Map the object referenced by $ back to the original object:

jQuery.noConflict();
jQuery("div p").hide(); // 使用 jQuery
$("content").style.display = "none"; // 使用其他库的 $() 

2. Restore the use of the alias $, then create and execute a function, and still use $ as an alias for jQuery in the scope of this function. In this function, the original $ object is invalid. This function works well for most plugins that don’t rely on other libraries:

jQuery.noConflict();
(function($) { 
 $(function() {
  // 使用 $ 作为 jQuery 别名的代码
 });
})(jQuery);
... // 其他用 $ 作为别名的库的代码

3. You can combine jQuery.noConflict() with the abbreviated ready to make the code more compact:

jQuery.noConflict()(function(){
  // 使用 jQuery 的代码
});
... // 其他库使用 $ 做别名的代码

4. Create a new alias to use the jQuery object in the next library:

var j = jQuery.noConflict();
j("div p").hide();  // 基于 jQuery 的代码
$("content").style.display = "none";// 基于其他库的 $() 代码

5. Completely move jQuery to a new namespace:

var dom = {};
dom.query = jQuery.noConflict(true);
//结果:
dom.query("div p").hide();  // 新 jQuery 的代码
$("content").style.display = "none";  // 另一个库 $() 的代码
jQuery("div > p").hide();  // 另一个版本 jQuery 的代码

I hope this article will be helpful to everyone’s jQuery programming.