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

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')...
})()

请注意，由于这是一个书市，它会在加载/呈现后注入(inject)到页面中，因此它不像将 jQuery 脚本 block 放在头部更高的位置那样简单。

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')...
});