动态加载的JavaScript库什么时候可用？

Question

我编写了JavaScript库来使用FileSaver.js及其相关的库.但是,每当有人想要使用我的库时,我都不想总是加载FileSaver.js.而且我不想强迫他们自己加载所有各种与FileSaver相关的JavaScript库script(或者甚至加载我的一个可以做到这一点).

相反,我更喜欢的是这样的.当他们调用我的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的相关性降低.