Question

我想加载一组特定于页面的外部.js文件。在过去，我通过PHP在每个页面的顶部做到了，就像这样：

<?php
  $jsFiles = array("file01.js", "file02.js", ...);
  include("header.php");
?>

header.php文件加载了如下文件：

foreach ($jsFiles as $file) {
  echo "<script type='text/javascript' src='_js/$file'></script> \n";
}

但现在我需要在JS中完成所有操作，因为我必须在header.php文件中检查并触发domready之后加载这些文件...

这是我想要的想法，我知道这不是正确的代码，所以请注意评论！它是一个概念性构造。

for (file in jsFiles) {
  console.log('loading ' + file);
  Asset.javascript(file);
};

，是的，我读了this和this;关闭，但不完全。

我有的问题是：

1）如何基于每页创建数组

2）如何使用Asset类

正确加载该数组

感谢。

WR！

Answer 1

如何创建阵列取决于您。您可以使用如下所示的数组文字定义数组：

var filesToLoad = ["foo.js", "bar.js"];
// or even from a flat string...
var files = "foo.js,bar.js",
    filesToLoad = foo.split(",");

您还可以根据识别您所在页面的内容设置全局js结构，例如：

var pageAssets = {};
pageAssets["*"] = ["common.js"];
pageAssets["home"] = ["foo.js","bar.js"];
pageAssets["about"] = ["foo.js","bar.js","about.js"];

// in domready determine what to load...
var id = document.id("body").get("id");

// see down for explanation...
Asset.javascripts(pageAssets[id], {
    onComplete: function() {
        alert("all js loaded");
    }
});

如果加载顺序无关紧要，您可以使用简单Asset.javascript，如下所述：

filesToLoad.each(function(file) {
    new Asset.javascript(file);
});

所有这一切的缺点是这是异步延迟加载。这意味着如果你在下面运行一行，根据你认为你加载的东西实例化某些东西，除非你在带有固定缓存的局域网上，否则它可能会失败。

我已经扩展了Asset.js来支持这个：

Asset.javascripts = function(sources, options) {
    // load an array of js dependencies and fire events as it walks through
    options = Object.merge({
        onComplete: Function.from,
        onProgress: Function.from
    }, options);
    var counter = 0, todo = sources.length;

    var loadNext = function() {
        if (sources[0])
            source = sources[0];

        Asset.javascript(source, {
            onload: function() {
                counter++;
                options.onProgress.call(this, counter, source);
                sources.erase(source);

                if (counter == todo)
                    options.onComplete.call(this, counter);
                else
                    loadNext();
            }
        });
    };

    loadNext();
};

您只需将数组作为sources参数传递，并可以设置onComplete和onProgress事件。这也确保了数组中的FIFO，所以如果你的依赖顺序很重要，那就没关系了。

我写的/ orig博客文章的例子在这里：http://fragged.org/lazyloading-multiple-sequential-javascript-dependencies-in-mootools_1389.html

你还应该阅读有关Require.js / AMD的内容，以便从依赖的角度提高工作效率。

玩得开心。

mootools：帮助加载多页，每页，Asset.javascript文件

1 个答案: