Jquery plugin conflict (jquery. noconflict) solution sharing _ jquery

This article mainly addresses how to make multiple jQuery versions coexist on the same page without conflict, for more information, see the $ symbol used by many JS framework class libraries. jQuery is the most typical one. In jQuery, the $ symbol is only a reference of the window. jQuery object. Therefore, even if the $ symbol is deleted, window. jQuery is a strong backend to ensure the integrity of the entire class library. JQuery's API design fully considers the reference conflicts between multiple frameworks. We can use jQuery. noConflict to easily implement the transfer of control.

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

The Code is as follows:

JQuery. noConflict ([removeAll])

By default, executing noConflict will hand over control of variable $ to the first database that generates $. When removeAll is set to true, executing noConflict will hand over all the control of $ and jQuery object to the first one to generate their libraries.

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

How is this mechanism implemented? Read [2] at the beginning of jQuery source code. The first thing we do is:

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 jQuery and $ objects in the window environment through two private variables to prevent variables from being forcibly overwritten. Once the noConflict method is called, the transfer method of control is determined by the difference between _ jQuery, _ $, jQuery, and $. 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 take a look at the parameter setting problem mentioned above. If deep is not set, _ $ overwrites window. $. At this time, jQuery alias $ is invalid, but jQuery itself is intact. If another class library or Code redefined the $ variable, its control is completely handed over. If deep is set to true, _ jQuery overwrites window. jQuery, and $ and jQuery both expire.

The advantage of this operation is that, whether the frameworks are mixed or multiple versions of jQuery coexist in a highly conflicting execution environment, due to the transfer mechanism provided by the noConflict method and the unoverwritten jQuery object returned by itself, it can completely resolve conflicts by means of variable ing.

But the unavoidable fact is that the plug-in may become invalid. Of course, you can simply modify the context parameters to restore the $ alias:

The Code is as follows:

Var query = jQuery. noConflict (true );
(Function ($ ){
// Plug-ins or other forms of code, you can also set the parameter to jQuery
}) (Query );

The following example solves this problem.

Since the birth of jQuery, there have been more and more versions, and the new versions on the jQuery official website are constantly being updated and released. However, we have already used the old version of jQuery in previous projects, for example, 1.3.X, 1.4.X, 1.5.X, and 1.6.2.

Because of the needs of the project, it is necessary to constantly use newer versions of jQuery, but for the old jQuery version that already exists and has been used, how can we make different jQuery versions coexist on the same page without conflict?

In fact, using 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 without conflict.

The Code is as follows:

Load multiple different jQuery versions on the same page