jquery Library (NOCONFLICT) conflict Resolution mechanism

Many JS Framework class libraries Choose to use the $ symbol as a function or variable name, and in the actual project development, the use of the template language may be the "$" symbol is the keyword of the template language. For example, the Veclocity template language, $ is the keyword. Working with jquery can be a conflict (write the JQ code directly in the page and the JS file introduced does not have the problem). Why do so many JS libraries like to use $ ($ is money?).

jquery is the most typical of a function or variable name using the $ symbol. In jquery, the $ sign is just a reference to the Window.jquery object, so even if $ is deleted, jquery guarantees the integrity of the entire class library.

The design of jquery takes into account the referential conflicts between multiple frameworks. We can use the Jquery.noconflict method to easily implement control transfer.

Before discussing how to resolve the jquery conflict, it is necessary to understand the Noconflict function first, and the method of resolving the conflict is hidden inside.

Jquery.noconflict

Jquery.noconflict ([RemoveAll]);

The default parameter is the case:

Run this function to pass control of the variable $ to the first library that implements it. After running this function, you can only use jquery variables to access jquery objects (functions without parameters), such as jquery ("Div p"). Note, however, that the function must be used after you import the jquery file and before importing another library that causes the conflict. Of course, it should be before other conflict libraries are used unless jquery is the last one to import.

When the argument is true, executing noconflict will transfer all control of the $ and jquery objects to the first library to produce them.

But how is the specific handover mechanism implemented? Check the source code can be found in the JQuery source code to define the two private variable _jquery,_$. Specific as follows:

It is easy to understand that jquery maps jquery and $ two objects in the window environment through the two private variables above, preventing the variable from being forcibly overwritten. Once noconflict is called, jQuery can determine the transfer of control by the difference between the _jquery,_$,jquery,$ four, as follows:

Next look at the parameter setting problem, if Deep is not set, _$ overwrite window.$, this time jquery alias $ invalid, but jquery variable is not invalidated, still can use. At this point, if there are other libraries or code to redefine the $ variable, its control is transferred out. Conversely, when Deep is set to true, _jquery further overwrites Window.jquery, at which time $ and jQuery are invalidated.

The benefit of this kind of operation is that both the framework mix and the highly conflicting execution environment of the jquery multi-version coexistence, because of the control handover mechanism of noconflict, and the jquery object itself that returns a private variable that violates the override, the conflict can be resolved in a variable mapping way.

Example

Learn how jquery internally resolves conflicts, and then take a look at some real-world scenarios.

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

Jquery.noconflict ();//Use Jqueryjquery ("div p"). Hide ();//Use a $ () $ ("content") for other libraries. Style.display = ' None ';

2. Restore the alias $, then create and execute a function that will still be used as the alias of jquery in the scope of the function. In this function, the original $ object is invalid. This function is useful for most plug-ins that do not depend on other libraries.

Jquery.noconflict ();(function ($) {   $ (function () {    //use $ as JQuery alias Code  })}) (jQuery);//code for other libraries with $ as aliases

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 a conflict.

4. Completely move jquery to a new namespace.

var dom = {};d om.query = Jquery.noconflict (true);        Result://New jquery code dom.query ("div p"). Hide ();//Another Library $ () for the code $ ("content"). Style.display = ' none ';//Another version of jquery's Code jquery (" div > P "). Hide ();

Resolve Conflict Mode

The way of conflict is nothing more than 3:

1. Other libraries are preceded by jquery references ($ is occupied).

The simplest we can call the Jquery.noconflict function anywhere, then use jquery () to seat the jquery object's manufacturing plant.

Jquery.noconflict ();       Transfer control of the variable $ to the first imported library jQuery (function () {jquery ("P"). Click (function () {   //Use jQuery variable});   }); $ ("pp"). Style.display= ' None ';   Calls to other libraries

In addition, if you want to make sure that jquery does not conflict with other libraries, but you want to use a shortcut like "$", 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 ';   Calls to other libraries

If you do not want to give jquery a custom name, but want to use $, there is no conflict with other libraries. There are two ways to resolve this:

One

Jquery.noconflict ();        JQuery (function ($) {   $ ("P"). Click (function () {   //continue to use $} inside function    );}); $ ("pp"). style.display= ' None ';   Calls to other libraries

Second:

Jquery.noconflict ();       The variable $ control transfer (function ($) {               ///define the anonymous function parameter to $$ () (function () {      ///anonymous function inside are jquery's $           $ ("P"). Click (function () {                      });        });}) (jQuery);                Execute the anonymous function and pass the argument jquery $ ("pp"). style.display= ' None ';   Calls to other libraries

This is an ideal way because you can change the least amount of code to achieve full compatibility 2, other libraries are referenced after jquery

You can refer to the above to do some conflict resolution methods, in fact, it does not conflict, you can use jquery variables to do some work on jquery. You can also use the $ () method as a shortcut to other libraries.

3, different versions of jquery, and other libraries

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

var dom = {};d om.query = Jquery.noconflict (TRUE);//New JQuery code dom.query ("div p"). Hide ();//Another Library $ () for the code $ ("content"). Styl E.display = ' none ';//Another version of jquery's code jquery ("div > P"). Hide ();

finally

The jquery conflict resolution mechanism is very flexible, and with these conflict resolution solutions, jquery can be used with ease in the project.