文档章节

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

i33
 i33
发布于 2013/03/13 08:12
字数 655
阅读 69
收藏 1
    许多的 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/

i33

i33

粉丝 46
博文 241
码字总数 7442
作品 0
东城
私信 提问
解决多个jquery并存冲突问题

jQuery自诞生以来,版本越来越多,而且jQuery官网的新版本还在不断的更新和发布中,现已经达到了1.6.4版本,但是我们在以前的项目中就已经使用了旧版本的jQuery,比如已经出现的:1.3.X、1.4...

罗盛力
2011/12/02
4.6K
0
JQuery 的各种初始化方法

JQuery是web前端的常用技术,在前端开发、甚至php、Java、python等web开发中,我们经常需要用到这门技术。因此jQuery是web开发中,非常重要的一个技术,也是初学者必须掌握的一个技术。今天小...

小麦麦子
2015/07/17
3K
0
(function($){...})(jQuery)的意思

这里实际上是匿名函数 function(arg){...} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即: (function(ar...

hhhhfengxing
2013/12/23
59
0
第80天:jQuery插件使用

jQuery其他补充 + 4.1 链式编程: end()补充 补充五角星 评论案例 第一步:鼠标移入,当前五角星和前面的五角星变实体。后面的变空心五角星 第二步:鼠标点击的时候,为当前元素添加clicked...

半指温柔乐
2017/11/10
0
0
DWR和jQuery $符号冲突的问题

DWR和jQuery都使用$符号来取得html中的元素,如果两个一起用的话就会出现冲突。我在网上搜了一下都是用jQuery.noConflict()来替换jQuery中的$,但jQuery的插件太多,我不想在每个dwr调用之前...

那多
2009/08/22
4.1K
7

没有更多内容

加载失败,请刷新页面

加载更多

Mybatis Plus删除

/** @author beth @data 2019-10-17 00:30 */ @RunWith(SpringRunner.class) @SpringBootTest public class DeleteTest { @Autowired private UserInfoMapper userInfoMapper; /** 根据id删除......

一个yuanbeth
24分钟前
2
0
总结

一、设计模式 简单工厂:一个简单而且比较杂的工厂,可以创建任何对象给你 复杂工厂:先创建一种基础类型的工厂接口,然后各自集成实现这个接口,但是每个工厂都是这个基础类的扩展分类,spr...

BobwithB
今天
4
0
java内存模型

前言 Java作为一种面向对象的,跨平台语言,其对象、内存等一直是比较难的知识点。而且很多概念的名称看起来又那么相似,很多人会傻傻分不清楚。比如本文我们要讨论的JVM内存结构、Java内存模...

ls_cherish
今天
4
0
友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
5
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部