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

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

jQuery.noConflict([removeAll])

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

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

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

        // Map over jQuery in case of overwrite
_jQuery = window.jQuery, // Map over the $ in case of overwrite
_$ = window.$,

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

noConflict: function( deep ) {
if ( window.$ === jQuery ) {
window.$ = _$;
} if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
} return jQuery;
}

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

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

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

var query = jQuery.noConflict(true);
(function ($) { // 插件或其他形式的代码,也可以将参数设为 jQuery })(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/

jQuery 中的防冲突(noConflict)机制的更多相关文章

  1. 谈谈 jQuery 中的防冲突(noConflict)机制

    许多的 JS 框架类库都选择使用 $ 符号作为函数或变量名,jQuery 是其中最为典型的一个.在 jQuery 中,$ 符号只是 window.jQuery 对象的一个引用,因此即使 $ 被删除,w ...

  2. jQuery中 $ 符号的冲突问题

    jQuery中 $ 符号的冲突问题是常见问题之一.   在jQuery中,$是jQuery的别名,为了书写方便,我们更习惯用$('#id')这一类的方式来书写代码.当同一页面引用了jQuery多个版本 ...

  3. nRF24L01+组网方式及防撞(防冲突)机制的实战分享

    利用多个nRF24L01+模块组网通信的实现方式 这里讨论的组网方式,不包含使用6个通道实现的多对1通信方式,因其只限于6个发送端,局限性很大,可以附加其他技术实现更好的组网,暂时这里不讨论.这里分享 ...

  4. 关于jQuery中的$发生冲突及解决方案

    问题描述: 在Jquery库中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg')的写法. 当引入多个js库后,其它的js库 ...

  5. 射频识别技术漫谈(5)——防冲突【worldsing 笔记】

    正常情况下读写器某一时刻只能对磁场中的一张射频卡进行读写操作.但是当多张卡片同时进入读写器的射频场时,读写器怎么办呢?读写器需要选出唯一的一张卡片进行读写操作,这就是防冲突. 防冲突机制是非接触式智能 ...

  6. jQuery库(noConflict)冲突解决机制

    很多JSFramework库选择使用$符号作为一个函数或变量名,而在实际的项目开发,模板语言,则有可能"$"符号是模板语言keyword.例如Veclocity模板语言,$它是ke ...

  7. noConflict冲突处理机制

    最近接手了一个古早项目,用的backbone,于是正好学习一下早期MVC框架的源码. 这篇主要写冲突处理机制,源码其实就一个函数,代码也很短.原理也很好理解,总结起来就是:每执行一次noConflic ...

  8. 解决jQuery中美元符号($)命名与别的js脚本库引用冲突方法

    在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg') 的写法.然而,当我们引入多个js库后,在另外一个js库 ...

  9. jQuery中$符号冲突问题 (转载)

    Jquery的$命名冲突: 在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg') 的写法.然而,当我们引入多 ...

随机推荐

  1. XML和HTML中常用转义字符:

    XML和HTML中都有一些特殊的字符,这些字符在XML和HTML中是不能直接使用的,如果必须使用这些字符,应该使用其对应的转义字符. XML常用转义字符: 字符 转义字符 描述 & & ...

  2. C#-窗体之间传递参数

    主窗体: ].Value.ToString(); AddRoomTypeFrm AddRoomTypeFrm = new AddRoomTypeFrm(getroomtypeid); AddRoomT ...

  3. BZOJ 1199: [HNOI2005]汤姆的游戏 计算几何暴力

    1199: [HNOI2005]汤姆的游戏 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/p ...

  4. OpenCV Mat 类型定义和赋值

    1.一般的Mat定义方法:cv::Mat M(height,width,<Type>),例: cv::Mat M(480,640,CV_8UC3); 表示定义了一个480行640列的矩阵, ...

  5. 最全面的Android Intent机制讲解

    对于大型软件开发经验较少的程序员来说,这可能是一个不太容易理解的抽象概念,因为它与我们平常使用的简单函数调用,或者通过库调用接口的方式不太一样.在 Intent 的使用中你看不到直接的函数调用,相对函 ...

  6. Microsoft Visual Studio与Firefly 加载的项目已建议,更新源代码地位问题

    一开始装笔记本vs2010,由于使用的近期发展vs2008与vs2005所以,今天再次2008.2005安装在,但是在打开的项目时,,首先提示加载项目文件.然后已建议状态,非常慢非常慢的,之前仅仅有v ...

  7. iOS开发——新特性OC篇&Objective新特性

    Objective新特性 Overview 自 WWDC 2015 推出和开源 Swift 2.0 后,大家对 Swift 的热情又一次高涨起来,在羡慕创业公司的朋友们大谈 Swift 新特性的同时, ...

  8. 会话跟踪session cookie

    会话跟踪 会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在 ...

  9. Linux性能优化--CPU[备忘]

    http://kumu-linux.github.io/blog/2014/04/21/performance-cpu/

  10. Routes

    Routes Routing lets you create your own URL paths, based on the path you can load a closure or a con ...