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

2020-05-23 06:02:22易采站长站整理

前言

一次面试中面试官问到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="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script> var jq164 = jQuery.noConflict(true); </script>
<!-- 引入1.4.2版的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($){
//此时的$是jQuery-1.6.4
$('#');
})(jq164);
</script>

<script>
jq142(function($){
//此时的$是jQuery-1.4.2
$('#');
});
</script>

</body>

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

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

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

在其他库和jQuery库都加载完毕后,可以在任何时候调用

jQuery.noConflict()
函数来将变量$的控制权移交给其他JavaSript库。然后就可以在程序里将
jQuery()
函数作为jQuery对象的制造工厂。


<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(); //将变量$的控制权让渡给prototype.js,全名可以不调用。
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
//此处不可以再写成$,此时的$代表prototype.js中定义的$符号。