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

2024-12-02 11:31:05

前言

一次面试中面试官问到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中定义的$符号。

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

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="../../scripts/jquery.js" type="text/javascript"></script>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>

<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>

<script type="text/javascript">
jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
 jQuery("p").click(function(){
  alert( jQuery(this).text() );
 });
});

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

二、原理

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="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>

总结

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

解决jquery版本冲突的有效方法

用过jQuery的朋友都知道jQuery不同版本会引发冲突,本文就此问题提出有效的解决方案如下: 案例:解决jQuery1.3.2和1.4.2的冲突.(本例已测试通过!) 第一步:在1.4.2的源代码的最后加上一句 : var $j4 = jQuery.noConflict(true); 之所以在源码这里加,而不是像大多数文章提的在要用到的时候加,这是因为很多基于1.4.2的插件都要加,在这里加可以避免过多插件加这句代码导致重复.这一句是将1.4.2的jQuery和$的引用权限全部放弃.也就是基
jQuery库与其他JS库冲突的解决办法

复制代码代码如下: <script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); // Use jQuery via jQuery(-) jQuery(document).ready(function(){ jQuery("div").hide()
jquery插件冲突(jquery.noconflict)解决方法分享

许多的 JS 框架类库都选择使用$符号作为函数或变量名,jQuery是其中最为典型的一个.在 jQuery 中,$ 符号只是 window.jQuery 对象的一个引用,因此即使 $ 被删除,window.jQuery 依然是保证整个类库完整性的坚强后盾.jQuery 的 API 设计充分考虑了多框架之间的引用冲突,我们可以使用 jQuery.noConflict 方法来轻松实现控制权的移交. jQuery.noConflict 方法包含一个可选的布尔参数[1],用以决定移交 $ 引用的同时是否
jquery与js函数冲突的两种解决方法

如果您还有别的要求,想继续使用原先的$(),同时还需要与别的类库不冲突的话,还有两种解决方法其一: 复制代码代码如下: jQuery.noConflict(); jQuery(function($) { $("p").click(function() //在函数内继续可以使用jquery类库的$()方法 { alert($(this).text()); }) }) var JsCOM_cr = $("cr"); // 在函数外面,照样可以使用JsCOM.js的$
找到了一篇jQuery与Prototype并存的冲突的解决方法

以前好像在哪里看到过说jQuery与prototype存在冲突,但一直没在意.今天把自己用jquery框架写好的消息提示框特效放到公司原来的系统发现所有的消息提示效果都罢工了! 汗了半天还是没有发现原因,突然想到jquery与prototype的冲突问题,这才发现公司原来的系统很多页面都调用了prototype框架.知道了原因就想办法解决吧,总不至于让我脱离jquery重新写一遍吧,去网上狂搜了一番终于找到了一些解决办法,这就是: 1.将jquery.js放到prototype.js后面(这个是
解决jquery插件冲突的问题

今天做了一个例子,用jquery和jquery插件 lightbox做了图片浮动放大效果,没有任何问题. 然后再加了一个导航栏的js,结构导航的js和图片浮动放大的js发生了冲突, 要么就只有导航栏的js有效,要么就只有图片浮动js有效. 结果上网搜了搜,解决办法有如下 jQuery.noConflict() 概述运行这个函数将变量$的控制权让渡给第一个实现它的那个库. 这有助于确保jQuery不会与其他库的$对象发生冲突. 在运行这个函数后,就只能使用jQuery变量访问jQuery对象.例
jQuery避免$符和其他JS库冲突的方法对比

jQuery中需要用到$符号,如果其他js库(例如大名鼎鼎的prototype)也定义了$符号,那么就会造成冲突,会影响到js代码的正常执行.jqeury提供了一些方案来避免这个问题,让我们来看看这几个方案有什么区别方案1: 引入noConflict(),将$替换为其他符号复制代码代码如下: var $j = jQuery.noConflict(); $j(document).ready(function(){ $j("#btn1").click(function(){ aler
jQuery与其它库冲突的解决方法

(注意:默认情况下,jQuery用$作为自身的缩写而以) 如果jQuery类库和别的类库冲突的话,可以使用jQuerynoConflict()函数来将变量$的控制权移交出给其它的javaScipt库.看下面小片断代码 <script type="text/javascript" src="../JS/JsCOM.js"></script> <script type="text/javascript" src=&quo
加载jQuery后$冲突的解决办法

网站开发中的javasript部分,现在的开发人员很少有再去手工写document.getElementById()的了吧,那还不得累死,你还真别说,getElementById还真不好写,字母还挺多又区分大小写,一不留神就写错了.因此一下诸如用$来实现document.getElemetnById()就常见了. 复制代码代码如下: function $() { var elements = new Array(); for (var i = 0; i < arguments.length;
JQuery的$和其它JS发生冲突的快速解决方法

众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点. 然后,JS插件并非只有JQuery,还有prototype.js 等其它比较好的插件.它们也使用$.所以有时候同时使用这个两个JS插件的时候,就会出现$的使用权冲突问题.现在我们来看看如何解决这个冲突问题.请看下文: 我们都知道JQuery有一个函数,jquery.noConflict() 它的作用是讲$的控制权转让出去.然后我们可以通过jQuery代替$来获

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

相关推荐

随机推荐