如何将大型index.js拆分为可共享变量与函数的纯JavaScript文件？

优先推荐：ES模块（现代浏览器标准方案） #

这是目前前端模块化的标准方式，原生支持变量、函数的导入导出，不会污染全局作用域。

• 拆分模块文件（比如utils.js）：

  // 导出单个变量/函数
  export const baseUrl = '/api';
  export function formatDate(date) {
    return new Date(date).toLocaleDateString();
  }
  
  // 导出默认内容（一个文件只能有一个默认导出）
  export default function calculateTotal(prices) {
    return prices.reduce((sum, price) => sum + price, 0);
  }
  

• 主文件index.js中导入使用：

  // 导入指定的变量和函数
  import { baseUrl, formatDate } from './utils.js';
  // 导入默认导出的内容
  import calculateTotal from './utils.js';
  
  // 直接使用导入的内容
  console.log(baseUrl);
  console.log(formatDate(new Date()));
  console.log(calculateTotal([10, 20, 30]));
  

• HTML中引入时必须声明type="module"：

  <script type="module" src="./index.js"></script>
  

注意：ES模块遵循同源策略，本地开发不能直接打开HTML文件，需要用本地服务器（比如npx serve启动一个简单服务器）。

兼容旧环境：IIFE（立即执行函数表达式） #

如果需要兼容不支持ES模块的旧浏览器，可以用IIFE创建闭包封装代码，同时通过全局命名空间共享内容。

• 先定义全局命名空间（比如app.js）：

  // 创建一个全局对象作为共享容器
  const MyApp = {};
  

• 拆分模块文件（比如utils.js），把共享内容挂载到全局命名空间：

  // 用IIFE封装，避免污染全局
  (function(app) {
    // 模块内部私有变量，外部无法访问
    const privateSecret = '只有这个模块能看到我';
    
    // 挂载共享变量到全局命名空间
    app.baseUrl = '/api';
    // 挂载共享函数
    app.formatDate = function(date) {
      return new Date(date).toLocaleDateString();
    };
  })(MyApp);
  

• 主文件index.js中直接使用：

  console.log(MyApp.baseUrl);
  console.log(MyApp.formatDate(new Date()));
  

• HTML中按顺序引入（先加载命名空间，再加载模块，最后加载主文件）：

  <script src="./app.js"></script>
  <script src="./utils.js"></script>
  <script src="./index.js"></script>
  

应急方案：全局对象挂载（不推荐） #

把需要共享的内容直接挂载到window对象上，所有JS文件都能访问，但容易造成全局变量污染，大型项目慎用。

• 在utils.js中挂载内容：

  window.baseUrl = '/api';
  window.formatDate = function(date) {
    return new Date(date).toLocaleDateString();
  };
  

• 在index.js中直接使用：

  // 可以直接访问，或者通过window.xxx访问
  console.log(baseUrl);
  console.log(formatDate(new Date()));
  

总结 #

• 现代项目优先用ES模块，符合标准，代码更清晰，无全局污染。
• 旧环境兼容用IIFE+全局命名空间，兼顾封装性和兼容性。
• 全局挂载只适合小型项目或临时测试场景，尽量避免。

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