Question

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

问题是我们现在开始在某些产品中摆脱jQuery，但仍然需要这个书签以相同的方式运行。

所以，我想更新bookmarklet，以便首先检查页面上是否存在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')...
});

在外部脚本加载

1 个答案: