JQuery library conflict solution, jquery library Solution
In an interview, the interviewer asked how to solve the conflict between jQuery and other libraries? I have read it before, but I do not remember it.
My idea is that if I want to design it, I will use a default value of $. If no parameter is set, I will use $ and mount it to the window. $, the parameter is passed in with the name, for example, passed in jq, then I mounted in window. jq.
Var myControl = "jq"; (function (name) {var $ = name | "$"; // If name exists, $ is the value of name, which does not exist or is null, $ is the string "$" console. log ($); window [$] = function () {alert ("123") ;}) (myControl) window [myControl] ();
In fact, this is definitely not the way jquery solves the conflict. Let's see how jQuery solves the conflict.
JQueryMultiple versionsOrAnd other js LibrariesA conflict is mainly a conflict of commonly used $ symbols.
I. Conflict Resolution 1. multiple versions of jQuery on the same page conflict solution<Body> <! -- Introduce jq version 1.6.4 --> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"> </script> <script> var jq164 = jQuery. noConflict (true); </script> <! -- Introduce jq version 1.4.2 --> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"> </script> <script> var jq142 = jQuery. noConflict (true); </script> <script> (function ($) {// At this time $ is the jQuery-1.6.4 $ ('#') ;}) (jq164 ); </script> <script> jq142 (function ($) {// At this time $ is the jQuery-1.4.2 $ ('#') ;}); </script> </body>2. The jQuery library is imported after other libraries
The jQuery noConflict () method releases the $ identifier control so that other scripts can use it.
1. You can use jQuery to replace the full name with the short name.After loading other libraries and jQuery libraries, you can call the jQuery. noConflict () function at any time to hand over the control of variable $ to other JavaSript libraries. Then, the jQuery () function can be used as the manufacturing factory of jQuery objects in the program.
<Script src = "prototype. js "type =" text/javascript "> </script> <script src =" jquery. js "type =" text/javascript "> </script> <p id =" pp "> test --- prototype </p> <p> test --- jQuery </p> <script type = "text/javascript"> jQuery. noConflict (); // assign control of variable $ to prototype. js. The full name can be left empty. JQuery (function () {// use jQuery ("p "). click (function () {alert (jQuery (this ). text () ;};}); // You cannot write $ again here. $ represents prototype. $ symbol defined in js. $ ("Pp"). style. display = 'none'; // use prototype </script>2. Customize a shortcut
NoConflict () can return a reference to jQuery and store it in custom names, such as jq and $ J variables for later use.
This ensures that jQuery does not conflict with other libraries and uses a custom shortcut.
<Script type = "text/javascript"> var $ j = jQuery. noConflict (); // customize a short shortcut $ j (function () {// use jQuery $ j ("p "). click (function () {alert ($ j (this ). text () ;}) ;}; $ ("pp "). style. display = 'none'; // use prototype </script>3. Use $
If you want to use the $ abbreviation in the jQuery code block and do not want to change this shortcut, you can pass the $ symbol as a variable to the ready method. In this way, you can use the $ symbol in the function, but you still have to use "jQuery" outside the function ".
<Script type = "text/javascript"> jQuery. noConflict (); // assign control of variable $ to prototype. jsjQuery (document ). ready (function ($) {$ ("p "). click (function () {// continue to use the $ method alert ($ (this ). text ();}); // or the following jQuery (function ($) {// use jQuery $ ("p "). click (function () {// continue to use the $ method alert ($ (this ). text () ;}); </script>
Or use IEF statement blocks, which should be the best way, because full compatibility can be achieved by changing the minimum code.
This method should be used when we write jquery plug-ins on our own, because we do not know how to introduce various js libraries in sequence during the specific work process, however, the syntax of such statement blocks can avoid conflicts.
<Script type = "text/javascript"> jQuery. noConflict (); // assign control of variable $ to prototype. js (function ($) {// defines an anonymous function and sets the parameter to $ (function () {// $ inside the anonymous function is jQuery $ ("p "). click (function () {// continue to use the $ method alert ($ (this ). text () ;};}) ;}( jQuery); // executes an anonymous function and passes the real parameter jQuery $ ("pp "). style. display = 'none'; // use prototype </script>3. The jQuery library is imported before other libraries.
The jQuery library is imported before other libraries, and the $ permission is owned by the subsequent JavaScript library by default. Then you can directly use "jQuery" to do some jQuery work.
You can also use the $ () method as a shortcut for other libraries. You do not need to call the jQuery. noConflict () function.
<! -- Introduce jQuery --> <script src = ".../scripts/jquery. js" type = "text/javascript"> </script> <! -- Introduce prototype --> <script src = "lib/prototype. js "type =" text/javascript "> </script> <body> <p id =" pp "> Test-prototype (hidden) </p> <p> Test-jQuery (events to be bound to click) </p> <script type = "text/javascript"> jQuery (function () {// directly use jQuery, there is no need to call "jQuery. noConflict () "function. JQuery ("p "). click (function () {alert (jQuery (this ). text () ;}) ;}; $ ("pp "). style. display = 'none'; // use prototype </script> </body>Ii. Principle 1. Source Code
Source code: Let's see how the source code works.
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; }});
When jQuery is loaded, the current window. jQuery is obtained through the pre-declared _ jQuery variable, and the current window. $ is obtained through _ $.
Use jQuery. extend () to mount noConflict to jQuery. So we call jQuery. noConflict.
Two judgments were made when noConflict () was called,
If is the first one, the control of $ is handed over.
The second if, when noConflict () transmits the parameter, hand over the control of jQuery.
Finally, noConflict () returns the jQuery object, which parameter is used to receive the object, and which parameter will have control of jQuery.
2. Verification// Conflict var $ = 123; // assume that $ is 123 $ (function () {console. log ($); // error Uncaught TypeError: $ is not a function });
Resolve Conflicts
// Resolve the conflict var jq =$. noConflict (); var $ = 123; jq (function () {alert ($); // 123 });
Example of releasing $ Control
<Script> var $ = 123; // window. $ is 123, which is stored on private _ $. </Script> <script src = "https://code.jquery.com/jquery-2.2.4.js"> </script> <body> <div> aaa </div> <script> var jq = $. noConflict (); // when window. $ == when jQuery is used, _ $ is assigned to window. $. Jq (function () {alert ($); // 123}); </script>
Example of releasing jQuery Control
Parameter deep: deep is used to discard jQuery's external interface.
As shown in the following figure, no parameters are written for noConflict (). jQuery is the constructor in the pop-up window.
<Script> var $ = 123; var jQuery = 456; </script> <script src = "https://code.jquery.com/jquery-2.0.3.js"> </script> <body> <div> aaa </div> <script> var jq = $. noConflict (); jq (function () {alert (jQuery); // constructor}); </script>
If a parameter is set to true, 456 is displayed.
<Script> var $ = 123; var jQuery = 456; </script> <script src = "https://code.jquery.com/jquery-2.0.3.js"> </script> <body> <div> aaa </div> <script> var jq = $. noConflict (true); // when the value is true or the parameter is set, deep is true window. jQuery === jQuery is true, so the if condition is entered. Assign 456 to window. jQuery jq (function () {alert (jQuery); // 456}); </script>
Starof, the author of this article, is constantly learning and growing because of the changing knowledge. The content of this article is also updated from time to time. To avoid misleading readers and facilitate tracing, Please repost the Source: Ghost.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
