Загрузка js файлов и других зависимых js файлов асинхронно

Я ищу чистый способ асинхронной загрузки следующих типов файлов javascript: "core" js файл (хм, пусть просто назову его, о, я не знаю, "jquery!" haha), x количество js файлов, зависящих от загружаемого js файла ядра, и количество других несвязанных js файлов. У меня есть пара идей о том, как это сделать, но не уверен, что лучший способ. Я хотел бы избежать загрузки скриптов в тело документа.

Итак, например, я хочу, чтобы следующие 4 файла javascript загружались асинхронно, соответственно называемые:


/js/my-contact-page-js-functions.js // unrelated/independent script
/js/jquery-1.3.2.min.js // the "core" script
/js/jquery.color.min.js // dependent on jquery being loaded
http://thirdparty.com/js/third-party-tracking-script.js // another unrelated/independent script

Но это не сработает, потому что не гарантировано, что jQuery загружается перед плагином цвета...


(function() {
    var a=[
      '/js/my-contact-page-functions.js',
      '/js/jquery-1.4.2.min.js',
      '/js/jquery.color.js',
      'http://cdn.thirdparty.com/third-party-tracking-script.js',
    ],
    d=document,
    h=d.getElementsByTagName('head')[0],
    s,
    i,
    l=a.length;
    for(i=0;i<l;i++){
        s=d.createElement('script');
        s.type='text/javascript';
        s.async=true;
        s.src=a[i];
        h.appendChild(s);
    }
})();

Можно ли загружать jquery и плагин цвета асинхронно? (Так как плагин цвета требует, чтобы сначала загружался jQuery.)

Первый метод, который я рассматривал, - это просто комбинировать цветовой плагин script с источником jQuery в один файл.

Тогда еще одна идея, которую я использовал, это загрузить плагин цвета следующим образом:


$(window).ready(function() {
    $.getScript("/js/jquery.color.js");
});

У кого-нибудь есть мысли о том, как вы это сделаете? Спасибо!

Ответы

Ответ 1

LabJS и RequireJS - два популярный выбор прямо сейчас. Они оба работают с jQuery, но используют несколько разные подходы, поэтому вы должны посмотреть на оба.

Ответ 2

LABjs специально для этой проблемы.

<script src="lab.js"></script>
<script>
  $LAB
    .script("jquery.js")
    .wait()
    .script("jquery.color.js")
    .script("jquery.otherplugin.js")
    .script("mylib.js")
    .wait()
    .script("unrelated1.js")
    .script("unrelated2.js");
</script>

Вы также можете поместить несвязанные скрипты в свою цепочку $LAB, если им действительно не нужно ждать jQuery и других скриптов.

Ответ 4

Вы не сможете достичь полностью асинхронной нагрузки по той причине, о которой вы говорите; зависимость.

Для моего 10p я буду следовать маршруту $.getScript(). Это в основном просто обертка для $.ajax(), поэтому загрузка ваших скриптов таким образом даст вам асинхронную загрузку, которую вы после.

Ответ 5

Существует общий плагин jquery, который загружает css и JS файлы asynch и synch см. http://code.google.com/p/rloader/