jQuery noConflict()方法：解决多库并存时的 $ 冲突-代码号

在同一个页面中引入多个 JavaScript 库时，$ 这个简短好用的标识符很容易成为冲突的焦点。jQuery 用 $ 作为核心函数的别名，但 Prototype、MooTools 等库同样将 $ 作为自己的快捷入口。当两个库都试图占用同一个全局变量 $ 时，后加载的那个会覆盖先加载的，导致其中一个库的功能失效。

jQuery 的 noConflict() 方法就是专门解决这个问题的。调用它后，jQuery 会主动释放对 $ 标识符的控制权，将其归还给之前占用它的其他库。之后你仍然可以通过 jQuery 这个完整名称来使用 jQuery 的全部功能。

为什么我不建议在多库环境下硬用 $ 而跳过 noConflict()？

可能你会想，如果页面里只用了 jQuery，或者另一个库不使用 $，那就没事。但项目依赖是会演变的——后期可能会引入一个使用 $ 的第三方插件，或者接手你代码的开发者不清楚之前的约定。提前用 noConflict() 做好命名空间隔离，是从一开始就避免隐患的做法。出了问题再回头排查哪个库的 $ 被覆盖了，追溯起来比提前预防麻烦得多。

语法

$.noConflict();

或者

jQuery.noConflict();

该方法不接受任何参数。调用后，$ 不再指向 jQuery，你需要使用 jQuery 全名或自定义的别名来继续编写 jQuery 代码。

课程知识要点

**释放控制权∗∗：‘noConflict()‘将‘控制权∗∗：‘noConflict()‘将‘标识符归还给之前占用它的库，jQuery 自身退回到使用jQuery` 全名。
自定义别名：可以将 noConflict() 的返回值赋给一个新变量，之后用这个变量代替 $，如 var j = $.noConflict()。
**函数作用域内保留 ∗∗：在‘jQuery(document).ready(function(∗∗：在‘jQuery(document).ready(function(){ ... })内部，$` 依然可以安全使用，不会与外部的其他库冲突。
调用时机：noConflict() 必须在其他使用 $ 的 jQuery 代码之前调用，否则提前执行的代码会因为 $ 已被覆盖而报错。

示例一：创建自定义别名解决冲突

这个例子模拟了 Prototype 和 jQuery 同时存在的场景。两者都试图使用 $，通过在加载 jQuery 后立即调用 noConflict() 并将返回值赋给变量 j，之后所有的 jQuery 操作都通过 j 来执行，$ 则留给 Prototype 使用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>noConflict() 自定义别名 · 编程学习</title>
    <!-- 先加载 Prototype，它会占用 $ -->
    <script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
    <!-- 再加载 jQuery，此时 $ 被 jQuery 接管 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        // 释放 $，并将 jQuery 的引用赋给自定义变量 jq
        var jq = $.noConflict();

        // 之后所有 jQuery 代码使用 jq 代替 $
        jq(document).ready(function () {
            jq("#btn-jquery").click(function () {
                alert("jQuery 运行正常！");
            });
        });

        // Prototype 使用 $ 符号正常运作
        document.observe("dom:loaded", function () {
            $("btn-prototype").observe("click", function (event) {
                alert("Prototype 运行正常！");
            });
        });
    </script>
    <style>
        body {
            text-align: center;
            font-family: sans-serif;
            margin: 40px;
        }
        button {
            margin: 10px;
            padding: 10px 22px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h4>jQuery noConflict() 方法——自定义别名示例</h4>
    <p>点击下方两个按钮，分别测试两个库是否正常：</p>
    <button id="btn-jquery">运行 jQuery</button>
    <button id="btn-prototype">运行 Prototype</button>
</body>
</html>

点击“运行 jQuery”按钮会弹出 jQuery 的提示，点击“运行 Prototype”按钮会弹出 Prototype 的提示。两个库和平共存，互不干扰。自定义别名 jq 代替了 $，$ 重新归 Prototype 使用。

示例二：在 ready() 函数内部安全使用 $

如果你不想额外创建一个全局别名变量，只是希望在 DOM 就绪后编写 jQuery 代码时仍然能用 $，可以把 $ 作为参数传入 ready() 的回调函数。这样在回调函数内部，$ 就是 jQuery 的引用，而在外部 $ 仍归其他库所有。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>noConflict() 函数作用域内使用 $ · 编程学习</title>
    <script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        // 进入无冲突模式
        jQuery.noConflict();

        // 在 ready 回调中传入 $，函数内部可以安全使用 $
        jQuery(document).ready(function ($) {
            $("#btn-jquery").click(function () {
                alert("jQuery 在 ready 内部使用 $ 运行正常！");
            });
        });

        // Prototype 仍使用 $ 正常工作
        document.observe("dom:loaded", function () {
            $("btn-prototype").observe("click", function (event) {
                alert("Prototype 运行正常！");
            });
        });
    </script>
    <style>
        body {
            text-align: center;
            font-family: sans-serif;
            margin: 40px;
        }
        button {
            margin: 10px;
            padding: 10px 22px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h4>jQuery noConflict() 方法——ready 内部使用 $</h4>
    <p>下面两个按钮分别测试 jQuery 和 Prototype：</p>
    <button id="btn-jquery">运行 jQuery</button>
    <button id="btn-prototype">运行 Prototype</button>
</body>
</html>

这种方法的好处是不需要创建全局变量，所有 jQuery 代码仍然可以用习惯的 $ 来编写，但所有的 $ 使用都必须在 ready() 的回调函数内部。外部如果需要写 jQuery 代码则必须用 jQuery 全名。

个人经验与实用建议

在现在前端开发中，多库共存的场景已经比十几年前少了很多，React、Vue 等现在框架通常不会去抢占 $。但 noConflict() 在以下情况仍然有用：

维护老项目：接手一个同时使用 jQuery 和 Prototype 的遗留系统时，理解 noConflict() 是排查问题的第一步。
引入 jQuery 插件：某些老插件可能依赖 $，如果你在项目其他地方用了 noConflict()，插件可能会导致 $ is not a function 的错误。此时可以将插件代码整体包裹在一个 IIFE（立即执行函数表达式）中，把 jQuery 作为 $ 传入：

(function ($) {
    // 插件代码在这里可以安全使用 $
})(jQuery);

开发 jQuery 插件：如果你正在写一个 jQuery 插件，推荐在插件外层包裹上述 IIFE 结构。这样无论使用者是否调用了 noConflict()，你的插件都能正常工作。

之后提醒一个容易忽视的点：noConflict() 只处理 $ 的冲突，jQuery 这个全局变量本身仍然存在。如果页面中还有另一个库也叫 jQuery，那是另一个层面的命名冲突，需要更彻底的模块化方案来解决。好在中这种情况比较少，大多数时候你只需要管理好 $ 这一个别名就够了。

本文标签：

jQuery noConflict()方法：解决多库并存时的 $ 冲突

语法

课程知识要点

示例一：创建自定义别名解决冲突

示例二：在 ready() 函数内部安全使用 $

个人经验与实用建议

感谢您的认可和支持