During an interview, the interviewer asked how jQuery and other library conflicts could be resolved. I've seen it before, but I don't remember it.
My idea is that if I were to design it, I would use a default value of $, not pass parameters, then use $, and finally mount it on window. $, and pass parameters with an incoming name, such as jq, then I would mount it on window.jq.
var myControl="jq"; (function(name){ var $=name ||"$"; //name existence $The value is name The value of 0, does not exist or is __________. null，$The value of"$" console.log($); window[$]=function(){ alert("123"); } })(myControl) window[myControl]();
In fact, this is certainly not jquery's solution to the conflict. Let's see how jQuery resolves conflicts.
Multiple versions of jQuery or conflicts with other js libraries are mainly collisions of commonly used $symbols.
I. Conflict Resolution
1. Conflict Resolution for Multiple Versions of jQuery on the Same Page
<body> <!-- Introduce 1.6.4 Edition jq --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script> <script> var jq164 = jQuery.noConflict(true); </script> <!-- Introduce 1.4.2 Edition jq --> <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 point $yes jQuery-1.6.4 $('#'); })(jq164); </script> <script> jq142(function($){ //At this point $yes jQuery-1.4.2 $('#'); }); </script> </body>
2. jQuery library imported after other libraries
The jQuery noConflict() method releases control that will give the $identifier so that other scripts can use it.
1. jQuery can be used by replacing abbreviation with jQuery full name
After the other libraries and jQuery libraries are loaded, the jQuery.noConflict() function can be called at any time to transfer control of the variable $to other JavaSript libraries. Then you can use the jQuery() function as the manufacturing factory of the jQuery object 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(); //Change variables $Transfer of control prototype.js，Full name can not be called. jQuery(function(){ //Use jQuery jQuery("p").click(function(){ alert( jQuery(this).text() ); }); }); //It can't be written here again. $,At this point $representative prototype.js Defined in $Symbol. $("pp").style.display = 'none'; //Use prototype </script>
2. Customize a shortcut
noConflict() returns a reference to jQuery and can be stored in custom names such as jq,$J variables for later use.
This ensures that jQuery does not conflict with other libraries, while using a custom shortcut.
<script type="text/javascript"> var $j = jQuery.noConflict(); //Customize a shorter shortcut $j(function(){ //Use jQuery $j("p").click(function(){ alert( $j(this).text() ); }); }); $("pp").style.display = 'none'; //Use prototype </script>
3. Still used in the absence of conflict$
If you want to use the $abbreviation in the jQuery code block and are unwilling to change this shortcut, you can pass the $symbol as a variable to the read method. This allows you to use the $symbol in a function, but you still have to use "jQuery" outside the function.
<script type="text/javascript"> jQuery.noConflict(); //Change variables $Transfer of control prototype.js jQuery(document).ready(function($){ $("p").click(function(){ //Continue to use $ Method alert( $(this).text() ); }); }); //Or as follows jQuery(function($){ //Use jQuery $("p").click(function(){ //Continue to use $ Method alert( $(this).text() ); }); }); </script>
Or use IEF statement blocks, which should be the best way to achieve full compatibility by changing the least amount of code.
When we write our own jquery plug-ins, we should all use this writing method, because we do not know how to introduce various js libraries sequentially in the specific process of work, and the writing of this statement block can shield conflicts.
<script type="text/javascript"> jQuery.noConflict(); //Change variables $Transfer of control prototype.js (function($){ //Define anonymous functions and set parameters to $ $(function(){ //Inside an anonymous function $All are jQuery $("p").click(function(){ //Continue to use $ Method alert($(this).text()); }); }); })(jQuery); //Execute anonymous functions and pass arguments jQuery $("pp").style.display = 'none'; //Use prototype </script>
3. jQuery library imported before other libraries
JQuery libraries are imported before other libraries, and the ownership of $defaults to the JavaScript libraries that follow. Then you can use "jQuery" directly to do some jQuery work.
At the same time, you can use the $() method as a shortcut for other libraries. There is no 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(Will be hidden)</p> <p >Test-jQuery(Click events to be bound)</p> <script type="text/javascript"> jQuery(function(){ //Direct 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. Principles
1. Source code
Source: 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 $.
Mount noConflict under jQuery through jQuery.extend(). So we call it jQuery.noConflict().
Two judgments were made when noConflict() was called.
First if, hand over control of the dollar.
The second if, when noConflict() is passed on, gives jQuery control.
Finally, noConflict() returns the jQuery object with which parameter to receive and which parameter will have jQuery control.
2. Verification
//conflict var $ = 123; //Assume that in other libraries $For 123 $( function () { console.log($); //Report errors Uncaught TypeError: $ is not a function } );
Conflict resolution
//Conflict resolution var jq = $.noConflict(); var $ = 123; jq(function () { alert($); //123 });
An example of releasing control of $
<script>
var $ = 123; // window.$It's 123, stored privately._$Up.
</script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
<div>aaa</div>
<script>
var jq = $.noConflict();//When window.$===jQuery When_$Given window.$.
jq(function () {
alert($); //123
});
</script>
An example of releasing jQuery control
Function of parameter deep: deep is used to abandon jQuery's external interface.
As follows, noConflict() does not write parameters and pops up jQuery as the constructor.
<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 you write a parameter true, 456 pops up.
<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); //Wrote true Or when parameters are used, deep To be true window.jQuery===jQuery True, so enter if Conditions. Assign 456 to window.jQuery
jq(function () {
alert(jQuery); //456
});
</script>
Author of this article starof Because knowledge itself is changing, the author is constantly learning and growing, and the content of the article is also updated from time to time. In order to avoid misleading readers and facilitate tracing back to the source, please reprint and indicate the source: http://www.cnblogs.com/starof/p/6855186.html If you have any questions, please discuss with me and make progress together.