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; } });
在jQuery加载的时候，通过事先声明的_jQuery变量获取到当前window.jQuery，通过_$获取到当前window.$。
通过jQuery.extend()把noConflict挂载到jQuery下面。所以我们在调用的时候都是jQuery.noConflict()这样调。
在调用noConflict()时做了2个判断，
第一个if，把$的控制权交出去。
第二个if，在noConflict()传参的时候把，jQuery的控制权交出去。
最后noConflict()返回jQuery对象，用哪个参数接收，哪个参数将拥有jQuery的控制权。
2、 验证
//冲突 var $ = 123; //假设其他库中$为123 $( function () { console.log($); //报错Uncaught TypeError: $ is not a function } );
解决冲突
//解决冲突 var jq = $.noConflict(); var $ = 123; jq(function () { alert($); //123 });
释放$控制权例子
<script> var $ = 123; // window.$是123，存储在私有的_$上。 </script> <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <body> <div>aaa</div> <script> var jq = $.noConflict();//当window.$===jQuery的时候，把_$赋给了window.$。 jq(function () { alert($); //123 }); </script>
释放jQuery控制权例子
参数deep的作用：deep用来放弃jQuery对外的接口。
如下，noConflict()不写参数，弹出jQuery为构造函数。
<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); //构造函数 }); </script>
如果写个参数true，会弹出456。
<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); //写了true或者参数的时候，deep为真window.jQuery===jQuery为真，所以进入if条件。把456赋值给window.jQuery jq(function () { alert(jQuery); //456 }); </script>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: