jQuery noConflict()

jQuery: 使用 noConflict() 避免冲突

如何将 jQuery 与其他可能也使用 $ 别名（alias）的 JavaScript 库一起使用。

挑战：$ 别名

jQuery 以其使用美元符号（$）作为 jQuery 函数的便捷别名而闻名。

然而，其他 JavaScript 库或框架（无论是旧的还是新的）也可能出于自己的目的使用 $ 符号。常见的历史例子包括 Prototype.js，但与各种工具或自定义脚本也可能发生冲突。

如果两个不同的脚本尝试为全局（global）变量 $ 分配不同的含义，就会产生冲突（conflict），通常只有最后加载的脚本能够正确使用 $，这可能会破坏其他脚本的功能。

jQuery 提供了 $.noConflict() 方法来解决这个问题。

使用 jQuery.noConflict()

jQuery.noConflict() 方法会放弃 jQuery 对 $ 变量的控制权。这使得其他脚本可以使用它。

调用 $.noConflict() 后，你必须使用完整的名称 jQuery 而不是 $ 来访问 jQuery 函数。

示例：明确使用 jQuery

// 放弃 $ 别名
$.noConflict();

// 使用 jQuery 代替 $
jQuery(document).ready(function() {
  jQuery("button").on('click', function() {
    jQuery("p").text("jQuery 使用其完整名称工作正常！");
  });
});
// 或者使用 ready() 的现代简写形式：
/*
jQuery(function() {
  jQuery("button").on('click', function() {
    jQuery("p").text("jQuery 使用其完整名称工作正常！");
  });
});
*/

创建你自己的别名

$.noConflict() 返回对 jQuery 函数的引用（reference）。你可以将其赋值给你自己的变量，以创建一个不同的、安全的别名。

示例：使用自定义别名 jq

const jq = $.noConflict();

jq(function() { // 使用 jq 代替 $ 或 jQuery
  jq("button").on('click', function() {
    jq("p").text("jQuery 使用 'jq' 别名工作！");
  });
});

在包装函数中安全地使用 $

一种常用且通常首选的技术是将你的 jQuery 代码包装在一个立即执行函数表达式（IIFE - Immediately Invoked Function Expression）中，或者利用 ready 处理程序（handler）能够传入 jQuery 对象的能力。这允许你在该特定函数的范围（scope）内部安全地使用 $，而不会与全局范围冲突。

示例：将 $ 传递给 ready 处理程序

$.noConflict();

jQuery(document).ready(function($) {
  // 在此函数内部， $ 安全地指向 jQuery
  $("button").on('click', function() {
    $("p").text("jQuery 在 ready 处理程序内部使用 $ 工作！");
  });
});

// 现代简写形式等价于：
/*
jQuery(function($) {
  // 在此函数内部， $ 安全地指向 jQuery
  $("button").on('click', function() {
    $("p").text("jQuery 在 ready 处理程序内部使用 $ 工作！");
  });
});
*/

示例：使用 IIFE

$.noConflict();

(function($) {
  // 在此 IIFE 内部，$ 安全地指向 jQuery
  $(function() {
    // 使用安全的 $ 实现 DOM Ready
    $("button").on('click', function() {
      $("p").text("jQuery 在 IIFE 内部使用 $ 工作！");
    });
  });
})(jQuery); // 传入 jQuery 对象，在局部映射到 $

最后一种方法（将 $ 传递给 ready 处理程序或使用 IIFE）通常是在你的代码中使用简洁的 $ 语法，同时仍避免全局冲突的最简洁方式。

jQuery 杂项参考

有关包括 noConflict() 在内的各种杂项 jQuery 方法的完整概述，请参阅官方 jQuery API 文档。