三分钟玩转jQuery.noConflict()

梦里梦外; 2023-10-17 23:26 100阅读 0赞

jQuery是目前使用最广泛的前端框架之一，有大量的第三方库和插件基于它开发。为了避免全局命名空间污染，jQuery提供了jQuery.noConflict()方法解决变量冲突。这个方法，毫无疑问，非常有效。遗憾的是，jQuery的官方文档对该方法的描述不够清晰，许多开发者并不清楚当他们调用jQuery.noConflict()时，究竟发生了什么，从而导致在使用时出现了许多问题。尽管如此，jQuery.noConflict()背后实现原理依然值得Web开发者学习掌握，成为解决类似全局命名空间污染问题的利器。

### jQuery.noConflict()的作用？ ###

jQuery.noConflict()的存在只有一个目的：它允许你在同一个页面加载多个jQuery实例，尤其是不同版本的jQuery。你可能会觉得奇怪，为什么要在一个页面加载/使用多个不同版本的jQuery对象呢？一般而言，有两种情况。第一种情况，你的业务代码采用了最新版的jQuery库，而你选用的第三方插件依赖的更早版本的jQuery库；第二种情况，你正维护着一个系统，它已有的业务代码由于各种原因，引用了较老版本的jQuery库，你新开发的模块采用的是其他版本的jQuery库。不论哪种情况，你都不得不面对，jQuery对象/方法冲突的问题。幸运的是，jQuery.noConflict()帮你解决了这个烦恼。

### jQuery被加载时发生了什么？ ###

当jQuery被页面引用/加载时，它被封装在一个自执行函数（匿名函数）里，它提供的所有一切变量、函数、对象都在匿名函数内部的可执行环境内，外部环境无法调用,以防止全局命名空间污染。

jQuery在匿名函数内部定义了两个全局对象:`jQuery`和`$`，把自己暴露给外部环境。开发者习惯使用的各种公共方法都是通过这两个对象进行访问的，如`jQuery.ajax()`,`jQuery.css()`等。在最初，它们指向匿名函数内部的同一个对象`jQuery`(私有变量)，通过它访问匿名函数内部的私有变量和函数。这使得匿名函数在自执行后其内部的私有变量和函数仍然进驻在内存里，不会被javascript的垃圾回收机制清除。

window.jQuery = window.$ = jQuery;

当jQuery被页面加载后，当前页面有可能已经存在了`jQuery`和`$`这两个全局变量（比如，加载了其它的第三方库，其内部也定义了它俩），这就会导致已经存在的对象被覆盖（全局命名空间污染）。为了解决这个问题，jQuery在内部先将已经存在的全局变量缓存起来，保存在私有变量`_jQuery`和`_$`中，供后续调用。所以，如果页面在加载jQuery库时，还不存在`jQuery`和`$`对象，那么`_jQuery`和`_$`都是`undefined`；否则，它们都会保存对已有`jQuery`和`$`的引用（也许来自之前引用的第三方库或是不同版本的jQuery库）。之后，jQuery会像上文说描述的那样，覆盖这两个全局变量并将自己暴露给外部环境。至此，页面上的全局变量`jQuery`和`$`已经指向刚刚引入的jQuery库。

// Map over jQuery in case of overwrite
    _jQuery = window.jQuery,
    
    // Map over the $ in case of overwrite
    _$ = window.$,
    
    // Otherwise expose jQuery to the global object as usual
    window.jQuery = window.$ = jQuery;

### jQuery.noConflict()的神奇效果？ ###

假设你维护的系统已经引用了1.7.0版本的jQuery库，而你在新添加的功能里引用了1.10.2版本的jQuery库。那么，还有办法重新使用jQuery 1.7.0 或是同时使用两个版本的jQuery库吗？答案是肯定，那就是`jQuery.noConflict()`。实际上，利用`jQuery.noConflict()`，你可以立刻把全局变量`jQuery`和`$`重新指向之前引用的对象。很神奇吧？这就是为什么jQuery在对外暴露自己前内部缓存了之前引用的对象。  
  `jQuery.noConflict()`接受一个可选的布尔值参数，通常默认值是`false`。这个参数会带来什么影响呢？其实，很简单。如果调用`jQuery.noConflict()`或是`jQuery.noConflict(false)`，只有全局变量`$`会被重置恢复成之前的引用值；如果调用`jQuery.noConflict(true)`，那么全局变量`jQuery`和`$`都会被重置恢复成之前的引用值。这一点非常重要，建议牢记。当你调用`jQuery.noConflict(false/true)`之后，它会返回当前jQuery的实例，利用这个特性我们可以实现jQuery的重命名。

// "Renaming" jQuery
    var jayquery = jQuery.noConflict( true );
    // Now we can call things like jayquery.ajax(), jayquery.css(), and so on

我们再来看一个代码片段，测试一下是否真正理解了神奇的`noConflict()`

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    
    
    <script>jQuery.noConflict();</script>
    
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
    
    
    <script>var jquery164 = jQuery.noConflict( true );</script>

### 避免第三方库的冲突 ###

以上的代码片段展示了如何解决多版本jQuery的冲突。接下来，我们尝试解决jQuery库和第三方库的冲突，下面出现的代码片段在jQuery的官方文档中都有，有兴趣的程序猿可以仔细阅读官方文档体会其中的区别。

#### 直接使用No-Conflict模式 ####

使用No-Conflict模式，其实就是对jQuery进行重命名，再调用。

<script src="prototype.js"></script>
    <script src="jquery.js"></script>
    <script>
     
    var $j = jQuery.noConflict();
    // $j 引用了jQuery对象本身.
     
    $j(document).ready(function() {
        $j( "div" ).hide();
    });
     
    // $ 被重新指向prototype.js里定义的对象
    // document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
    window.onload = function() {
        var mainDiv = $( "main" );
    }
     
    </script>

#### 使用自执行函数封装 ####

使用这种方式，你可以在匿名函数内部继续使用标准的`$`对象，这也是众多jQuery插件采用的方法。需要注意的是，使用这种方法，函数内部无法再使用prototype.js定义的`$`对象了。

<script src="prototype.js"></script>
    <script src="jquery.js"></script>
    <script>
     
    jQuery.noConflict();
     
    (function( $ ) {
        // Your jQuery code here, using the $
    })( jQuery );
     
    </script>

#### 使用标准jQuery(document).ready()函数 ####

如果jQuery库在其它库之前引入，那么jQuery内部定义的`jQuery`和`$`会被第三方库覆盖，这时候再使用`noConflict()`已经没有什么意义了。解决的方法很简单，直接使用jQuery的标准调用方式。

<script src="jquery.js"></script>
    <script src="prototype.js"></script>
    <script>
     
    // Use full jQuery function name to reference jQuery.
    jQuery( document ).ready(function() {
        jQuery( "div" ).hide();
    });
    
    // 或者
    jQuery(function($){
        // Your jQuery code here, using the $
    });
     
    // Use the $ variable as defined in prototype.js
    window.onload = function() {
        var mainDiv = $( "main" );
    };
    
    </script>

来源:[https://www.cnblogs.com/laoyu/p/5189750.html][https_www.cnblogs.com_laoyu_p_5189750.html]

[https_www.cnblogs.com_laoyu_p_5189750.html]: https://www.cnblogs.com/laoyu/p/5189750.html