同一页面中引入多个JS库产生的冲突解决方案(转)

秒速五厘米 2021-12-20 02:59 220阅读 0赞

**发生JS库冲突的主要原因：**与jQuery库一样，许多JS库都使用‘$’符号作为其代号。因此在一个页面中引入多个JS库，并且使用‘$’作为代号时，程序不能识别其代表哪个库（这个是我自己的解释，但更深的原因就必须深入到jQuery的源码中去分析了，因此本文暂不深入讨论）。

**解决方案：**

解决JS库冲突总共可以分为以下几种方法：

①让渡‘$’标示符，使用jQuery作为jQuery对象的标示符（别名）。

②使用别名替代‘$’和jQuery标识符，如下面的$j（名字可以任取）。

var $j=jQuery.noConflict();
    $j("#div").hide();

③使用匿名函数

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

**　　情况一：如果jQuery库在其他库之后导入**

方法：这种情况下，如何要使用‘$’作为其他库的标识符，则要使用jQuery.noConflict()释放jQuery对‘$’标识符的控制，把它(‘$’）让位给第一个实现它的库。

例如：

也可以使用第二种方法，即使用别名。　　例如：

或者用第三种方法，即使用匿名函数　　例如：

jQuery.noConflict();
                                                                       
    (function($) { 　　//匿名函数中用‘$’作为形参
      $(function() {
        // 使用 $ 作为 jQuery 别名的代码
      });
    })(jQuery);　　  //传入jQuery作为形参的值
                                                                       
    ... // 其他用 $ 作为别名的库的代码

情况二：如果jQuery在其他库之前导入

方法：在这种情况下，不必使用jQuery.noConflict()方法让渡‘$’标识符。　例如：

那么这里有一个疑问：**为什么jQuery在其他库之前导入不必使用jQuery.noConflict()，而在其他库之后导入则要使用jQuery.noConflict()？**

此外，jQuery.noConflict()方法还可以带有一个boolean类型的参数。这个参数的作用是：完全将 jQuery 移到一个新的命名空间（Completely move jQuery to a new namespace in another object.）

这个参数主要是用于在同一页面需要导入不同版本的jQuery时使用的，即创建一个全新的空间指向jQuery。（**这个不怎么明白。**）

例如：

var dom = {};
    dom.query = jQuery.noConflict(true);
    　　结果：
    dom.query("div p").hide();  // 新 jQuery 的代码                                                           
    $("content").style.display = "none";    // 另一个库 $() 的代码                                                           
    jQuery("div > p").hide();    // 另一个版本 jQuery 的代码

总结：对于jQuery的JS库冲突，我只知道了如何去解决。而并不知道具体的细节原因，而且具体的技术知识还不清晰，因此在接下来要努力地去寻找解决的方法。对于jQuery中的库冲突，我还残留的问题有：

①为什么jQuery在其他库之前导入不必使用jQuery.noConflict()，而在其他库之后导入则要使用jQuery.noConflict()？

②关于解决在同一页面中引入不同版本的jQuery库，使用jQuery.noConflict(true)解决的细节？（如：库引入顺序是否会导致不同的解决方式？等）

③为什么在同一页面引入多个JS库会引起错误，具体的原因是什么？

转载于:https://www.cnblogs.com/JoannaQ/p/3387184.html