动态加载 JavaScript 文件并执行其中方法的实用指南

在前端开发中，动态加载 JavaScript 文件是一种非常常见且有用的技术。通过动态加载，我们可以按需引入脚本、优化页面性能、延迟加载功能模块，从而提升用户体验。本文将详细介绍如何动态加载某个 js 文件，并在加载完成后执行该文件内部定义的方法。

什么是动态加载 JavaScript 文件

动态加载 js 文件是指在页面已经加载的情况下，通过 JavaScript 代码向 DOM 中插入 <script> 标签来引入外部脚本。与在 HTML 中静态写 <script src="..."> 不同，这种方式可以在运行时根据条件或事件来加载脚本，实现按需加载。

如何动态加载 js 文件

最常见的动态加载方式是使用原生 JavaScript 创建一个 script 元素并设置其 src 属性。例如：

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

当 script 元素被插入文档后，浏览器会自动开始加载并执行相应的脚本。

等待脚本加载完成再执行方法

如果你想在动态加载的脚本执行之后调用其中定义的函数，需要监听 script 元素的 onload 事件。示例代码如下：

function loadAndExec(url, callbackName) {
  const script = document.createElement('script');
  script.src = url;
  script.onload = () => {
    if (typeof window[callbackName] === 'function') {
      window[callbackName]();
    }
  };
  script.onerror = () => {
    console.error('脚本加载失败');
  };
  document.head.appendChild(script);
}

// 使用方式
loadAndExec('external-script.js', 'myFunction');

在上面的例子中，external-script.js 会被加载，加载成功后再调用它定义的全局函数 myFunction()。

使用 Promise 或 Async/Await 优化加载流程

在现代 JavaScript 中，我们也可以使用 Promise 或 async/await 对动态加载进行封装，使调用逻辑更加简洁和可维护。例如：

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

async function loadAndRun(url, fn) {
  await loadScript(url);
  fn();
}

这段代码利用 Promise 让加载逻辑变得更清晰，也方便处理多个脚本的顺序加载问题。

多文件顺序加载注意事项

如果需要动态加载多个脚本并保证执行顺序，可以在第一个脚本加载完成后再加载下一个，或者使用 Promise 链式调用来控制顺序。否则，多个 script 元素可能会并行加载，导致执行顺序不一定按预期。

总结来说，动态加载 js 文件并执行方法是前端开发中常见的需求，通过 DOM 操作、事件监听以及 Promise 等方式可以很好地实现这一目标。