动态加载某个 JavaScript 文件再执行 JavaScript 的几种方法详解

在现代前端开发中，我们经常需要在运行时动态加载 JavaScript 脚本，而不是在 HTML 静态声明。这种方式有助于优化性能、按需加载模块、延迟执行代码，在单页应用（SPA）、插件加载、第三方库按需引入等场景尤为重要。以下是几种常见且实用的动态加载 JS 文件的方法。

1. 原生 DOM 插入 Script 标签

最经典、兼容性最强的方式是在运行时创建一个新的 <script> 元素，并将其插入到 DOM 中。浏览器在插入后会自动下载并执行该 JS 文件。

示例代码：

const script = document.createElement('script');
script.src = 'path/to/file.js';
document.head.appendChild(script);

该方式简单直观，但如果需要在加载完成后执行特定逻辑，可以添加 onload 和 onerror 回调监听事件。

2. 使用 Promise 控制加载

为了更好地管理加载完成后的操作，可以封装一个 Promise，使得调用者可以 then() 或 async/await 方式等待加载完成。

示例代码：

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = () => resolve();
    script.onerror = () => reject(new Error(`Failed to load ${url}`));
    document.head.appendChild(script);
  });
}

这样可以确保在脚本完全载入并执行后再执行后续逻辑，例如初始化插件或调用模块暴露的函数。

3. XMLHttpRequest / fetch + eval 执行

除了插入 <script> 标签，还可以通过异步请求（fetch 或 XMLHttpRequest）获取 JS 文本内容，再通过 eval 或 new Function() 执行代码。

示例代码：

fetch('path/to/file.js')
  .then(res => res.text())
  .then(code => eval(code));

该方法灵活，但需注意安全风险（执行任意代码）和调试困难，一般不推荐在安全敏感项目中使用。

4. 动态 import（ES6 模块）

对于使用 ES6 模块化语法的项目，可以使用动态 import() 在需要时加载模块。这种方式会返回一个 Promise，加载完成后可直接访问模块导出的内容。

示例代码：

import('path/to/module.js')
  .then(module => {
    module.default(); // 调用模块逻辑
  });

动态 import 是现代前端开发中推荐的按需加载方式，支持 Tree-Shaking 和打包优化。

5. 多个脚本顺序加载与执行

在需要按顺序动态加载多个脚本时，采用回调、Promise 链或 async/await 组合可以确保执行顺序。默认情况下，动态 <script> 标签可能异步加载，执行顺序并不一定与添加顺序一致。

结合上面的 Promise 方法，可以串行加载多个脚本，并在所有脚本加载完成后执行主逻辑。

总结来说，动态加载脚本的方法多种多样：从最原始的 DOM 插入 <script> 标签，到 Promise、动态 import、XHR + eval，各有优缺点。实际使用时应根据项目架构、性能要求和安全性综合选择最合适的方案。