A brief analysis of the anti-conflict mechanism in jQuery-noConflict-JS Tutorial-php.cn

A brief analysis of the anti-conflict mechanism in jQuery-noConflict

巴扎黑

Release： 2017-06-20 15:18:19

Original

1372 people have browsed it

Source: Taobao UED

Many JS frameworksClass librarieschoose to use the $ symbol as a function or variable name , 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 $ reference at the same time as the jQuery object itself:

JavaScript

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 control of $ and the jQuery object itself All are handed over to the first library that generated 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 jQuery source code starting with ^[2], and the first thing to do is this:

##JavaScript

1	jQuery .noConflict([ removeAll])

#_jQuery

window.jQuery, #_$

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:

##JavaScript

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 $ becomes 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 is completely possible Resolve conflicts through variable mapping.

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:

##JavaScript

var

query = jQuery.noConflict(true);

(

function ($) {

// Plug-ins or other forms of code, you can also set the parameters to jQuery

}

)(query) ;

[1] http://api.jquery.com/jQuery.noConflict/#jQuery-noConflict-removeAll[2]

https:/ /
github.com/jquery/jquery/blob/master/src/core.js

The above is the detailed content of A brief analysis of the anti-conflict mechanism in jQuery-noConflict. For more information, please follow other related articles on the PHP Chinese website!