mootools: помогает загружать несколько файлов Asset.javascript для каждой страницы - PullRequest
Новая
       23

mootools: помогает загружать несколько файлов Asset.javascript для каждой страницы

0 голосов
/ 29 декабря 2011

Я хочу загрузить массив внешних файлов .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) как правильно загрузить этот массивиспользуя класс активов

спасибо.

WR!

1 Ответ

3 голосов
/ 29 декабря 2011

как вы создаете массивы, зависит от вас. Вы можете определить массив с литералом массива следующим образом: 

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, чтобы сделать вещи более устойчивыми с точки зрения зависимости.

веселись.

...