组合不同 Javascript SDK 回调的最佳实践答案

【问题标题】：Best practice to combine different Javascript SDKs callbacks组合不同 Javascript SDK 回调的最佳实践
【发布时间】：2012-08-13 16:03:58
【问题描述】：

我之前遇到过这种情况几次，并且总是找到一种棘手的方法来让它发挥作用，但我想知道是否有最佳做法：有时您必须在一个页面示例中使用多个 JavaScript SDK：Google jsapi 和 jQuery。

当 SDK 可以使用时，Google 会调用此函数：

google.setOnLoadCallback(MyFunction);

jQuery 在这个回调中做所有事情：

document.ready();

如果我想在 Google 回调之后使用 jQuery 操作 dom 怎么办。告诉浏览器的最佳方式是什么：“等待 jQuery 和 Google 准备好然后做这些事情……” 最好将 jQuery 回调嵌套在 Google 回调中吗？还是反过来？我有点困惑。

【问题讨论】：

标签： javascript jquery jquery-events jsapi

【解决方案1】：

您可以通过不同的方式做到这一点，其中一种是使用全局变量；

var googleLoaded = false;

google.setOnLoadCallback(function(){
   googleLoaded = true;
   mainCallback();
});

document.ready(mainCallback);

function mainCallback(){ 
  if(googleLoaded){
    ...
    ...
  }
}

作为一般解决方案，您可以按照以下方式进行操作

var jsLibsToLoad = 5;

jsLib1.onLoad(mainCallback);
jsLib2.onLoad(mainCallback);
jsLib3.onLoad(mainCallback);
jsLib4.onLoad(mainCallback);
jsLib5.onLoad(mainCallback);

function mainCallback(){ 
  if(!(--jsLibsToLoad)){
    ...
    ...
  }
}

【讨论】：

【解决方案2】：

我建议您使用一些 AMD 工具，例如 RequireJS。 RequireJS 是一个 JavaScript 文件和模块加载器，它非常适合依赖管理。在您的特定情况下（使用一些传统/遗留的“浏览器全局”脚本），您应该另外使用Shim Config。

刚开始使用 AMD 有点棘手，但当您习惯它时，它会带来很大的好处。它将提高代码的速度和质量。

【讨论】：