深入了解外部js和jquery冲突的危害及应对策略

外部 JavaScript 库和 jQuery 冲突可能会导致意外行为、功能失效或页面崩溃等问题。这种冲突通常发生在使用多个 JavaScript 库时，它们可能会使用相同的全局变量名或者破坏了 jQuery 的工作方式。以下是一些可能导致冲突的情况以及相应的解决策略：

1. 冲突情况

a. 全局变量冲突

当外部库中定义了与 jQuery 或其他库相同的全局变量时，会导致冲突。

// 第三方库定义了全局变量$
var $ = function() {
  // some code
};

b. 修改 jQuery 原型

当其他库修改了 jQuery 的原型或者覆盖了 jQuery 的核心功能时，也会导致冲突。

// 第三方库修改了jQuery的原型
jQuery.fn.extend({
  // some code
});

2. 解决策略

a. 使用 jQuery.noConflict()

jQuery.noConflict() 方法可以释放对全局变量 $ 的控制权，从而避免全局变量冲突。

// 使用noConflict()方法释放对$的控制权
var jq = jQuery.noConflict();

// 现在可以使用jq来代替$
jq(document).ready(function() {
  jq("button").click(function() {
    jq("p").text("jQuery is still working!");
  });
});

b. 使用 IIFE（立即执行函数表达式）

通过使用立即执行函数表达式，可以在局部作用域中引入 jQuery，避免与全局作用域中的其他库冲突。

// 使用IIFE引入jQuery，避免全局变量冲突
(function($) {
  $(document).ready(function() {
    $("button").click(function() {
      $("p").text("jQuery is still working!");
    });
  });
})(jQuery);

c. 将其他库引入到 jQuery.noConflict() 中

如果外部库与 jQuery 冲突，可以将其引入到 jQuery.noConflict() 中，这样它们就不会影响到全局作用域。

// 将第三方库引入到jQuery.noConflict()中
var jq = jQuery.noConflict();

(function($) {
  // 在这里使用jq作为jQuery的别名
})(jq);

示例代码

假设我们有一个外部库定义了与 jQuery 相同的全局变量 $，并且我们想要使用 jQuery 来处理事件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Conflict Example</title>
  <!-- 引入jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- 引入第三方库，它定义了与jQuery相同的全局变量$ -->
  <script src="external-library.js"></script>
</head>
<body>
  <button>Click me</button>
  <p></p>
  <script>
    // 使用jQuery.noConflict()释放对$的控制权
    var jq = jQuery.noConflict();
    // 现在可以使用jq来代替$
    jq(document).ready(function() {
      jq("button").click(function() {
        jq("p").text("jQuery is still working!");
      });
    });
  </script>
</body>
</html>