Question

原始HTML页面只是按顺序加载每个js文件。在头部，我们加载了cart.js文件，在正文中，我们有几个依赖于cart.js的脚本标记。

现在我们需要在$（window）.load（）中加载cart.js.代码如下：

function loadJsAsync(sourceUrl, id) {
    var js, fjs = document.getElementsByTagName('script')[0];
    if (document.getElementById(id)) { return; }
    js = document.createElement('script'); js.type = 'text/javascript'; js.ansyc = true;
    js.id = id;
    js.src = sourceUrl;
    fjs.parentNode.insertBefore(js, fjs);
}
$(window).load(function () {
  loadJsAsync("<%=ScriptSourceUrl %>", 'cartjs');
});

在我添加上面的代码后，在整个页面加载后加载cart.js。但是，依赖于它的body脚本中的那些函数会产生错误。

在正文脚本中，我使用了

$('#cartjs').on('load', function(){})

包装那些依赖函数但它不起作用，因为#cartjs是动态添加的。然后我尝试了类似

的东西

$('body').load('#cartjs', function(){})

包装那些依赖函数，它会导致永不停止的无限循环。此外，它只检测#cart元素的负载，而不是实际cart.js文件的负载。

我也看到有人提到$ .getScript（），但是我无法为每个依赖函数调用它，因为它会多次加载cart.js，我希望只加载cart.js一次，并且执行多个依赖于它的函数。

我目前的解决方案是创建一个名为callbacks的数组，并将这些相关函数添加到此数组中。然后添加一个

$('#cartjs').load(function(){})

在loadJsAsync（）中，并在load（）的回调中迭代回调以执行所有相关函数。它看起来不是一个像样的解决方案。

我想知道是否有任何解决方案可以检测cart.js文件的负载，然后将这些依赖函数添加为其回调，以便在加载cart.js后执行它们。

提前致谢。

Answer 1

我建议你使用RequireJS，它完全符合你的需要，我相信，看看[这里]（http://requirejs.org/docs/start.html）的简单介绍。

简单的代码片段如下：

requirejs(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

在所需的js加载后，将解压缩包中的所有函数。

加载脚本文件后的多个回调函数

1 个答案: