2

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

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

  1. 加载（） html

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

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

在执行第 3 步之前，必须先完成第 1 步和第 2 步。

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

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

    } );

}

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

4

3 回答 3

2

您不能完全同步地编写代码，因为您无法在页面加载后同步加载脚本（除非您执行同步 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使代码更好。

于 2012-10-25T04:08:03.567 回答
0

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

  1. 我所知道的最简单的是您已经在做的事情（检查是否存在在 javascript 中定义的函数）。

  2. 您还可以在每个选项卡上使用一个属性（使用加载脚本后.data()设置的 jQuery 。true

  3. 您可以编写动态加载的代码，以便它知道如何在已经加载的情况下避免重新初始化自身。在这种情况下，您只需每次加载它，但连续的时间不会做任何事情。提示，你不能有任何静态定义的全局变量，你必须在它运行自己的初始化代码之前测试它是否已经被加载。

于 2012-10-25T00:03:22.993 回答
0

（还没有测试过，所以我不确定它是否有效，特别是因为我还没有真正理解 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 请求，您可以使用此处介绍的方法之一。

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

于 2012-10-25T01:18:38.250 回答