ajax - 如果函数已经存在，则防止重新加载 javascript。否则确保同步加载

Question

使用 JQuery.load()，我更改了网站主窗口的内容，以允许用户在选项卡之间切换。对于每个选项卡，都有一个或多个脚本，其中包含加载选项卡内容后执行的函数。

显然，当第一次切换到选项卡时，必须从服务器获取脚本并进行解释，但如果用户稍后切换回选项卡，则不应发生这种情况。所以，简而言之:

1. 加载()html

2. 确保 JavaScript 函数存在，否则加载脚本并解释它。

3. 重建 DOM 后在 JavaScript 上调用函数。

执行步骤 3 之前必须完成步骤 1 和 2。

目前，我正在使用嵌套回调来实现这一点:

function openFirstTab(){
    $("#mainWindow").load("firstTab.php", function(){
        if(typeof(onloadfFirstTab) != "function"){
            jQuery.getScript("assets/js/FirstTab.js", function(){
                onloadFirstTab();
            });
        }
        else{
            onloadFirstTab();
        }

    } );

}

但我觉得应该有更好的方法。

Answer 1

您无法完全同步编写代码，因为您无法在页面加载后同步加载脚本(除非您执行同步 XHR 请求并评估结果 - 不推荐)。

您有几个选择。有一些预先存在的依赖管理库，例如 RequireJS，可能适合这里的要求，或者如果您只需要加载单个文件，您可以执行类似的操作来清理代码，而不是使用 if/else:

function loadDependencies() {
    // For the sake of example, the script adds "superplugin" to the jQuery prototype
    return $.getScript( "http://mysite.com/jquery.superplugin.js" );
}

function action() {
    // If superplugin hasn't been loaded yet, then load it
    $.when( jQuery.fn.superplugin || loadDependencies() ).done(function() {
        // Your dependencies are loaded now
    });
}

这利用了 jQuery Deferreds/Promises让代码变得更好。