兼容第三方框架 jQuery多库共存机制详解-jquery第三方插件

在Web项目开发中，经常需要引用第三方JavaScript库，如果第三方JavaScript库与自已的JavaScript库使用相同的全局变量，是一个比较麻烦的事。程序员多半可能会修改其中一方的JavaScript代码。能不能有一个比较好的方法解决呢？让我们看一下jQuery如何做到的。

jQuery多库共存机制指jQuery库完全兼容第三方库，例如jQuery中使用$做为函数入口,在该页面同时引入另一个库,其中也使用了$做为函数名。因此jQuery与该库发生冲突，例1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML> 
 <HEAD> 
  <TITLE> New Document </TITLE> 
    <script src = "http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" language = "javascript"></script> 
    <SCRIPT LANGUAGE="JavaScript"> 
  <!--  
 //第三方库  
  function $(str)  
  {  
  return document.getElementById(str) ;  
  }  
 
  function jQuery(str)  
  {  
  return document.getElementById(str) ;  
  }  
  //--> 
  </SCRIPT> 
 </HEAD> 
 
 <BODY> 
 <input type = "text" id = "txt1" value = "aa" /> 
 </BODY> 
</HTML>

在如上示例中第三方库同时使用了"$"与"jQuery",此时jQuery入口被第三方库覆盖了。jQuery提供了noConflict函数解决冲突，例2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML> 
 <HEAD> 
  <TITLE> New Document </TITLE> 
    <script src = "http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" language = "javascript"></script> 
 <script> 
  //兼容代码  
  var $1 = $.noConflict();  
  $1(document).ready(function(){  
   alert($1("#txt1").val())  
   alert($("txt1").value) ;  
  })  
 </script> 
    <SCRIPT LANGUAGE="JavaScript"> 
  <!--  
 //第三方库  
  function $(str)  
  {  
  return document.getElementById(str) ;  
  }  
 
  function jQuery(str)  
  {  
  return document.getElementById(str) ;  
  }  
  //--> 
  </SCRIPT> 
 </HEAD> 
 
 <BODY> 
 <input type = "text" id = "txt1" value = "aa" /> 
 </BODY> 
</HTML>

noConflict重新将jQuery入口指针指向$1,此时可以用$1访问jQuery库,其中兼容代码要写在第三方库载入之前(如果写在之后，jQuery的$和jQuery入口被第三方库覆盖了,无法调用兼容代码)。

在实际应用中，如果jQuery载入位置在第三方库之后，jQuery会覆盖第三方JavaScript库么？如下代码，例3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML> 
 <HEAD> 
  <TITLE> New Document </TITLE> 
    <SCRIPT LANGUAGE="JavaScript"> 
  <!--  
 //第三方库  
  function $(str)  
  {  
  return document.getElementById(str) ;  
  }  
 
  function jQuery(str)  
  {  
  return document.getElementById(str) ;  
  }  
  //--> 
  </SCRIPT> 
    <script src = "http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" language = "javascript"></script>   
 </HEAD> 
 
 <BODY> 
 <input type = "text" id = "txt1" value = "aa" /> 
 </BODY> 
</HTML>

此处jQuery加载完毕已经将第三方库覆盖了。如果想调用第三方库，似乎有点困难。当然jQuery已经提供了解决方法，例4:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML> 
 <HEAD> 
  <TITLE> New Document </TITLE> 
    <SCRIPT LANGUAGE="JavaScript"> 
  <!--  
 //第三方库  
  function $(str)  
  {  
  return document.getElementById(str) ;  
  }  
 
  function jQuery(str)  
  {  
  return document.getElementById(str) ;  
  }  
  //--> 
  </SCRIPT> 
    <script src = "http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" language = "javascript"></script>   
 <script> 
  //兼容代码  
  var $1 = $.noConflict();  
  $1(document).ready(function(){  
   alert($1("#txt1").val())  
   alert($("txt1").value) ;  
  })  
 </script> 
 </HEAD> 
 
 <BODY> 
 <input type = "text" id = "txt1" value = "aa" /> 
 </BODY> 
</HTML>

例4中同样在jQuery载入之后调用"兼容代码",和例2兼容代码相同,但意义上有差别.在例2中第三方库覆盖了jQuery,其中兼容代码的作用在第三方库覆盖jQuery前，jQuery入口指针赋给"$1".在例4中与上相反,由于jquery库在载入完成时，已经将第三方库覆盖了,此时"$"指向jQuery库,兼容代码作用是将"$"重新指向第三方库.同时充许重新定义jQuery入口.

jQuery兼容机制实现原理(示例代码以jQuery-1.4.3为例)：

//29-32行  
// Map over jQuery in case of overwrite  
_jQuery = window.jQuery,  
 
// Map over the $ in case of overwrite  
_$ = window.$,  
   
//394-402行  
 noConflict: function( deep ) {  
  window.$ = _$;  
 
  if ( deep ) {  
   window.jQuery = _jQuery;  
  }  
 
  return jQuery;  
 },

其中29-32行，jQuery执行前，将window.$,window.jQuery值保存到_$和_jQuery中(此时函数指针"jQuery","$"可能指向第三方库,此处为兼容处理做准备)。

394-402行将jQuery和$重新赋给window.$,window.jQuery,同时返回jQuery函数指针. 不难看出调用noConflict函数后，被jQuery"占用"的$与"jQuery"又交还给第三方库了。

【编辑推荐】