mootools：帮助加载多个、每页的 Asset.javascript 文件

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 中完成这一切，因为我必须在 domready 之后加载这些文件，这些文件在 header.php 文件中检查并触发...

这是我想要的想法，我知道这不是正确的代码，所以请控制 cmets！这是一个概念结构。

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

而且，是的，我读过this 和this；接近，但不完全。

我的问题是：

1) 如何按页面创建数组

2) 如何使用 Asset 类正确加载该数组

谢谢。

写！

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，所以如果你的依赖顺序很重要，这会很好。

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

您还应该阅读有关 Require.js / AMD 的信息，以便从依赖关系的角度使事情更具弹性。

玩得开心。