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

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

成都创新互联是一家专业提供公主岭企业网站建设,专注与成都网站设计、网站制作、H5网站设计、小程序制作等业务。10年已为公主岭众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

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

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.   
    4. 
  
  
  
  4.    New Document  
    5. 
  
  
  
  5.      
    6. 
  
  
  
  6.      
    7. 
  
  
  
  7.    
    8. 
  
  
  
  8.    
    9. 
  
  
  
  9.   
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.   
    12. 
  
  
  
  12.   
    13. 
  
  
  
  13.   
    14. 
  
  
  
  14.  
    15.

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

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.   
    4. 
  
  
  
  4.    New Document  
    5. 
  
  
  
  5.      
    6. 
  
  
  
  6.   
    7. 
  
  
  
  7.      
    8. 
  
  
  
  8.    
    9. 
  
  
  
  9.    
    10. 
  
  
  
  10.   
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12.   
    13. 
  
  
  
  13.   
    14. 
  
  
  
  14.   
    15. 
  
  
  
  15.  
    16.

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

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

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.   
    4. 
  
  
  
  4.    New Document  
    5. 
  
  
  
  5.      
    6. 
  
  
  
  6.    
    7. 
  
  
  
  7.    
    8. 
  
  
  
  8.        
    9. 
  
  
  
  9.   
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.   
    12. 
  
  
  
  12.   
    13. 
  
  
  
  13.   
    14. 
  
  
  
  14.  
    15.

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

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.   
    4. 
  
  
  
  4.    New Document  
    5. 
  
  
  
  5.      
    6. 
  
  
  
  6.    
    7. 
  
  
  
  7.    
    8. 
  
  
  
  8.        
    9. 
  
  
  
  9.   
    10. 
  
  
  
  10.   
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12.   
    13. 
  
  
  
  13.   
    14. 
  
  
  
  14.   
    15. 
  
  
  
  15.  
    16.

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

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

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

其中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应用程序性能指标和调优

网站题目：兼容第三方框架jQuery多库共存机制详解
当前网址：http://www.shufengxianlan.com/qtweb/news34/17434.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站建设知识

各行业网站

响应式网站设计　　 　重庆网站设计　　 　重庆服务器托管　　 　成都服务器租用　　 　成都网络营销　　 　成都网站建设　　 　国泰民安消防　　 　成都云主机　　 　四川中建建业　　 　四川胜锦安防　　 　雅安做网站　　 　广安网站制作公司　　 　班戈纳美网站　　 　全网营销　　 　商城网站　　 　崇州做网站　　 　绵阳主机托管　　 　网站SEO优化　　 　成都品牌网站建设　　 　四川成都做网站