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

发布于 2024-12-23 10:00:17 字数 915 浏览 2 评论 0原文

我想加载一系列特定于页面的外部 .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 文件中检查并触发...

这是我想要的想法,我知道它不是正确的代码,所以请控制评论!它是一个概念构造。

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

是的,我读了这个这个;接近,但不完全是。

我的问题是:

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

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

谢谢。

写!

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");
?>

the header.php file loaded the files like so:

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

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.

questions i have are:

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

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

thanks.

WR!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

拿命拼未来 2024-12-30 10:00:17

如何创建数组取决于您。您可以使用数组文字定义一个数组,如下所示:

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-dependency-in-mootools_1389.html

您还应该阅读有关 Require.js / AMD 从依赖性角度使事情更具弹性。

玩得开心。

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(",");

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

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.

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

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.

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

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

have fun.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文