Home >Web Front-end >JS Tutorial >jquery plug-in conflict (jquery.noconflict) solution sharing_jquery

jquery plug-in conflict (jquery.noconflict) solution sharing_jquery

WBOYOriginal: 2016-05-16 16:54:471118browse

Many JS framework libraries choose to use the $ symbol as function or variable names, and jQuery is the most typical one. In jQuery, the $ symbol is just a reference to the window.jQuery object, so even if $ is deleted, window.jQuery is still a strong backing to ensure the integrity of the entire class library. The API design of jQuery takes full consideration of reference conflicts between multiple frameworks. We can use the jQuery.noConflict method to easily transfer control.

The jQuery.noConflict method contains an optional Boolean parameter [1], which determines whether to hand over the jQuery object itself when handing over the $ reference:

Copy code The code is as follows:

jQuery.noConflict([removeAll])

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.

For example, when KISSY and jQuery are mixed, and $ = KISSY is used to simplify API operations, this method can be used to solve the naming conflict problem.

So how is this mechanism implemented? Read the beginning of jQuery source code [2], the first thing to do is this:

Copy code The code is as follows:

// 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 ( deep && window. jQuery === jQuery ) {
jQuery = 🎜> Let’s look at the parameter setting issue mentioned above. If deep does not Setting, _$ overrides 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 completely mapped through variables way to resolve conflicts.

But the unavoidable fact is that it may cause plug-in failure and other problems. Of course, it can be restored by simply modifying the context parameters. $ Alias:

Copy code

The code is as follows:

var query = jQuery.noConflict(true);(function ($) {// Plug-in or other form of code, you can also set the parameter to jQuery})(query);

The following example also solves this problem

Since its birth, there have been more and more versions of jQuery, and new versions of the jQuery official website are still being updated and released. However, we have already used older versions of jQuery in previous projects, such as: 1.3.X, 1.4.X, 1.5.X, 1.6.2, etc.

Due to the needs of the project, it is necessary to continue to use newer versions of jQuery. However, for the old jQuery versions that already exist and have been adopted, how do we allow multiple different jQuery versions to coexist on the same page without What about conflict?

In fact, using the jQuery.noConflict() feature, we can not only let jQuery coexist with other JS libraries, such as Prototype. Can also coexist with other different versions of jQuery itself without conflict.

Copy code The code is as follows:

Load multiple different jQuery versions in the same page
="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js">
jQuery_New = $.noConflict(true);
” http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">

="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">

var jQuery_1_5_2 = $.noConflict(true);

" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">