在外部脚本加载之前不要执行其余代码

Question

我正在编写一个小书签脚本（一个大的 IIFE ）。该脚本之前是为包含 jQuery 的页面创建的，并且广泛使用 jQuery。

问题是我们现在开始在我们的一些产品中远离 jQuery，但仍然需要这个小书签以同样的方式运行。

所以，我想更新书签，以便它首先检查页面上是否存在 jQuery。

如果是 jQuery，继续正常执行。

如果是 !jQuery，则下载 jQuery (AJAX)，然后执行脚本的其余部分。

问题是我不确定如何在 IIFE 中执行此操作。由于获取脚本将是一个异步操作，在继续执行脚本之前，如何确保 jQuery 已下载并且可以正常运行？这就是我目前所拥有的......

(function () {
    var continueExec = true;
    if (!window.jQuery) {
        continueExec = false;
        var s = document.createElement('script');
        s.onload = function () {
            continueExec = true;
        };
        s.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
        document.head.appendChild(s);
    }
        // .. now I want to be able to use jQuery here. What do I need to change?
        // $('.className')...
})()

请注意，由于这是一个书市，它会在加载/渲染后注入到页面中，所以它不像将 jQuery 脚本块放在头部更高处那么简单。

Answer 1

在 javascript 中，您需要一个回调来处理异步操作。

在您的示例中，我们可以在两种情况下执行这样的回调：
a) jQuery 已经定义
b) jQuery 已下载并可以使用

因此，我们稍微更改您的代码并将回调传递给包含主应用程序的 IIFE，并在两种情况下都调用它。

(function (callback) {
    if (!window.jQuery) {
        var s = document.createElement('script');
        s.onload = function() {
          // Start the main application once jQuery was load:
          callback(window.jQuery);
        };
        s.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
        document.head.appendChild(s);
    } else {
      // Start the main application directly as jQuery is already part of the page:
      callback(window.jQuery);
    }
})(function($) {
    // The main application
    //
    // here you can use
    // $('.className')...
});