夏日博客

A-A+

jQuery中noConflict解决冲突问题

2016年01月08日 前端设计 暂无评论 阅读 5 views 次

javascript库使用 $ 作为一个函数或者变量名，正如jquery做的一样。在jQuery下 $只是jQuery的一个别名，所以不使用 $所有功能都是有效的。如果我们需要同时使用jQuery和其他javascript库，我们可以使用 $.noConflict()把 $的控制权交给其他库。旧引用的$ 被保存在jQuery的初始化; noConflict() 简单的恢复它们

noConflict方法可以处理一些标记占用的冲突问题（这是目前我觉得的实用的用途）

jQuery.noConflict()函数用于让出jQuery库对变量$(和变量jQuery)的控制权。

一般情况下，在jQuery库中，变量$是变量jQuery的别名，它们之间是等价的，例如jQuery("p")和$("p")是等价的。由于变量$只有一个字符，并且特点鲜明，因此我们更加习惯使用$来操作jQuery库。
不过，其他JS库也可能使用变量$来进行操作，例如Prototype库。这个时候两个库可能会由于变量$的控制权问题而发生冲突。

此时，你可以使用该函数让出jQuery库对变量$的控制权，将该变量交给上一个实现它的JS库，之后我们只能使用变量jQuery来操作jQuery库。

此外，使用该函数，还可以同时让出变量$和变量jQuery的控制权，从而实现多个不同版本的jQuery库共存(详情见下面的示例说明)。

该函数属于全局jQuery对象。

$.noConflict()可以移交$的控制权，而如果是$.noConflict(true)，那么jQuery和$都会消失，重新赋值如：

var $ = window.$.noConflict(true), jQuery = $

这样就能避免冲突在局部使用需要使用的jQuery版本啦。

jQuery noConflict() 方法

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

实例

当然，您仍然可以通过全名替代简写的方式来使用 jQuery,代码如下:

  1. $.noConflict();  
  2. jQuery(document).ready(function(){  
  3.   jQuery("button").click(function(){  
  4.     jQuery("p").text("jQuery 仍在运行！");  
  5.   });  
  6. });  

实例

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：

  1. var jq = $.noConflict();  
  2. jq(document).ready(function(){  
  3.   jq("button").click(function(){  
  4.     jq("p").text("jQuery 仍在运行！");  
  5.   });  
  6. });  

实例

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

  1. $.noConflict();  
  2. jQuery(document).ready(function($){  
  3.   $("button").click(function(){  
  4.     $("p").text("jQuery 仍在运行！");  
  5.   });  
  6. });  

加载两个版本的jQuery（这是不推荐）， 第二个版本中调用$.noConflict(true) 将返回全局的jQuery变量给第一个版本,代码如下:

  1. <script type="text/javascript" src="other_lib.js"></script>  
  2. <script type="text/javascript" src="jquery.js"></script>  
  3. <script type="text/javascript">  
  4.   $.noConflict();  
  5.   // Code that uses other library's $ can follow here.  
  6. </script>  

这里有个技巧对于解决冲突特别有效。.ready() 方法可以给 jQuery 对象取个别名，这样就能够在传给 .ready() 的回调函数的内部继续使用 $ 而不用担心冲突（愚人码头注：原因：.ready()是一个闭包）,代码如下:

  1. <script type="text/javascript" src="other_lib.js"></script>  
  2. <script type="text/javascript" src="jquery.js"></script>  
  3. <script type="text/javascript">  
  4.   $.noConflict();  
  5.   jQuery(document).ready(function($) {  
  6.     // Code that uses jQuery's $ can follow here.  
  7.   });  
  8.   // Code that uses other library's $ can follow here.  
  9. </script>  

如果必要的话，我们可以释放jQuery名字，传递true作为一个参数给这个方法。 这不是必须的，如果我们必须这样做的话（举个例子，如果我们在同一个页面上使用多个版本的jQuery库）， 我们必须考虑到大多数插件依靠jQuery存在的变量,这种情况下，可能导致插件不能正常操作。

例子:

Example:将$引用的对象映射回原始的对象,代码如下:

  1. jQuery.noConflict();  
  2. // Do something with jQuery  
  3. jQuery("div p").hide();  
  4. // Do something with another library's $()  
  5. $("content").style.display = 'none';  

Example:恢复使用别名$，然后创建并执行一个函数，在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中，原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效,代码如下:

  1. jQuery.noConflict();  
  2. (function($) {  
  3.   $(function() {  
  4.     // more code using $ as alias to jQuery  
  5.   });  
  6. })(jQuery);  
  7. // other code using $ as an alias to the other library  

Example: 你可以通过jQuery.noConflict() ready约束为一小段代码,代码如下:

  1. var j = jQuery.noConflict();  
  2. // Do something with jQuery  
  3. j("div p").hide();  
  4. // Do something with another library's $()  
  5. $("content").style.display = 'none';  

Example:创建一个新的别名用以在接下来的库中使用jQuery对象,代码如下:

  1. var dom = {};  
  2. dom.query = jQuery.noConflict(true);  
  3. Result:  
  4.   
  5. // Do something with the new jQuery  
  6. dom.query("div p").hide();  
  7. // Do something with another library's $()  
  8. $("content").style.display = 'none';  
  9. // Do something with another version of jQuery  
  10. jQuery("div > p").hide();  
  11. Example: Load two versions of jQuery (not recommended). Then, restore jQuery's globally scoped variables to the first loaded jQuery.  
  12.   
  13. <!DOCTYPE html>  
  14. <html>  
  15. <head>  
  16.   <script src="http://code.jquery.com/jquery-latest.js"></script>  
  17. </head>  
  18. <body>  
  19.    
  20. <div id="log">  
  21.   <h3>Before $.noConflict(true)</h3>  
  22. </div>  
  23. <script src="http://code.jquery.com/jquery-1.6.2.js"></script>  
  24.    
  25. <script>  
  26. var $log = $( "#log" );  
  27.    
  28. $log.append( "2nd loaded jQuery version ($): " + $.fn.jquery + "<br>" );  
  29.    
  30. /* 
  31. Restore globally scoped jQuery variables to the first version loaded 
  32. (the newer version) 
  33. */  
  34. jq162 = jQuery.noConflict(true);  
  35.    
  36. $log.append( "<h3>After $.noConflict(true)</h3>" );  
  37. $log.append( "1st loaded jQuery version ($): " + $.fn.jquery + "<br>" );  
  38. $log.append( "2nd loaded jQuery version (jq162): " + jq162.fn.jquery + "<br>" );  
  39. </script>  
  40.    
  41. </body>  
  42. </html>  
标签：

给我留言