JavaScript ES6如何在加载外部脚本后执行函数？求可靠替代方案

当然有！完全不需要依赖jQuery，ES6+本身就提供了多种可靠、优雅的方式来实现这个需求。下面是几个常用的方案，覆盖不同场景：

方案1：用Promise封装原生脚本加载（兼容性最佳） #

这个方案兼容性好，支持几乎所有现代浏览器，而且可以灵活复用，还能完善处理加载错误：

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    // 脚本加载完成后触发resolve
    script.onload = () => resolve();
    // 加载失败时触发reject，带上错误信息
    script.onerror = () => reject(new Error(`无法加载脚本: ${url}`));
    // 将脚本插入到页面头部
    document.head.appendChild(script);
  });
}

// 使用示例
loadScript('foo.js')
  .then(() => {
    // 脚本就绪，调用里面的方法
    runFunction();
  })
  .catch(error => {
    // 捕获加载失败的情况
    console.error(error);
  });

如果需要同时加载多个脚本，可以结合Promise.all来实现：

Promise.all([
  loadScript('foo.js'),
  loadScript('utils.js')
])
.then(() => {
  // 所有脚本都加载完成后执行
  runFunction();
  initUtils();
})
.catch(error => {
  console.error('某个脚本加载失败:', error);
});

方案2：使用ES动态import()（现代浏览器首选） #

如果你的项目支持ES模块，或者目标浏览器是现代版本，那么动态import()是最简洁的方案——它是ES6+的原生特性，专门用于异步加载模块：

import('foo.js')
  .then(module => {
    // 如果脚本是ES模块，直接调用导出的方法
    module.runFunction();
    // 如果脚本是全局挂载的方法，直接调用即可
    runFunction();
  })
  .catch(error => {
    console.error('脚本加载失败:', error);
  });

这个方案的优势在于语法极简，原生支持模块依赖管理，不需要手动创建script标签。需要注意的是，动态import()需要浏览器支持ES模块（大部分现代浏览器都支持），如果要兼容旧浏览器，可以通过Webpack、Rollup等打包工具处理。

和jQuery方案的对比 #

这些原生方案相比$.getScript有几个明显优势：

• 不需要引入jQuery，减少项目体积
• 拥有更完善的错误处理机制（catch可以捕获加载失败的情况）
• 更灵活，可以扩展出批量加载、顺序加载等复杂逻辑
• 符合现代JavaScript的编程范式（Promise/ES模块）

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