|
|
51CTO旗下网站
|
|
移动端

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

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

作者:麦田来源:博客园|2010-11-08 09:51

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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <HTML> 
  3.  <HEAD> 
  4.   <TITLE> New Document </TITLE> 
  5.     <script src = "http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" language = "javascript"></script> 
  6.     <SCRIPT LANGUAGE="JavaScript"> 
  7.   <!--  
  8.  //第三方库  
  9.   function $(str)  
  10.   {  
  11.   return document.getElementById(str) ;  
  12.   }  
  13.  
  14.   function jQuery(str)  
  15.   {  
  16.   return document.getElementById(str) ;  
  17.   }  
  18.   //--> 
  19.   </SCRIPT> 
  20.  </HEAD> 
  21.  
  22.  <BODY> 
  23.  <input type = "text" id = "txt1" value = "aa" /> 
  24.  </BODY> 
  25. </HTML> 

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <HTML> 
  3.  <HEAD> 
  4.   <TITLE> New Document </TITLE> 
  5.     <script src = "http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" language = "javascript"></script> 
  6.  <script> 
  7.   //兼容代码  
  8.   var $1 = $.noConflict();  
  9.   $1(document).ready(function(){  
  10.    alert($1("#txt1").val())  
  11.    alert($("txt1").value) ;  
  12.   })  
  13.  </script> 
  14.     <SCRIPT LANGUAGE="JavaScript"> 
  15.   <!--  
  16.  //第三方库  
  17.   function $(str)  
  18.   {  
  19.   return document.getElementById(str) ;  
  20.   }  
  21.  
  22.   function jQuery(str)  
  23.   {  
  24.   return document.getElementById(str) ;  
  25.   }  
  26.   //--> 
  27.   </SCRIPT> 
  28.  </HEAD> 
  29.  
  30.  <BODY> 
  31.  <input type = "text" id = "txt1" value = "aa" /> 
  32.  </BODY> 
  33. </HTML> 

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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <HTML> 
  3.  <HEAD> 
  4.   <TITLE> New Document </TITLE> 
  5.     <SCRIPT LANGUAGE="JavaScript"> 
  6.   <!--  
  7.  //第三方库  
  8.   function $(str)  
  9.   {  
  10.   return document.getElementById(str) ;  
  11.   }  
  12.  
  13.   function jQuery(str)  
  14.   {  
  15.   return document.getElementById(str) ;  
  16.   }  
  17.   //--> 
  18.   </SCRIPT> 
  19.     <script src = "http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" language = "javascript"></script>   
  20.  </HEAD> 
  21.  
  22.  <BODY> 
  23.  <input type = "text" id = "txt1" value = "aa" /> 
  24.  </BODY> 
  25. </HTML> 

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <HTML> 
  3.  <HEAD> 
  4.   <TITLE> New Document </TITLE> 
  5.     <SCRIPT LANGUAGE="JavaScript"> 
  6.   <!--  
  7.  //第三方库  
  8.   function $(str)  
  9.   {  
  10.   return document.getElementById(str) ;  
  11.   }  
  12.  
  13.   function jQuery(str)  
  14.   {  
  15.   return document.getElementById(str) ;  
  16.   }  
  17.   //--> 
  18.   </SCRIPT> 
  19.     <script src = "http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" language = "javascript"></script>   
  20.  <script> 
  21.   //兼容代码  
  22.   var $1 = $.noConflict();  
  23.   $1(document).ready(function(){  
  24.    alert($1("#txt1").val())  
  25.    alert($("txt1").value) ;  
  26.   })  
  27.  </script> 
  28.  </HEAD> 
  29.  
  30.  <BODY> 
  31.  <input type = "text" id = "txt1" value = "aa" /> 
  32.  </BODY> 
  33. </HTML> 

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

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

  1. //29-32行  
  2. // Map over jQuery in case of overwrite  
  3. _jQuery = window.jQuery,  
  4.  
  5. // Map over the $ in case of overwrite  
  6. _$ = window.$,  
  7.    
  8. //394-402行  
  9.  noConflict: function( deep ) {  
  10.   window.$ = _$;  
  11.  
  12.   if ( deep ) {  
  13.    window.jQuery = _jQuery;  
  14.   }  
  15.  
  16.   return jQuery;  
  17.  }, 

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

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

【编辑推荐】

  1. jQuery的运行机制和设计理念
  2. jQuery开发者:你真的需要一个插件吗?
  3. jQuery让开发者恋恋不舍的秘密
  4. jQuery最佳实践:精妙的自定义事件
  5. jQuery应用程序性能指标和调优
【责任编辑:王晓东 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

游戏开发核心技术--剧本和角色创造

《游戏开发核心技术--剧本和角色创造》分“剧本”、“角色”和“游戏玩法”三部分,第一部分着重说明故事的历史、一般故事元素、传统故事设...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊