Share the usage of noConflict() in jQuery

This article mainly introduces the usage of noConflict() in jQuery, and analyzes the function, definition and related usage skills of noConflict() with examples. Friends in need can refer to this article

The example 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 takes control of the variable $ Yield to the first library to implement 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 $("p p") is used, it must be replaced by jQuery("p p").

1. "$" operator

1. jQuery uses the "$" operator by default, and other frameworks such as prototype also use "$", so if jQuery is introduced after other libraries, then jQuery will get the "$" usage rights. 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 will 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. In order to prevent this from happening, jquery Noconflict() is introduced

2. The definition of jQuery.noConflict

The jQuery.noConflict method contains an optional Boolean parameter to determine the handover of the $ reference At the same time, whether to transfer the jQuery object itself:

##

jQuery.noConflict([removeAll])

Description of the function:

By default, executing noConflict will take control of the variable $ Transfer 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 that generates 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 jQuery and $ objects 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;
}

Let’s look at the parameter setting issue mentioned above. If deep is not set, _$ covers window.$. At this time, the jQuery alias $ is 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 no matter it is a highly conflicting execution environment such as framework mixing or jQuery multi-version coexistence, due to the handover mechanism provided by the noConflict method and the fact that it returns an uncovered jQuery object, it can be fully mapped through variables. way to resolve conflicts.

4. jQuery.noConflict instance

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

jQuery.noConflict();
jQuery("p 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 is very effective for most plug-ins that do not 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("p p").hide();  // 基于 jQuery 的代码
$("content").style.display = "none";// 基于其他库的 $() 代码

5. Completely move jQuery to a new

namespace

:

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

The above is the detailed content of Share the usage of noConflict() in jQuery. For more information, please follow other related articles on the PHP Chinese website!