如何实现多版本jQuery共存？旧版保留$和jQuery，新版设别名

当然可以在同一页面同时使用多个版本的jQuery！这是jQuery特意设计的特性，完美适配你这种“旧代码重度依赖老版本，新功能想用上最新版”的场景。下面给你一步步拆解实现方案，完全满足你要求的$和jQuery始终指向旧版、新版用自定义别名的需求：

• 第一步：先加载你的旧版jQuery
  这一步是关键，得让旧版先“占领”全局的$和jQuery变量，这样后面的操作才有基础。

  <!-- 替换成你实际使用的旧版jQuery文件路径 -->
  <script src="jquery-old.min.js"></script>
  

• 第二步：加载最新版的jQuery
  此时新版jQuery会暂时覆盖全局的$和jQuery，不过我们马上就能把它们“抢”回给旧版。

  <!-- 替换成最新版jQuery的文件路径 -->
  <script src="jquery-latest.min.js"></script>
  

• 第三步：用noConflict(true)锁定旧版，保存新版引用
  这是核心操作，jQuery.noConflict(true)会完成两个重要动作：

  1. 把全局的jQuery和$恢复到加载新版之前的状态——也就是重新指向旧版，你的所有旧功能代码完全不受影响；
  2. 返回当前的jQuery实例（也就是新版），我们把它赋值给你想要的别名，比如jQueryNew。

  <script>
  // 自定义新版的别名，这里用jQueryNew，你也可以换成其他名字比如jQuery3x
  const jQueryNew = jQuery.noConflict(true);
  </script>
  

你可以加一段测试代码确认两个版本都正常工作：

<script>
// 调用旧版的$，输出旧版版本号
console.log('旧版jQuery版本:', $.fn.jquery); 

// 调用新版的别名，输出新版版本号
console.log('新版jQuery版本:', jQueryNew.fn.jquery); 
</script>

• 加载顺序绝对不能乱：必须是「旧版jQuery → 新版jQuery → 执行noConflict」的顺序，否则无法实现变量隔离；
• 第三方插件的适配：如果有依赖旧版jQuery的插件，一定要在旧版加载之后、新版加载之前引入；如果是你自己写的新扩展，直接用jQueryNew代替$/jQuery调用新版API即可；
• 无需修改现有框架：这个方案完全是在全局层面做变量隔离，不需要改动你现有框架的原生功能，对你的扩展开发非常友好。

内容的提问来源于stack exchange，提问作者dharanbro