mootools:帮助加载每个页面的Asset.javascript文件 [英] mootools: help loading multiple, per-page, Asset.javascript files

问题描述

我想加载一组页面特定的外部.js文件.过去，我是通过PHP在每页顶部完成的，就像这样:

i want to load an array of page-specific external .js files. in the past, i did it through PHP at the top of each page, like so:

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

header.php文件以如下方式加载文件:

the header.php file loaded the files like so:

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

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

but now i need to do this all in JS because i have to load these files AFTER domready which is checked and fired in the header.php file...

这是我想要的主意，我知道它不正确的代码，因此请注意注释！这是一个概念上的建构.

this is the idea of what i want and i KNOW IT IS NOT CORRECT CODE, so rein in the comments! it is a conceptual construct.

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

是的，我读了此和

and, yup, i read this and this; close, but not quite.

我的问题是:

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

1) how to create the arrays on a per-page basis

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

2) how to load that array properly using the Asset class

谢谢.

WR！

推荐答案

如何创建数组取决于您.您可以使用数组文字来定义数组，如下所示:

how you create the arrays is up to you. you can define an array with an array literal like so:

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

您还可以基于标识您所在页面的内容来设置全局js结构，例如:

you can also setup a global js structure based upon something that identifies what page you are on, eg:

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:

if the order of loading then does not matter, you can use plain Asset.javascript as described:

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

这是异步延迟加载的所有缺点.这意味着，如果您直接在其下面运行一行以根据您认为的加载实例化某些内容，则除非您处在具有预备缓存的局域网上，否则它很可能会失败.

the downside to all that is that this is async lazyloading. meaning that if you run a line immediately underneath that instantiates something based upon what you think you loaded, it will likely fail unless you're on a lan with primed cache.

我已经扩展了Asset.js以支持此功能:

I have extended Asset.js to support this:

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，因此，如果您的依存顺序很重要，就可以了.

you just pass on the array as the sources argument and can set an onComplete and onProgress events. this also ensures FIFO from the array so if your dependency order matters, this will be fine.

我编写的示例/orig博客文章位于此处: http ://fragged.org/lazyloading-multiple-sequential-javascript-dependencies-in-mootools_1389.html

the example i wrote / orig blog post is here: http://fragged.org/lazyloading-multiple-sequential-javascript-dependencies-in-mootools_1389.html

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

you should also read up about Require.js / AMD to make things more resilient from a dependency standpoint.

玩得开心.

这篇关于mootools:帮助加载每个页面的Asset.javascript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！