javascript - 当我有一组脚本时，如何等待脚本加载？

Question

我有一个脚本对象数组，如下所示:

_externalLibraries = [{name: 'knockout', url: '...'}, { name: 'knockoutValidation', url: '....'}];

然后我尝试编写以下内容:

loadLibraries: function() {
  if (_externalLibraries.length === 0) {
    return;
  }

  _externalLibraries.forEach(function(lib){
    // Check if the libraries has been registered as "loaded."
    var librarysAlreadyLoaded = _loadedLibraries.filter(function(libAlreadyLoaded){
      return libAlreadyLoaded.name === lib.name;
    });

    // If it hasn't been loaded. Load it. This allows for mul;tiple widgets to be on the page.
    // Or this file (for what ever reason) to be called multiple times.
    console.log(librarysAlreadyLoaded);
    if (librarysAlreadyLoaded.length === 0) {
      $.getScript(lib.url, function(){
        _loadedLibraries.push({name: lib.name});
      });
    }
  });
},

基本上，我想做的是加载此数组中的库(如果尚未加载)。如果还没有，则加载它并将名称添加到“加载的库”数组中。

至少对于 knockout 和 knockout validation 而言，问题在于“ko 未定义”。页面加载后，我可以在控制台中输入 ko 并看到它实际上已加载。

我可以在代码中更改或添加什么，以使其显示“好吧，我需要等到加载该数组中的每个脚本”。然后做我想做的其他事情。

Answer 1

您可以使用 $.when() 、 Function.prototype.apply()

var _externalLibraries = [{
  name: "knockout",
  url: "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"
}, {
  name: "knockoutValidation",
  url: "https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"
}];

var loadedLibraries = [];

$.when.apply($, $.map(_externalLibraries, function(lib) {
  return $.getScript(lib.url, function() {
    loadedLibraries.push(lib.name)
  })
}))
.then(function() {
  console.log(loadedLibraries, ko, ko.validation)
}, function err(jqxhr, textStatus, errorThrown) {
    console.log(textStatus, errorThrown)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>