Я ищу очевидный способ для асинхронной загрузки следующих типов файлов JavaScript: "ядро" js файл (хм, позвольте нам просто назвать его, о, я не знаю, "jQuery!" ха-ха), x количество js файлов, которые зависят от "ядра" js файл, загружаемый, и y количество других несвязанных 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 был загружен сначала.)
Первый метод, который я рассматривал, должен просто объединить цветной сменный сценарий с источником jQuery в один файл.
Затем другая идея, которую я имел, загружала цветной плагин как так:
$(window).ready(function() {
$.getScript("/js/jquery.color.js");
});
У кого-либо есть какие-либо мысли о том, как Вы пошли бы об этом?Спасибо!
LabJS и RequireJS - два популярных варианта на данный момент. Они оба работают с jQuery, но используют немного разные подходы, поэтому вам стоит обратить внимание на оба.
Вы можете использовать YUI Loader для регистрации собственных модулей и зависимостей и последующей их загрузки.
Вы получаете полные крючки для успеха, неудачи и даже прогресса, так что вы можете подключить любое асинхронное действие.
Вы не сможете добиться полностью асинхронной загрузки по той самой причине, которую вы упомянули; зависимость.
На мои 10 пенсов, я бы последовал маршруту $.getScript(). По сути, это просто обертка для $.ajax(), поэтому загрузка скриптов таким образом обеспечит вам асинхронную загрузку, которую вы ищете.
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 и других ваших сценариев.