Question

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

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

加载（）html
确保存在javascript函数，否则加载脚本并解释它。
在重建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 / 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来使代码更好。

Answer 2

如果您不想多次加载JS并且要动态加载它，那么知道它是否已经加载的唯一方法是测试某些条件，表明它已经加载了。我所知道的选择是：

我所知道的最简单的就是你正在做的事情（检查是否存在javascript中定义的函数）。
您还可以在每个标签页上使用属性（使用加载脚本后设置为.data()的jQuery true。
您可以编写动态加载的代码，以便它知道如果已经加载了，如何避免重新初始化自身。在这种情况下，您只需每次加载它，但连续几次都不会执行任何操作。提示，你不能有任何静态定义的全局变量，你必须测试它是否已经在它运行自己的初始化代码之前被加载。

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;
    }
}
}

其中test-function是在相关脚本中定义（仅）的函数。

PS：要在JQuery中启用缓存，从而阻止浏览器在每次调用getScript（）时都执行GET请求，您可以使用presented here之一的方法。

即使避免了不必要的GET请求，每次调用getScript（）时脚本仍会被解释。这有时可能是期望的行为。但在许多情况下，没有必要重新解释库函数。在这些情况下，如果所需的库函数已经可用，则避免调用getScript（）是有意义的。（正如在本例中使用script.exists（）完成的。

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

3 个答案: