Ответ 1
LabJS и RequireJS - два популярный выбор прямо сейчас. Они оба работают с jQuery, но используют несколько разные подходы, поэтому вы должны посмотреть на оба.
Я ищу чистый способ асинхронной загрузки следующих типов файлов 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");
});
У кого-нибудь есть мысли о том, как вы это сделаете? Спасибо!
LabJS и RequireJS - два популярный выбор прямо сейчас. Они оба работают с jQuery, но используют несколько разные подходы, поэтому вы должны посмотреть на оба.
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 и других скриптов.
Вы можете использовать YUI Loader для зарегистрировать свои собственные модули и зависимостей, а затем загрузите их.
Вы получаете полные перехваты для успеха, неудачи и даже прогресса, поэтому вы можете подключить любое асинхронное действие, которое вам нравится.
Вы не сможете достичь полностью асинхронной нагрузки по той причине, о которой вы говорите; зависимость.
Для моего 10p я буду следовать маршруту $.getScript(). Это в основном просто обертка для $.ajax(), поэтому загрузка ваших скриптов таким образом даст вам асинхронную загрузку, которую вы после.
Существует общий плагин jquery, который загружает css и JS файлы asynch и synch см. http://code.google.com/p/rloader/