外部JavaScript全局变量名冲突问题求解

问题背景 #

需要在同一网页中加载两个第三方JS脚本：

<script src="https://external_one/some_script.js"></script>
<script src="https://external_two/another_script.js"></script>

单独加载时两者均正常运行，但同时加载时，两个脚本共用的全局变量_会被后加载的脚本覆盖，导致只有后者能正常工作。由于脚本逻辑复杂无法自行修改，且服务商未提供类似jQuery的noConflict方法，之前尝试过用AJAX加载脚本后通过eval执行，但风险较高，需要更安全的可行方案。

实用解决方案 #

1. 用IIFE隔离作用域（需获取脚本源码） #

如果能拿到两个脚本的源码（比如下载到本地或通过CORS请求获取），可以用立即执行函数表达式（IIFE）把每个脚本的作用域隔离开，同时将各自的_映射到自定义全局变量：

处理第一个脚本的示例：

(function(window) {
  // 暂存当前全局的_（如果存在）
  const tempUnderscore = window._;
  // 给当前脚本创建独立的_变量
  (function(_) {
    // 这里粘贴第一个脚本的所有代码
  })({});
  // 将第一个脚本的_挂载到全局自定义属性
  window.script1Underscore = window._;
  // 恢复之前的全局_，留给第二个脚本使用
  window._ = tempUnderscore;
})(window);

第二个脚本用同样的方式处理，最终挂载到window.script2Underscore，之后就能通过这两个自定义变量分别访问两个脚本的_。

2. 用iframe隔离全局环境（无需修改脚本） #

把其中一个脚本放到独立的iframe里，利用iframe的独立全局作用域避免冲突，步骤如下：

<!-- 先加载第一个脚本到主页面 -->
<script src="https://external_one/some_script.js"></script>
<!-- 把第一个脚本的_存到自定义全局变量 -->
<script>
  window.script1Underscore = window._;
</script>

<!-- 创建隐藏的iframe加载第二个脚本 -->
<iframe id="script2Container" style="display: none;"></iframe>
<script>
  const frame = document.getElementById('script2Container');
  const frameWin = frame.contentWindow;
  // 在iframe里创建脚本标签加载第二个脚本
  const scriptTag = frameWin.document.createElement('script');
  scriptTag.src = 'https://external_two/another_script.js';
  scriptTag.onload = () => {
    // 把iframe里的_挂载到主页面的自定义变量
    window.script2Underscore = frameWin._;
  };
  frameWin.document.body.appendChild(scriptTag);
</script>

这种方法完全不需要修改脚本内容，缺点是主页面和iframe之间的上下文隔离，但如果只是需要调用脚本的方法，直接通过挂载的全局变量访问即可。

3. 转为ES模块封装（现代浏览器支持） #

如果浏览器支持ES模块，且能获取脚本源码，可以把脚本转为模块，模块拥有独立作用域不会污染全局：

修改第一个脚本为模块文件（比如script1.mjs）：

// script1.mjs
let _ = {};
// 粘贴原脚本的所有代码...
export default _;

然后在页面中通过模块导入：

<script type="module">
  import script1Underscore from './script1.mjs';
  window.script1Underscore = script1Underscore;
</script>

<script type="module">
  import script2Underscore from './script2.mjs';
  window.script2Underscore = script2Underscore;
</script>

这种方式符合现代JS开发规范，但需要调整脚本的导入方式，且依赖浏览器对ES模块的支持。

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