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

Question

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

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

1. Load() html
2. 确保javascript函数存在，否则加载脚本并对其进行解释。
3. 在重新构建DOM之后，在javascript上调用一个函数。

步骤一和步骤二必须在执行步骤3之前完成。

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

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 / can：

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 决定/承诺使代码更好。

Answer 2

如果您不想加载JS不止一次，并且要动态加载JS，那么了解JS是否已经加载的唯一方法是测试是否已经加载了JS。我知道的选择是：

1. 我所知道的最简单的是您已经在做的事情(检查javascript中定义的函数是否存在)。
2. 还可以在每个选项卡上使用一个属性(使用jQuery的.data()，在加载脚本后将其设置为true )。
3. 您可以编写动态加载的代码，以便它知道如何避免在已经加载的情况下重新初始化自己。在这种情况下，您只需每次加载它，但连续的时间不会做任何事情。提示，您不能有任何静态定义的全局值，您必须在运行自己的初始化代码之前测试它是否已经加载。

Answer 3

(还没有测试它，所以我不确定它是否有效，特别是因为我还没有真正理解javascript中的范围：)

function require(scripts, callback){
var loadCount = 0;

function done(){
loadCount -=1;
if (loadCount==0){ 
    callback();
    }
}

for ( var script in scripts){
    if (!script.exitsts()){
        loadCount +=1;
        jQuery.getScript(script.url, done);
        }
}

}

此函数接受所需的脚本数组，并确保在调用callback()之前对所有脚本进行解释。

“脚本”类：

function script(url, testFunc){
this.url =url;
this.testFunction = testFunc;
this.exists = function(){
if(typeof(testFunction)=="function"){
    return true;
    } 
else{
    return false;
    }
}
}

其中测试函数是(仅)在相关脚本中定义的函数。

PS:为了在JQuery中启用缓存，从而防止浏览器每次调用getScript()时执行GET请求，可以使用呈现在这里方法之一。

即使避免了不必要的GET -请求，每次调用getScript()时，脚本仍然会得到解释。这有时可能是所期望的行为。但在许多情况下，没有必要重新解释图书馆的功能。在这些情况下，如果所需的库函数已经可用，则避免调用getScript()是有意义的。(正如在本例中使用script.exists()所做的那样)。