jQuery noConflict() 方法

一个页面里常常会同时引入多个 JavaScript 库，jQuery、Prototype、Zepto 等都习惯把 $ 当作简写，后加载的一方会"霸占" $，导致前面库的代码报错。noConflict() 让 jQuery 交还 $ 的控制权，使多个库和谐共存。

冲突是怎样发生的

只要两个库都使用 $ 简写，就会互相覆盖，谁的代码先写谁遭殃：

<!-- 同时引入两个都使用 $ 的库，后加载者覆盖先加载者 -->
<script src="prototype.js"></script>
<script src="jquery.min.js"></script>
<script>
// 此时 $ 属于 jQuery；Prototype 以 $ 开头的代码全部失效
</script>

noConflict() 释放 $

调用 $.noConflict() 后，$ 交还给其它库，jQuery 只能用全名 jQuery 调用：

$.noConflict();
// 效果：从这行开始 $ 不再代表 jQuery

jQuery("#btn").click(function () {
  jQuery(this).hide(); // 用全名 jQuery 照样工作
});

给 jQuery 自定义别名

为了少打字，可以把 noConflict() 的返回值存成短别名：

var jq = $.noConflict();
jq("#btn").click(function () {
  jq(this).hide(); // 效果：点击按钮后隐藏，jq 等价于 jQuery
});

在就绪函数里继续使用 $

如果不想放弃 $ 的简洁，可以把 $ 作为参数传进就绪回调或立即执行函数，局部范围内 $ 仍是 jQuery：

$.noConflict();
jQuery(document).ready(function ($) {
  // 函数内部 $ 指向 jQuery，外部 $ 仍是其它库
  $("#btn").click(function () {
    $("#box").text("无冲突，两全其美");
  });
});

noConflict(true) 深度释放

noConflict() 默认只释放 $。传入 true 会连 jQuery 这个名字也一并交还，常用于同一页面加载新旧两版 jQuery 的极端场景，日常几乎用不到：

var jq2 = jQuery.noConflict(true);
// 效果：jQuery、$ 都被释放，只有 jq2 指向本次加载的 jQuery

小结：noConflict() 让 jQuery 与其它库共享页面而互不干扰，配合"在就绪函数内使用 $（局部变量）"的写法，既保住了 $ 的简洁，又解决了命名冲突。