zoukankan      html  css  js  c++  java
  • 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起一个别用来使用了

  • 相关阅读:
    Java实现 蓝桥杯VIP 算法训练 数的统计
    Java实现 蓝桥杯VIP 算法训练 和为T
    Java实现 蓝桥杯VIP 算法训练 友好数
    Java实现 蓝桥杯VIP 算法训练 连续正整数的和
    Java实现 蓝桥杯VIP 算法训练 寂寞的数
    Java实现 蓝桥杯VIP 算法训练 学做菜
    Java实现 蓝桥杯VIP 算法训练 暗恋
    Java实现 蓝桥杯VIP 算法训练 暗恋
    测试鼠标是否在窗口内,以及测试鼠标是否在窗口停留
    RichEdit 各个版本介绍
  • 原文地址:https://www.cnblogs.com/yy-hh/p/4668906.html
Copyright © 2011-2022 走看看