首页 > 编程笔记 > Web笔记

jQuery noConflict()方法解决库冲突

在某些情况下，可能有必要在同一个页面中使用多个 JavaScript 库。但是很多库都使用了“$”这个符号（因为它简短方便），这时就需要用一种方式来避免名称的冲突了。

在 jQuery 中，我们可以使用 jQuery.noConflict() 方法来把“$”符号的控制器过渡给其他库。其中，jQuery.noConflict() 方法的一般使用模式如下：
  1. <script src="prototype.js"></script>
  2. <script src="jquery-12.8.min.js"></script>
  3. <script>
  4.     jQuery.noConflict();
  5. </script>
首先引入 prototype 库，然后引入 jQuery 库，接着我们使用 noConflict() 方法让出“$”，以便将“$”的控制权让给 prototype 库。这样，我们就可以在页面中同时使用两个库了。

还有一点要注意的，使用 jQuery.noConflict() 之后，如果还想要使用 jQuery 库的方法，我们必须使用“jQuery”来代替“$”，因为此时“$”的使用权已经让出去了。

举例：使用 jQuery.onConflict() 方法前后的“$” 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <script src="js/jquery-1.12.4.min.js"></script>
  7.     <script>
  8.         $(function () {
  9.             console.log($);
  10.             jQuery.noConflict();
  11.             console.log($);
  12.         })
  13.     </script>
  14. </head>
  15. <body>
  16.     <div></div>
  17. </body>
  18. </html>
控制台输出结果如图 1 所示。
使用jQuery.onConflict()方法前后的“$”
图14-8　使用 jQuery.onConflict() 方法前后的“$”

从输出结果可以看出，使用 jQuery.noConflict() 方法之前，“$”指向的还是 jQuery 对象。但是使用了 jQuery.noConflict() 方法之后，“$”就不再是指向 jQuery 对象，而是变成 undefined 了。这个时候，“$”就等于让出去了，可以用于其他地方了。

举例：使用 jQuery.noConflict() 方法前后的“jQuery” 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <script src="js/jquery-1.12.4.min.js"></script>
  7.     <script>
  8.         $(function () {
  9.             console.log(jQuery);
  10.             jQuery.noConflict();
  11.             console.log(jQuery);
  12.         })
  13.     </script>
  14. </head>
  15. <body>
  16.     <div></div>
  17. </body>
  18. </html>
预览效果如图 2 所示。
使用jQuery.noConflict()方法前后的“jQuery”
图 2：使用 jQuery.noConflict() 方法前后的“jQuery”

从输出结果可以看出，不管是否使用 jQuery.noConflict() 方法，“jQuery”这个变量始终指向的是 jQuery 对象本身。

利用“$”和“jQuery”在使用 jQuery.noConflict() 方法之后的不同，我们可以在使用 jQuery.noConflict() 方法之后，把“$”这个变量让给其他库来使用，这样就不会导致两个库之间的冲突。请看下面的例子。

举例： 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <script src="js/prototype.min.js"></script>
  7.     <script src="js/jquery-1.12.4.min.js"></script>
  8.     <script>
  9.         jQuery.noConflict();
  10.         //这里之后可以把“$”交给prototype库使用
  11.     </script>
  12.     <script>
  13.         (function ($) {
  14.             $(function () {
  15.                 $("div").html("<strong>新宝库</strong>");
  16.             })
  17.         })(jQuery)
  18.     </script>
  19. </head>
  20. <body>
  21.     <div></div>
  22. </body>
  23. </html>
预览效果如图 3 所示。
jQuery.noConflict()方法的使用效果
图 3：jQuery.noConflict() 方法的使用效果

使用了 jQuery.noConflict() 方法之后，如果还想继续让“$”指向 jQuery 对象，我们可以使用一个立即执行函数来建立一个封闭环境，使得在函数内部中，“$”指向 jQuery 对象。这样，就不会与外部的“$”冲突了。

(function ($) {
    ……
})(jQuery)

立即执行函数并不属于 jQuery 的内容，而是属于 JavaScript 的内容。其中涉及的内容比较多，这里就不详细展开了。JavaScript 基础不扎实的小伙伴，可以自行搜索和了解。

所有教程

优秀文章