检测脚本列表是否全部用JavaScript加载（使用名称空间）。

Z时代
2024-01-10
分类：问答

我做了一个JavaScript的命名空间框架。我正在加载一些插件（.js文件），这些插件被动态添加到HTML中。检测脚本列表是否全部用JavaScript加载（使用名称空间）。

我将尽量简化代码。

此函数用于dinamically加载JS。回调函数在加载完.js文件后调用。考虑下面的代码已经运行。

MYNAMESPACE.plugins = ["plugin1", "plugin2"]; 
MYNAMESPACE.getJS = { 
    get: function (url, callback) { 
     var script = document.createElement("script"); 
     var head = document.getElementsByTagName('head')[0]; 
     script.type = "text/javascript"; 
     script.src = url; 
     head.insertBefore(script, head.firstChild) 
     script.onload = callback; 
     script.onreadystate = callback; 
     return script; 
     } 
};

我必须加载包含在MYNAMESPACE.plugins插件如下一个初始化函数：

MYNAMESPACE.init = function (callback) { 
    for (index in MYNAMESPACE.plugins) { 
     plugin = MYNAMESPACE.plugins[index]; 
     MYNAMESPACE.getJS.get(plugin + '.js', function() 
     { 
       // This callback is executed when the js file is loaded 
     }); 
    } 
    // Here I want to execute callback function, but after all the callbacks in the for loop have been executed. Something like: if (alljsloaded) callback(); 
}

在我的HTML我有以下脚本标签：

<html> 
    <head> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      MYNAMESPACE.init(); 
      // The following line is not executed correctlybecause init finished before the scripts are loaded and the functionOnPlugin1 is undefined. 
      MYNAMESPACE.functionOnPlugin1(); 
     }); 
    </script> 
    </head> 
    <body> 
    </body> 
</html>

我想改变它是这样的：

<html> 
    <head> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      MYNAMESPACE.init(function() { MYNAMESPACE.functionOnPlugin1(); }); 
     }); 
    </script> 
    </head> 
    <body> 
    </body> 
</html>

但我不知道如何修改函数MYNAMESPACE.init（），以便在所有插件脚本加载后执行回调。

任何想法？也许使用闭包。

回答：

使用for(;;)遍历一个数组，不for(.. in ..)。

在函数中创建一个计数器，每次脚本加载时都增加一个计数器。当它达到脚本的数量时，调用回调函数。

代码：

MYNAMESPACE.init = function (callback) { 
    var allPluginsLength = MYNAMESPACE.plugins.length; 
    var loadedCount = 0; 
    if (allPluginsLength === 0) callback(); // No plugins, invoke callback. 
    else for (var index=0; index<allPluginsLength; i++) { 
     plugin = MYNAMESPACE.plugins[index]; 
     MYNAMESPACE.getJS.get(plugin + '.js', function() { 
       // This callback is executed when the js file is loaded 
       if (++loadedCount == allPluginsLength) { 
        callback(); 
       } 
     }); 
    } 
}

此外，变化您getJS.get方法。目前，callback总是在状态改变时执行，这是不可取的。为了防止执行两次回调，下面可以使用：

script.onload = function() { 
     callback && callback(); 
     callback = false; 
    }; 
    // onreadystatechange instead of onreadystate, btw. 
    script.onreadystatechange = function() { 
     if (this.readyState == 'complete') { 
      callback && callback(); 
      callback = false; 
     } 
    };

callback && callback()被使用，以确保一个回调存在。如果有，它会被调用。

调用回调后立即将其删除（callback = null）。
这是必要的，因为onload和onreadystatechange事件可以在脚本加载时触发。没有我建议的代码，回调将被多次调用一个脚本。

回答：

一些像这样的变化应该工作：

MYNAMESPACE.init = function (callback) { 
    var remaining = MYNAMESPACE.plugins.length; 
    for (index in MYNAMESPACE.plugins) { 
     plugin = MYNAMESPACE.plugins[index]; 
     MYNAMESPACE.getJS.get(plugin + '.js', function() 
     { 
       // This callback is executed when the js file is loaded 
       remaining = remaining - 1; 
       if (remaining === 0) 
       { 
        callback(); 
       } 
     }); 
    } 
}