javascript - 从异步加载的外部脚本中使用 jQuery 插件

Question

我有一个非常基本的 jQuery 插件，我将其加载到我的网页中，如下所示:

(function() {
    var tk = document.createElement('script');
    tk.src = '//www.test.com/scripts/jq_plugin.js';
    tk.type = 'text/javascript';
    tk.async = 'true';
    tk.onload = tk.onreadystatechange = function() {
        var rs = this.readyState;
        if (rs && rs != 'complete' && rs != 'loaded') return;
    };
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(tk, s);
})();

然后，我这样调用插件:

$(function(){
    $('#test').jq_plugin();
});

但是当页面加载时我收到此错误:

Uncaught TypeError: undefined is not a function
(anonymous function)

我明白为什么 - 在加载脚本之前调用插件。我知道一个快速而肮脏的黑客只是在插件调用周围使用 setTimeout() 但我不想这样做。我尝试在 jQuery 之前和之后插入脚本，但得到相同的结果。

如何在不超时的情况下执行此操作？

这是插件的精简版本:

(function ( $ ) {
    $.fn.jq_plugin = function(options){
        return this.each(function() {
            return $(this).click(onClick);
            function onClick(e){
                console.log('ID: '+$(this).attr('id'));
            }           
        });
    };
}( jQuery ));

Answer 1

您创建了一个 onload/onreadystatechange，但它所做的只是返回。在尝试调用插件之前，您需要检查这一点。

您可以将使用该插件的代码放在该 onload 函数中

tk.onload = tk.onreadystatechange = function() {
    var rs = this.readyState;
    if (rs && rs != 'complete' && rs != 'loaded'){
         $(function(){
              $('#test').jq_plugin();
         });
    }
};

您可以设置一个 bool 值tkHasLoaded = false，然后在 onload 函数中将其设置为 true。在尝试使用该插件之前检查一下。