jQuery静态方法noConflict的使用和源码分析

所谓静态方法是jQuery本身得公共方法,并不需要通过实例化来调用,一般也称为工具方法,下面先来列绝下jQuery.noConflict方法的用法:

noConflict() 方法让渡变量 $ 的 jQuery 控制权。

该方法释放 jQuery 对 $ 变量的控制。

该方法也可用于为 jQuery 变量规定新的自定义名称。

var jq=$.noConflict();

下面来做个测试:

    <script src=‘jquery-1.7.1.js‘></script>
    <script>
         alert( $ );  //function(){...}
    </script>

调用noConflict方法之后的结果:

<script src=‘jquery-1.7.1.js‘></script>
    <script>
        $.noConflict();
         alert( $ );  //undefinded
    </script>

这个时候$就不再是jQuery的别名了,下面加上参数

<script src=‘jquery-1.7.1.js‘></script>
    <script>
        $.noConflict(true);
         alert( jQuery );  //undefined
    </script>

这样jQuery也被释放出来了许多 JavaScript 库使用 $ 作为函数或变量名,jQuery 也一样。在 jQuery 中,$ 仅仅是 jQuery 的别名,因此即使不使用 $ 也能保证所有功能性。假如我们需要使用 jQuery 之外的另一 JavaScript 库,我们可以通过调用 $.noConflict() 向该库返回控制权:

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
  $.noConflict();
  // 使用另一个库的 $ 的代码
</script>

可以与 .ready() 方法结合起来使用,不需要为 jQuery 对象起别名,这项技术非常有效:

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // 使用 jQuery $ 的代码
  });
  // 使用其他库的 $ 的代码
</script>

此外,通过向该方法传递参数 true,我们可以将 $ 和 jQuery 的控制权都交还给原来的库。用之前请考虑清楚!

这是相对于简单的 noConflict 方法更极端的版本,因为这将完全重新定义 jQuery。这通常用于一种极端的情况,比如你想要将 jQuery 嵌入一个高度冲突的环境。注意:调用此方法后极有可能导致插件失效。

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

jQuery.noConflict();

jQuery("div p").hide();    // 使用 jQuery

$("content").style.display = "none";    // 使用其他库的 $()

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

jQuery.noConflict();

(function($) {
  $(function() {
    // 使用 $ 作为 jQuery 别名的代码
  });
})(jQuery);

... // 其他用 $ 作为别名的库的代码

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

jQuery.noConflict()(function(){
    // 使用 jQuery 的代码
});

... // 其他库使用 $ 做别名的代码

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

var j = jQuery.noConflict();

j("div p").hide();    // 基于 jQuery 的代码

$("content").style.display = "none";    // 基于其他库的 $() 代码

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

var dom = {};
dom.query = jQuery.noConflict(true);
结果:

dom.query("div p").hide();    // 新 jQuery 的代码

$("content").style.display = "none";    // 另一个库 $() 的代码

jQuery("div > p").hide();    // 另一个版本 jQuery 的代码

下面开始分析jquey源码:

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

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

这段是写在jQuery构造函数里面的,主要用途是保存可能存在的jQuery和$的变量,很有可能使其他库,这样可以避免冲突

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

        if ( deep && window.jQuery === jQuery ) {
            window.jQuery = _jQuery;
        }

        return jQuery;
    },

deep参数是一个布尔值如果为true则释放jQuery为undefined在前面的例子中已经演示过

 window.$ === jQuery

这个条件是保证只有当jQuery还拥有$的控制权的时候才去释放,本来就没有释放也没有意义,把刚才的_$再次变为全局变量,而这个$可能是其他库这样就实现了释放的过程

deep && window.jQuery === jQuery

deep为true并且jQuery变量还属于jQuery,跟$一样,如果已经被释放了就没有必要再释放了

return jQuery;

执行后的结果是jQuery,这样就可以把jQuery起一个别用来使用了

时间: 2024-10-17 19:59:09

jQuery静态方法noConflict的使用和源码分析的相关文章

jQuery静态方法parseJSON方法使用和源码分析

该方法接受一个JSON字符串,返回解析后的对象. 传入一个畸形的JSON字符串会抛出一个异常.比如下面的都是畸形的JSON字符串: {test: 1} ( test 没有包围双引号) {'test': 1} (使用了单引号而不是双引号) 另外,如果你什么都不传入,或者一个空字符串.null或undefined,parseJSON都会返回 null . 源码分析: parseJSON: function( data ) { if ( typeof data !== "string" ||

jquery.map()方法的使用和源码分析

原型方法map跟each类似调用的是同名静态方法,只不过返回来的数据必须经过另一个原型方法pushStack方法处理之后才返回,源码如下: map: function( callback ) { return this.pushStack( jQuery.map(this, function( elem, i ) { return callback.call( elem, i, elem ); })); }, 本文主要就是分析静态map方法至于pushStack在下一篇随笔里面分析: 首先了解下

jQuery静态方法isPlainObject,isEmptyObject方法使用和源码分析

isPlainObject方法 测试对象是否是纯粹的对象(通过 "{}" 或者 "new Object" 创建的) 示例: //测试是否为纯粹的对象 jQuery 代码: jQuery.isPlainObject({}) // true jQuery.isPlainObject("test") // false 源码分析: isPlainObject: function( obj ) { // Must be an Object. // Beca

Android Debuggerd 简要介绍和源码分析(转载)

转载: http://dylangao.com/2014/05/16/android-debuggerd-%E7%AE%80%E8%A6%81%E4%BB%8B%E7%BB%8D%E5%92%8C%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/ 码字很辛苦,转载请注明来自Dylan‘s Zone的<Android Debuggerd 简要介绍和源码分析> 本文以android4.1为基础,分析debuggerd这个工具的使用方法和源码. 1.Debuggerd 简介

java集合框架10——TreeMap和源码分析(一)

前面讨论完了HashMap和HashTable的源码,这一节我们来讨论一下TreeMap.先从整体上把握TreeMap,然后分析其源码,深入剖析TreeMap的实现. 1. TreeMap简介 TreeMap是一个有序的key-value集合,它内部是通过红-黑树实现的,如果对红-黑树不太了解,请先参考下这篇博文:红-黑树.下面我们先来看看TreeMap的继承关系: java.lang.Object ? java.util.AbstractMap<K, V> ? java.util.TreeM

转:《Linux设备驱动程序3》源码目录结构和源码分析经典链接

转自:http://blog.csdn.net/geng823/article/details/37567557 [原创][专栏]<Linux设备驱动程序>--- LDD3源码目录结构和源码分析经典链接 [专栏]Linux设备驱动程序学习(总目录) [专栏]LDD3源码分析链接(总目录) 1. LDD3源码分析之hello.c与Makefile模板 2. LDD3源码分析之字符设备驱动程序 其他错误: 我的Linux内核为 3.2.0-65-generic-pae,在scull目录下make时

jQuery静态方法globalEval使用和源码分析

Eval函数大家都很熟悉,但是globalEval方法却很少使用,大多数参考手册也没有相关api,下面就对其用法和源码相应介绍: jQuery.globalEval()函数用于全局性地执行一段JavaScript代码. 示例: var name = "全局变量"; function test(){ var name = "局部变量"; alert(name); // 局部变量 eval( "alert(name);" ); // 局部变量 $.g

jQuery静态方法noop,camelCase,nodeName,trim使用和源码分析

noop方法 jQuery.noop()函数是一个空函数,它什么也不做. 当某些时候你需要传入函数参数,而且希望它什么也不做的时候,你可以使用该函数,也无需再新建一个空的函数. 示例: // 传入一个空函数作为参数,返回一个空数组 // 空函数的返回值为undefined,而null或undefined值会被$.map()忽略掉. var result = $.map( [1, 2, 3], $.noop ); document.writeln( result.length ); // 0 源码

jQuery静态方法isFunction,isArray,isWindow,isNumeric使用和源码分析

上一篇随笔中总结了js数据类型检测的几个方法和jQuery的工具方法type方法,本篇要分析几个方法都依赖type方法,所以不了解type方法的请先参看http://www.cnblogs.com/yy-hh/p/4667950.html isFunction方法 用于测试是否为函数的对象 示例: function stub() { } var objs = [ function () {}, { x:15, y:20 }, null, stub, "function" ]; jQue