极乐门资源网

关于jQuery库冲突的完美解决办法
网络编程 2025/1/12 佚名
2 0
极乐门资源网 Design By www.ioogu.com

前言

一次面试中面试官问到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">


总结


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


                                

                                

                                     

                                

                                    标签：
                                        
jquery冲突解决办法,jquery,版本冲突解决,jquery,冲突解决

                                     

                                
极乐门资源网 Design By www.ioogu.com

                            

                        

                        

                            

                                极乐门资源网
                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            

                        

                        

                            
                            
                        

                        
                        
极乐门资源网 Design By www.ioogu.com

                        

                            

                                
                                
                                    评论“关于jQuery库冲突的完美解决办法”
                                
                            

                            

                                

                                    
                                    

                                    

                                        
暂无关于jQuery库冲突的完美解决办法的评论...

                                    

                                

                            

                        

                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
www.ioogu.com
                                            
                                                极乐门资源网 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            139,976影音资源
                                        

                                        

                                            144,792福利资源
                                        

                                        

                                            21,817软件资源
                                        

                                        

                                            631,128技术资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

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