为何加载两次jQuery才可正常运行？已定位冲突文件

问题回顾 #

头部加载一次jQuery后，末尾的$(document).ready()代码报错Uncaught TypeError: $ is not a function，但加载两次jQuery就正常运行。后续定位到原因：引入了jquery-mobilemenu.min.js，其中包含代码：

jQuery.noConflict()(function ($) {

问题根源 #

jQuery.noConflict()的核心作用是释放全局的$变量，让它不再指向jQuery对象（用于避免和其他依赖$的JS库冲突）。当插件执行这段代码后，全局作用域里的$就和jQuery解绑了，你的代码再用$自然找不到jQuery，触发报错。

而加载两次jQuery时，第二次加载会重新将全局的$绑定回jQuery对象，覆盖了之前noConflict()的操作，所以你的代码能正常运行。

解决方案 #

方案1：调整自身代码适配noConflict #

无需修改插件，仅调整自己的代码即可：

• 直接用jQuery替代$：

  jQuery(document).ready(function(){
    // 你的业务代码
  });
  

• 或者在ready回调中传入$参数（利用闭包保留$指向jQuery）：

  jQuery(document).ready(function($){
    // 此处可正常使用$
    // 你的业务代码
  });
  

方案2：修正插件的noConflict写法（若有权限修改插件） #

插件原写法逻辑存在瑕疵，正确的noConflict用法应该是先释放全局$，再通过闭包传递jQuery为局部$：

jQuery.noConflict();
(function($) {
  // 插件内部代码，此处的$指向jQuery
  // 原插件业务逻辑写在这里
})(jQuery);

这种写法既保留了插件的冲突规避能力，又不会影响你后续代码对全局$的使用。

内容的提问来源于stack exchange，提问作者Nico van Wijk