华山资源网

关于jQuery库冲突的完美解决办法
网络编程 2024/11/15 佚名
3 1

前言

一次面试中面试官问到jQuery和别的库冲突怎么解决？虽然以前看过，但是我已经不记得了。

我的思路就是如果让我来设计，那我就用一个默认值$，不传参数，那就用$，最后就挂载在window.$上，传参数就用传入名字，比如传入jq，那我就挂载在window.jq上。

var myControl="jq";
(function(name){
 var $=name ||"$"; //name存在$的值就是name的值，不存在或为null，$的值为字符串"$"
 console.log($);
 window[$]=function(){
 alert("123");
 }
})(myControl)
window[myControl]();

事实上这肯定不是jquery解决冲突的办法了。那就看看jQuery怎么解决冲突吧。

jQuery多个版本或和其他js库冲突主要是常用的$符号的冲突。

一、冲突的解决

1、同一页面jQuery多个版本冲突解决方法

<body>
<!-- 引入1.6.4版的jq -->
<script src="/UploadFiles/2021-04-02/jquery.js">


2、jQuery库在其他库之后导入




jQuery noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。


1、可以通过jQuery全名替代简写的方式来使用 jQuery


在其他库和jQuery库都加载完毕后，可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaSript库。然后就可以在程序里将jQuery()函数作为jQuery对象的制造工厂。





<script src="/UploadFiles/2021-04-02/prototype.js">


2、自定义一个快捷方式


noConflict() 可返回对 jQuery 的引用，可以把它存入自定义名称，例如jq,$J变量，以供稍后使用。


这样可以确保jQuery不会与其他库冲突，同时又使用自定义一个快捷方式。





<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){   //使用jQuery
 $j("p").click(function(){
 alert( $j(this).text() );
 });
});

$("pp").style.display = 'none'; //使用prototype
</script>





3、在不冲突的情况下仍然用$


如果想在jQuery 代码块使用 $ 简写，不愿意改变这个快捷方式，可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 ， 而在函数外，依旧不得不使用 "jQuery"。





<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(document).ready(function($){
 $("p").click(function(){ //继续使用 $ 方法
 alert( $(this).text() );
 });
});
//或者如下
jQuery(function($){   //使用jQuery
 $("p").click(function(){ //继续使用 $ 方法
 alert( $(this).text() );
 });
});
</script>





或者使用IEF语句块，这应该是最理想的方式，因为可以通过改变最少的代码来实现全面的兼容性。


在我们自己写jquery插件时,应该都使用这种写法，因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。





<script type="text/javascript">
jQuery.noConflict();  //将变量$的控制权让渡给prototype.js
(function($){   //定义匿名函数并设置形参为$
 $(function(){   //匿名函数内部的$均为jQuery
 $("p").click(function(){ //继续使用 $ 方法
  alert($(this).text());
 });
 });
})(jQuery);    //执行匿名函数且传递实参jQuery

$("pp").style.display = 'none'; //使用prototype
</script>





3、jQuery库在其他库之前导入




jQuery库在其他库之前导入，$的归属权默认归后面的JavaScript库所有。那么可以直接使用"jQuery"来做一些jQuery的工作。


同时，可以使用$()方法作为其他库的快捷方式。这里无须调用jQuery.noConflict()函数。





<!-- 引入 jQuery -->
<script src="/UploadFiles/2021-04-02/jquery.js">


二、原理




1、源码




源码：看一下源码里怎么做到的





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="/UploadFiles/2021-04-02/jquery-2.2.4.js">


释放jQuery控制权例子


参数deep的作用：deep用来放弃jQuery对外的接口。


 如下，noConflict()不写参数，弹出jQuery为构造函数。





<script>
 var $ = 123;
 var jQuery=456;
</script>
<script src="/UploadFiles/2021-04-02/jquery-2.0.3.js">


关于jQuery库冲突的完美解决办法




如果写个参数true，会弹出456。





<script>
 var $ = 123;
 var jQuery=456;
</script>
<script src="/UploadFiles/2021-04-02/jquery-2.0.3.js">


总结


以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。


                                

                                

                                     

                                
华山资源网 Design By www.eoogi.com

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            

                        

                        

                            
                            
                        

                        
                        
华山资源网 Design By www.eoogi.com

                        
                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
www.eoogi.com
                                            
                                                华山资源网 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            120,135影音资源
                                        

                                        

                                            344,641技术资源
                                        

                                        

                                            22,817软件资源
                                        

                                        

                                            435,032站长资源

更新日志

2024年11月15日

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com