原生JavaScript如何实现全局作用域的多JS文件批量导入？

用户场景与问题描述 #

你有一个规模庞大的JavaScript库，希望拆分为多个独立文件，但不想在HTML中逐一引入大量JS文件，期望仅引入common.js就能加载所有依赖脚本，类似PHP的include机制。你的预期实现如下：

HTML代码 #

<!DOCTYPE html>
<html>
<head>   
   <meta charset="UTF-8">
   <title>page</title>
   <script type="text/javascript" src="common.js"></script>
</head>
<body>
   <!-- mypage -->
</body>
</html>

common.js #

include("functions.js");
include("load.js");

functions.js #

function foo() {
   alert("bar");
}

load.js #

window.onload = function() {
   foo();
}

你尝试过import()方法，但该方法无法将函数导入到全局作用域，触发了“foo() is undefined”错误，因此询问这是否是原生JavaScript的固有限制。

问题解答 #

这不是原生JavaScript的固有限制，而是ES模块（import/export）的设计特性导致的：

• ES模块默认拥有独立的模块作用域，模块内的变量、函数不会自动挂载到全局作用域，所以直接使用import()加载functions.js后，foo无法在全局（或其他模块）直接访问。
• 若要通过ES模块实现全局访问，需要在functions.js中显式将函数挂载到window：

  export function foo() {
     alert("bar");
  }
  window.foo = foo;
  

  但这种方式需要修改所有依赖模块的代码，不符合你想要的“无侵入式”引入需求。

原生JS实现类似PHP include的方案 #

你可以通过动态创建<script>标签的方式，实现同步加载脚本并将函数挂载到全局作用域的效果，具体实现如下：

修改common.js为：

function include(src) {
  const script = document.createElement('script');
  script.src = src;
  script.type = 'text/javascript';
  script.async = false; // 开启同步加载，保证脚本按顺序执行
  document.head.appendChild(script);
}

// 按顺序加载依赖脚本
include("functions.js");
include("load.js");

原理说明

• 设置async = false会让脚本同步加载并执行，确保functions.js中的foo函数先被定义，之后load.js执行时就能正常调用foo。
• 动态创建的脚本默认在全局作用域执行，所以functions.js中的函数会自动成为全局变量，无需额外修改。

注意：同步加载脚本会阻塞页面渲染，若你的脚本体积较大，可能影响页面加载速度。如果需要异步加载且保证执行顺序，可以基于Promise实现链式加载，但同步方式更贴合你想要的“类似PHP include”的直观效果。

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