JQuery. noConflict () and jquery. noconflict

JQuery. noConflict () and jquery. noconflict

JQuery is currently one of the most widely used front-end frameworks, with a large number of third-party libraries and plug-ins developed based on it. To avoid global namespace pollution, jQuery provides the jQuery. noConflict () method to resolve variable conflicts. This method is undoubtedly very effective. Unfortunately, jQuery's official documentation does not clearly describe this method, and many developers do not know when they call jQuery. what happened when noConflict () occurs, resulting in many problems during use. Despite this, the implementation principle behind jQuery. noConflict () is still worth learning by Web developers and becomes a powerful tool to solve problems similar to global namespace pollution.

What is the role of jQuery. noConflict?
JQuery. noConflict () has only one purpose: it allows you to load multiple jQuery instances on the same page, especially different versions of jQuery. You may wonder why you need to load/use multiple jQuery objects of different versions on a page? Generally, there are two cases. First, your business code uses the latest jQuery library, and the third-party plug-ins you choose depend on earlier jQuery libraries. Second, you are maintaining a system, its Existing Business Code references older jQuery libraries for various reasons. Your newly developed modules use jQuery libraries of other versions. In either case, you have to deal with jQuery object/method conflicts. Fortunately, jQuery. noConflict () helps you solve this problem.

What happens when jQuery is loaded?
When jQuery is referenced/loaded by pages, it is encapsulated in an self-executed function (anonymous function, all the variables, functions, and objects it provides are in the executable environment of anonymous functions, and the external environment cannot be called to prevent global namespace pollution.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

JQuery defines two global objects in the anonymous function: jQuery and $, and exposes itself to the external environment. The various public libraries used by the developer are implemented through these two objects, such as jquery.ajax(), jquery.css () and so on. Initially, they point to the same object jQuery (private variable) inside the anonymous function, and use it to access private variables and functions inside the anonymous function. This makes the private variables and functions of anonymous functions remain in the memory after self-execution, and will not be cleared by the garbage collection mechanism of javascript.

window.jQuery = window.$ = jQuery;

When jQuery is loaded by the page, the current page may already have jQuery and $ global variables (for example, loading other third-party libraries, it is also defined internally), which will cause existing objects to be overwritten (global namespace pollution ). To solve this problem, jQuery caches existing global variables internally and stores them in private variables _ jQuery and _ $ for future calls. Therefore, if the jQuery and $ objects do not exist when the page loads the jQuery library, _ jQuery and _ $ are both undefined; otherwise, they both save references to existing jQuery and $ (maybe from a third-party library referenced earlier or a different version of jQuery library ). Then, jQuery overwrites the two global variables and exposes itself to the external environment as described above. Now, the global variables jQuery and $ on the page point to the newly introduced jQuery library.

// Map over jQuery in case of overwrite_jQuery = window.jQuery,// Map over the $ in case of overwrite_$ = window.$,// Otherwise expose jQuery to the global object as usualwindow.jQuery = window.$ = jQuery;

What is the magical effect of jQuery. noConflict?
Pipeline pipeline assumes that the system you maintain has referenced the jQuery library of version 1.7.0, And you have referenced the jQuery library of version 1.10.2 in the newly added function. So, is there a way to re-use jQuery 1.7.0 or two versions of jQuery Library at the same time? The answer is yes, that is jQuery. noConflict (). Actually, with jQuery. noConflict (), you can immediately point the global variables jQuery and $ to the referenced objects. Amazing, right? This is why jQuery caches the referenced objects before exposing itself.
Optional values jQuery. noConflict () accepts an optional Boolean parameter. The default value is false. What is the impact of this parameter? In fact, it is very simple. If you call jQuery. noConflict () or jQuery. noConflict (false), only the global variable $ will be reset to the previous reference value; If jQuery is called. noConflict () or jQuery. noConflict (true), then the global variables jQuery and $ are reset to the previous reference value. This is very important and we recommend that you keep it in mind. When you call jQuery. noConflict (false/true), it returns the current jQuery instance. With this feature, we can rename jQuery.

// "Renaming" jQueryvar jayquery = jQuery.noConflict( true );// Now we can call things like jayquery.ajax(), jayquery.css(), and so on

Let's take a look at the code snippet to see if we really understand the magic noConflict ()

<!-- jQuery and $ are undefined --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><!-- jQuery and $ now point to jQuery 1.10.2 --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"><!-- jQuery and $ now point to jQuery 1.7.0 --><script>jQuery.noConflict();</script><!-- jQuery still points to jQuery 1.7.0; $ now points to jQuery 1.10.2 --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"><!-- jQuery and $ now point to jQuery 1.6.4 --><script>var jquery164 = jQuery.noConflict( true );</script><!-- jQuery now points to jQuery 1.7.0; $ now points to jQuery 1.10.2; jquery164 points to jQuery 1.6.4 -->

Avoid conflicts with third-party Libraries
The code snippets above zookeeper demonstrate how to solve the conflict between multiple versions of jQuery. Next, we try to solve the conflict between the jQuery Library and the third-party library. The following code snippets are available in jQuery's official documentation, if you are interested, you can read the official documents carefully to find out the differences.

1. directly use the No-Conflict Mode
Zookeeper uses the No-Conflict mode to rename jQuery and then call it.

<! -- No-conflict mode, jquery. js in prototype. js is introduced later. --> <script src = "prototype. js "> </script> <script src =" jquery. js "> </script> <script> var $ j = jQuery. noConflict (); // $ j references the jQuery object itself. $ j (document ). ready (function () {$ j ("div "). hide () ;}); // $ is redirected to prototype again. object defined in js // document. getElementById (). mainDiv below is a DOM element, not a jQuery object. window. onload = function () {var mainDiv =$ ("main") ;}</script>

2. Use self-executed function Encapsulation
Zookeeper uses this method. You can continue to use standard $ objects in anonymous functions. This is also the method used by many jQuery plug-ins. Note that with this method, the function cannot use the $ object defined by prototype. js.

<! -- Jquery. js in prototype. js is introduced later. --> <script src = "prototype. js "> </script> <script src =" jquery. js "> </script> <script> jQuery. noConflict (); (function ($) {// Your jQuery code here, using the $}) (jQuery); </script>

3. Use the standard jQuery (document). ready () function
  ICT if the jQuery library is introduced before other libraries, the jQuery and $ defined in jQuery will be overwritten by third-party libraries. At this time, using noConflict () makes no sense. The solution is simple, and jQuery's standard call method is used directly.

<! -- Jquery. js in prototype. js was introduced before. --> <script src = "jquery. js "> </script> <script src =" prototype. js "> </script> <script> // Use full jQuery function name to reference jQuery. jQuery (document ). ready (function () {jQuery ("div "). hide () ;}); // or jQuery (function ($) {// Your jQuery code here, using the $ }); // Use the $ variable as defined in prototype. jswindow. onload = function () {var mainDiv =$ ("main") ;}; </script>

The above describes how to use jQuery. noConflict (). I hope you can enjoy it in minutes.JQuery. noConflict ().

Articles you may be interested in:

• "JQuery" Name Conflict is solved using noConflict
• NoConflict () method in jQuery
• Jquery plug-in conflict (jquery. noconflict) Solution
• Implementation principle decomposition of noconflict functions in jQuery
• Examples of noConflict () usage in jQuery
• JQuery. noConflict ()