JQuery Library (noConflict) conflict resolution mechanism

Many JS framework class libraries use the $ symbol as the function or variable name. In actual project development, if the template language is used, the "$" symbol may be the keyword of the template language. For example, in the Veclocity template language, $ is a keyword. Conflicts may occur when used with jQuery (jq code is directly written on the page, and the introduced js file does not exist ). Why do so many js libraries like $ ($ is money ?).

JQuery uses the $ symbol as the most typical function or variable name. In jQuery, the $ symbol is only a reference to the window. jQuery object. Therefore, even if $ is deleted, jQuery can ensure the integrity of the entire class library.

JQuery's design fully considers the reference conflicts between multiple frameworks. We can use jQuery. noConflict to easily transfer control.

Before discussing how to solve the jQuery conflict, we need to first understand the noConflict function, so that the solution to the conflict is hidden in it.

JQuery. noConflict

jQuery.noConflict([removeAll]);

Default parameter:

Run this function to assign control of variable $ to the first database to implement it. After running this function, you can only use jQuery variables to access jQuery objects (functions without parameters), such as jQuery ("div p "). However, you must note that this function must be used after you import the jQuery file and before importing another library that causes conflict. Of course, before other conflicting libraries are used, unless jQuery is the last imported.

When the parameter is true, execute noConflict to hand over all the control of $ and jQuery object to the first database to generate them.

But how is the specific transfer mechanism implemented? Check the source code to find that two private variables _ jQuery and _ $ are defined in jQuery source code. The details are as follows:

It is easy to understand that jQuery maps jQuery and $ objects in the window environment through the above two private variables to prevent the variables from being forcibly overwritten. Once noConflict is called, jquery can determine the transfer method of control through the difference between _ jQuery, _ $, jQuery, and $. The specific code is as follows:

Next, let's take a look at the parameter setting problem. If deep is not set, _ $ overwrites window. $. At this time, the alias $ of jQuery is invalid, but the jQuery variable is not valid and can still be used. In this case, if another database or Code redefined the $ variable, its control is transferred out. If deep is set to true, _ jQuery further 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, noConflict's control hand-over mechanism and itself returns private variable jQuery objects that violate overwrite, it can completely resolve conflicts by means of variable ing.

Example

I learned about the implementation of jQuery internal conflict resolution. Let's take a look at some actual situations.

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

JQuery. noConflict (); // use jQueryjQuery ("div p "). hide (); // use other libraries $ () $ ("content "). style. display = 'none ';

2. Restore the alias $, create and execute a function, and use $ as the alias of jQuery in the function scope. In this function, the original $ object is invalid. This function is very effective for most plug-ins that do not depend on other libraries.

JQuery. noConflict (); (function ($) {$ (function () {// code that uses $ as the jQuery alias}) ;}( jQuery ); // other code of the database that uses $ as the alias

3. Create a new alias to use the jQuery object in the next Library.

Var j = jQuery. noConflict (); // jQuery-based code j ("div p "). hide (); // code $ () based on other libraries $ ("content "). style. display = 'none ';

In this way, all jQuery code is called through j, avoiding the possibility of conflict.

4. Completely move jQuery to a new namespace.

Var dom ={}; dom. query = jQuery. noConflict (true); Result: // The New jQuery code dom. query ("div p "). hide (); // code of another library $ () $ ("content "). style. display = 'none'; // code of jQuery of another version ("div> p "). hide ();

Conflict Resolution

There are only three conflicting methods:

1. Reference other libraries before jQuery ($ occupied ).

The simplest way is to call the jQuery. noConflict function anywhere, and then use jQuery () to seat the jQuery object's manufacturing factory.

JQuery. noConflict (); // hand over control of variable $ to the first-in library jQuery (function () {jQuery ("p "). click (function () {// use jQuery variable}) ;}); $ ("pp "). style. display = 'none'; // call other libraries

In addition, if you want to ensure that jQuery does not conflict with other libraries, but want to use a shortcut similar to "$", you can use the following code:

Var $ mj = jQuery. noConflict (); // custom shortcut variable $ mj (function () {$ mj ("p "). click (function () {// use jQuery variable}) ;}); $ ("pp "). style. display = 'none'; // call other libraries

If you do not want to customize jQuery names, but want to use $, there is no conflict with other libraries. There are two solutions:

1:

JQuery. noConflict (); jQuery (function ($) {$ ("p "). click (function () {// continue using $} inside the function) ;}); $ ("pp "). style. display = 'none'; // call other libraries

Second:

JQuery. noConflict (); // assign the variable $ control (function ($) {// define the anonymous function parameter as $ (function () {// all anonymous functions are jQuery's $ ("p "). click (function () {}) ;}) ;}( jQuery); // executes an anonymous function and passes the real parameter jQuery $ ("pp "). style. display = 'none'; // call other libraries

This is an ideal method, because you can change the minimum code to achieve full compatibility. 2. jQuery is referenced after other libraries.

You can refer to the above for some conflict resolution methods. In fact, they do not conflict at all. You can use jQuery variables to do some jQuery processing work. You can also use the $ () method as a shortcut for other libraries.

3. jQuery of different versions and other libraries

You can refer to the above example to completely move jQuery to another namespace.

Var dom ={}; dom. query = jQuery. noConflict (true); // The New jQuery code dom. query ("div p "). hide (); // code of another library $ () $ ("content "). style. display = 'none'; // code of jQuery of another version ("div> p "). hide ();

Last

The conflict resolution mechanism of jQuery is very flexible. With these conflict solutions, you can use jQuery safely in the project.