javascript - 动态加载的 JavaScript 库何时可用？

Question

我编写了 JavaScript 库来使用 FileSaver.js及其相关库。但是，我不想在有人想使用我的库时总是加载 FileSaver.js。而且我不想强制他们自己加载所有带有 script 标签的各种 FileSaver 相关 JavaScript 库(或者甚至加载我的一个可以做到这一点)。

相反，我更喜欢这样的东西。当他们调用我的 createImage 函数时，它首先执行以下操作:

function createImage(image, name) {
  if (typeof(saveAs) !== 'function') {
    var element = document.createElement('script');
    element.async = false;
    element.src = 'FileSaver.js';
    element.type = 'text/javascript';
    (document.getElementsByTagName('head')[0]||document.body).appendChild(element);
  }
  // now do the saveImage code
}

问题是，在上面之后，saveAs 函数仍然没有定义。只有在我的createImage 完成后，saveAs 函数才最终定义。

Answer 1

整体解决方案是使用模块系统。 AMD(在我的观察中，请不要开始圣战的观点)可能是浏览器异步代码加载最常用的系统。 AMD 只是一个规范，但类似于 require.js是一个非常流行的使用 AMD 模块的工具。

想法是您可以定义模块之间的依赖关系，并且 require.js 将在需要时获取它们。总体思路是模仿其他语言(如 java、C# 或 python)的导入/命名空间功能。我认为是“代码共享”这个词？

简单地说，您将所有代码放在一个回调函数中，该回调函数在加载依赖项后运行，因此您可以确保所需的对象和方法存在。

2015 年更新

只是一个补充。虽然上面的信息仍然正确，但前端代码管理正迅速转向 Webpack 和 Browserify 等解决方案，它们捆绑和连接任何模块类型的代码，并且都具有动态代码加载功能(webpack 称之为代码拆分)。再加上用于依赖管理的 npm 呈指数级增长，开始让 AMD 变得不那么重要了。