jQuery源码分析：如何解决jQuery、$关键字与其它脚本框架的冲突问题？

最新推荐文章于 2025-05-28 16:25:34 发布

gezhonglei2007

最新推荐文章于 2025-05-28 16:25:34 发布

阅读量951

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript JQuery 文章标签： jquery 闭包

本文链接：https://blog.youkuaiyun.com/gezhonglei2007/article/details/50626213

JavaScript 同时被 2 个专栏收录

8 篇文章

订阅专栏

JQuery

4 篇文章

订阅专栏

本文深入探讨jQuery脚本的冲突现象，解释了当jQuery与其它框架在同一页面加载时，如何通过设置来确保jQuery的正常使用，同时提供了解决方案以避免混淆与优先级问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将jQuery脚本简化如下，可能看得更清楚jQuery的实现：先将（通过window全局变量来获取）外部$、jQuery对象缓存起来。
然后调用noConflict方法来恢复jquery.js加载之前的$、jQuery对象值。

// 请务必注意执行顺序
(function(window, undefined){
    var jQuery = function(){
        //...
    }, 
    _$ = window.$,              // _$指向外部$
    _jQuery = window.jQuery;    // _jQuery指向外部jQuery

    //...
    jQuery.extend({
        noConflict: function(deep){
            if(window.$ === jQuery) { window.$ = _$; }
            if(deep && window.jQuery === jQuery) { window.jQuery = _jQuery; }
        }
    });
    //...
    // 用本地jQuery覆盖外部jQuery、$（其初衷当然不是“覆盖”，只是保证在外部可以直接使用jQuery、$)
    winodw.jQuery = window.$ = jQuery; 
})(window);

默认情况下，同样的使用jQuery、$等相同关键字的脚本框架，后导入框架的总是控制优先权。
在以下两个场景，以jQuery为核心，如何正常地使用jQuery与其它框架：

jQuery在前时，$关键字被其它框架覆盖。要想使用jQuery，只能使用jQuery关键字。
其它框架不太可能使用jQuery关键字。

 <script src="jquery.js" type="text/javascript" /> 
 <script src="xxx.js" type="text/javascript" />
 <script type="text/javascript">
     // jQuery关键字$被框架的xxx.js中的$被覆盖
 </script>

jQuery在后时，jQuery取得优先权。但是如何使用xxx.js中的$关键字呢？

 <script src="xxx.js" type="text/javascript" />
 <script src="jquery.js" type="text/javascript" />
 <script type="text/javascript">
     // 问题1. xxx.js的$关键字，被jQuery.js覆盖，怎么办？
     // jQuery仍然用jQuery关键字，xxx.js使用$的做法如下
     jQuery.noConflict();
 </script>

如果jquery.js在后，覆盖了其它的框架使用$、jQuery关键字，即jquery.js不能再使用这两个关键字，怎么解决了？当然是取别名了。

//注意指定参数true,才会将jQuery关键字转让出去。
var jq = jQuery.noConflict(true);