Question

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

当SDK准备好使用时，Google会调用此函数：

google.setOnLoadCallback(MyFunction);

jQuery执行此回调中的所有操作：

document.ready();

如果我想在Google的回调后使用jQuery操作dom怎么办？什么是告诉浏览器的最佳方式：“等待jQuery和Google做好准备并做点什么......” 是否最好将jQuery回调嵌套在google回调中？或者反过来说？我有点困惑。谢谢！

Answer 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)){
    ...
    ...
  }
}

Answer 2

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

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

结合不同Javascript SDK回调的最佳实践

2 个答案: