谈谈 jQuery 中的防冲突机制

开发 前端
jQuery.noConflict 方法包含一个可选的布尔参数[1],用以决定移交 $ 引用的同时是否移交 jQuery 对象本身。

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

jQuery.noConflict 方法包含一个可选的布尔参数[1],用以决定移交 $ 引用的同时是否移交 jQuery 对象本身:

  1. jQuery.noConflict([removeAll]) 

缺省情况下,执行 noConflict 会将变量 $ 的控制权移交给第一个产生 $ 的库;当 removeAll 设置为 true 时,执行 noConflict 则会将 $ 和 jQuery 对象本身的控制权全部移交给第一个产生他们的库。

例如在 KISSY 和 jQuery 混用,并且惯用 $ = KISSY 来简化 API 操作的时候,就能够通过这个方法解决命名冲突的问题。

那么这个机制是如何实现的呢?阅读 jQuery 源码开头[2],首先做的一件事情是这样的:

  1. // Map over jQuery in case of overwrite  
  2. _jQuery = window.jQuery,  
  3.    
  4. // Map over the $ in case of overwrite  
  5. _$ = window.$, 

容易理解的是,jQuery 通过两个私有变量映射了 window 环境下的 jQuery 和 $ 两个对象,以防止变量被强行覆盖。一旦 noConflict 方法被调用,则通过 _jQuery, _$, jQuery, $ 四者之间的差异,来决定控制权的移交方式,具体的代码如下:

  1. noConflict: function( deep ) {  
  2.                 if ( window.$ === jQuery ) {  
  3.                         window.$ = _$;  
  4.                 }  
  5.    
  6.                 if ( deep && window.jQuery === jQuery ) {  
  7.                         window.jQuery = _jQuery;  
  8.                 }  
  9.    
  10.                 return jQuery;  
  11.         } 

再来看上面所说的参数设定问题,如果 deep 没有设置,_$ 覆盖 window.$,此时 jQuery 别名 $ 失效,但 jQuery 本身完好无损。如果有其他类库或代码重新定义了 $ 变量,它的控制权就完全交接出去了。反之如果 deep 设置为 true 的话,_jQuery 覆盖 window.jQuery,此时 $ 和 jQuery 都将失效。

这种操作的好处是,不管是框架混用还是 jQuery 多版本共存这种高度冲突的执行环境,由于 noConflict 方法提供的移交机制,以及本身返回未被覆盖的 jQuery 对象,完全能够通过变量映射的方式解决冲突。

但无法避免的事实是可能导致的插件失效等问题,当然通过简单修改上下文参数即可恢复 $ 别名

  1. var query = jQuery.noConflict(true);  
  2. (function ($) {  
  3.    
  4.      // 插件或其他形式的代码,也可以将参数设为 jQuery  
  5.    
  6. })(query); 

[1] http://api.jquery.com/jQuery.noConflict/#jQuery-noConflict-removeAll

[2] https://github.com/jquery/jquery/blob/master/src/core.js

原文链接:http://ued.taobao.com/blog/2013/03/jquery-noconflict/

责任编辑:张伟 来源: 淘宝UED
相关推荐

2017-12-06 10:15:27

跳转机制Chrome

2010-01-11 10:46:31

2024-02-20 09:50:02

Redis分布式

2012-07-09 14:25:04

程序集加载

2012-03-29 09:57:06

jQuery

2022-08-26 00:21:44

IO模型线程

2012-02-08 10:12:19

Java反射

2016-09-26 17:15:51

2011-08-15 09:30:59

SQL Server

2012-05-17 09:28:06

代码审查Java代码

2016-07-15 09:58:00

应用交付单边加速太一星晨

2013-06-19 09:54:37

产品设计产品功能推荐功能

2015-08-07 10:24:17

AndroidMaterialDes

2022-06-07 08:31:44

JavaUnsafe

2024-08-26 14:52:58

JavaScript循环机制

2010-04-20 14:18:23

2023-11-23 12:12:00

2010-09-28 11:05:49

jQuery

2023-08-14 16:56:53

2011-08-11 09:56:50

模式
点赞
收藏

51CTO技术栈公众号