Implementation Principles of noconflict functions in jQuery _ jquery-js tutorial

This article mainly introduces the implementation principle decomposition of noconflict functions in jQuery. noconflict is used to prevent variable conflicts. This article breaks down its implementation principle and analyzes its implementation source code, for more information, see noconflict in jQuery. It is an important method to prevent variable conflicts and release control of variables. As we know, jQuery provides two global variables, $ and jQuery. Although jQuery only produces two global variables, conflicts rarely occur, however, if there are many class libraries included in the webpage and there are custom $ or jQuery global variables, a conflict occurs.

The noconflict function provided by jQuery effectively solves the variable conflict problem. The conflict between $ and jQuery can be solved. Next, let's analyze the conflict handling of jQuery.

Let's take a look at the implementation of noconflict in jQuery source code:

(function(window,undefined){var // Map over jQuery in case of overwrite_jQuery = window.jQuery,// Map over the $ in case of overwrite_$ = window.$,jQuery.extend({noConflict: function( deep ){ if ( window.$ === jQuery ) { window.$ = _$; } if ( deep && window.jQuery === jQuery ) { window.jQuery = _jQuery; } return jQuery;}})}(window)

Here jQuery. extend is the method for jQuery to expand static attributes. It can be seen that the noConflict method is directly attached to jQuery. Inside an anonymous function, the internal variables _ jQuery and _ $ are defined respectively to store windows. jQuery and window. $. This is used to use internal variables to save the statuses of the two global variables before jQuery runs, so that the two variables can be restored in the subsequent conflict-proof operations. NoConflict can deal with the conflict between the $ and jQuery variables. By default, $ is processed. If a true parameter is input, the jQuery conflict is handled.
Window. $ === jQuery is used to determine whether the global variable is equal to jQuery. If it is equal to jQuery, the global variable $ is the variable before jQuery is run (stored in the Internal Variable _ $ ); deep & window. jQuery === when deep conflict processing is enabled and the global variable jQuery is equal to the internal jQuery, The Global jQuery is restored to the previous state. To judge window. $ === jQuery and window. jQuery = jQuery, it means to protect the Defined variables from being overwritten. The following code:

// Introduce the jQuery library var $ = "String"; var jq = jQuery. noconflict (); var jQuery = "This is a line"; var j = jq. noconflict (true); console. log ($); // if there is no window. $ == jQuery, then $ will be equal to undefined instead of "String ". Console. log (jQuery); // same as above. If window. jQuery = jQuery is not determined, The redefined jQuery will be overwritten by undefined.

Participate in the entire running process:

NoConflict returns the jQuery constructor in the jQuery library. Use it as much as $!