您的位置:首页 > Web前端 > jquery > 正文

jQuery中noConflict()的用法

更多 时间:2014-3-15 类别:jquery 浏览量:888

jQuery中noConflict()的用法

jQuery中noConflict()的用法

一、"$"操作符

1、jQuery默认使用"$"操作符,prototype等其他框架也是是使用"$",于是,如果jQuery在其他库之后引入,那么jQuery将获得"$"使用权。这样的情况也很容易理解,毕竟JS是从上到下流式执行的。

2、如果在其他使用"$"的库之前引入jQuery,那么jQuery将不会占用"$"。

提示:在其他 JavaScript 库为其函数使用 $ 时,该方法很有用。

我们在jquery中获取变量都会使用到$,但是还有很多插件都是可以使用$这个符号了,如果我们同时要引用就会导致出现问题了,jquery为了防止这种事情发生就引入了noconflict()
 

二、jQuery.noConflict的定义

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

jQuery.noConflict([removeAll])

函数的说明

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

三、jQuery.noConflict源码分析

 jQuery 源码开头,首先做的一件事情是这样的:

        // 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 对象,完全能够通过变量映射的方式解决冲突。

    四、jQuery.noConflict实例

    1、

    将 $ 引用的对象映射回原始的对象:

    
    
  •  
  • 
    
    			jQuery.noConflict();
    
    jQuery("li p").hide();    // 使用 jQuery
    
    $("content").style.display = "none";    // 使用其他库的 $()
    
  • 2、

    恢复使用别名 $,然后创建并执行一个函数,在这个函数的作用域中仍然将 $ 作为 jQuery 的别名来使用。在这个函数中,原来的 $ 对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效:

    
    
  •  
  • 
    jQuery.noConflict();
    
    (function($) { 
      $(function() {
        // 使用 $ 作为 jQuery 别名的代码
      });
    })(jQuery);
    
    ... // 其他用 $ 作为别名的库的代码
    
    		
  • 3、

    可以将 jQuery.noConflict() 与简写的 ready 结合,使代码更紧凑:

    
    
  •  
  • 
    jQuery.noConflict()(function(){
        // 使用 jQuery 的代码
    });
    
    ... // 其他库使用 $ 做别名的代码
    
    		
  • 4、

    创建一个新的别名用以在接下来的库中使用 jQuery 对象:

    
    
  •  
  • 
    var j = jQuery.noConflict();
    
    j("li p").hide();    // 基于 jQuery 的代码
    
    $("content").style.display = "none";    // 基于其他库的 $() 代码
    
    		
  • 5、

    完全将 jQuery 移到一个新的命名空间:

    
    
  •  
  • 
    var dom = {};
    dom.query = jQuery.noConflict(true);
    
    //结果:
    
    dom.query("li p").hide();    // 新 jQuery 的代码
    
    $("content").style.display = "none";    // 另一个库 $() 的代码
    
    jQuery("li > p").hide();    // 另一个版本 jQuery 的代码
    
    		
  • 本文地址:http://www.studyofnet.com/news/332.html

    标签:noConflict jQuery
    您可能感兴趣