File mootools：帮助加载每页多个Asset.javascript文件_File_Mootools_Assets

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

file

File mootools：帮助加载每页多个Asset.javascript文件,file,mootools,assets,File,Mootools,Assets,我想加载一个特定于页面的外部.js文件数组。在过去，我通过PHP在每个页面的顶部执行此操作，如下所示： <?php $jsFiles = array("file01.js", "file02.js", ...); include("header.php"); ?> 但是现在我需要在JS中完成这一切，因为我必须在domready之后加载这些文件，domready在header.php文件中被检查和激发这是我想要的想法，我知道这不是正确的代码，所以请控制评论！这是一个概念性的

我想加载一个特定于页面的外部.js文件数组。在过去，我通过PHP在每个页面的顶部执行此操作，如下所示：

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

但是现在我需要在JS中完成这一切，因为我必须在domready之后加载这些文件，domready在

header.php

文件中被检查和激发

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

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

而且，是的，我读了又读；很接近，但不完全一样

我的问题是：

1）如何在每页的基础上创建数组

2）如何使用资产类正确加载该数组

谢谢

哦

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

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);
});

所有这些的缺点是，这是异步懒散加载。这意味着，如果您在下面运行一行，该行根据您认为加载的内容实例化某些内容，那么它很可能会失败，除非您在一个具有预缓存的lan上

我已扩展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，因此，如果依赖顺序很重要，这将很好

我在博客上写的例子如下：

您还应该阅读有关

Require.js

/AMD的内容，以便从依赖关系的角度使事情更具弹性

玩得开心。