Автозагрузчик JavaScript?
Есть ли решение там, где я могу иметь JavaScript/jQuery зависимые файлы при загрузке по мере необходимости? Например, рассмотрим этот сценарий:
- У меня есть автозагрузчик script, прослушивающий, когда необходимо загрузить конкретный script.
- Вызывается плагин jQuery
dialog()
.
- Автозагрузчику предлагается прослушать, когда этот плагин вызывается, и загружает пользовательский интерфейс jQuery.
- Если в будущем вызывается больше диалогов, требуемый script не будет загружен.
Это слишком много усилий для простого ограничения пропускной способности? Должен ли я включать все основные файлы в один суперпакет и делать с ним?
Спасибо за ваше время.
Ответы
Ответ 1
Да, вы должны включить все сценарии в один файл. Или, по крайней мере, большинство из них группируются следующим образом: jquery.js, global.js(где часто - на более чем одной, двух страницах - используются сценарии должны быть) и page_specyfic.js.
Представьте себе, что вызывается dialog()
, и пользователь должен ждать .js для загрузки и плагинов для инициализации.
Экономия в полосе пропускания (если таковая имеется) не стоила бы вредить опыту пользователей.
Ответ 2
Существует множество примеров по запросу script загрузки. Например, remy sharp имеет в своем блоге пример кода который можно использовать как есть или превратиться в плагин jQuery. К сожалению, он может не работать во всех браузерах.
Существует также jQuery Lazy Plugin Loader, который загружает плагины jQuery по требованию, а не вверх. Чтобы использовать его, вам нужно настроить ленивую загрузку для каждой части пользовательского интерфейса jQuery, которую вы используете, следующим образом (имя будет именем функции для каждой используемой вами части):
$.lazy([{
src: 'jquery-ui-1.8.14.custom.min.js',
name: 'dialog'
}]);
Вы также можете использовать методы в этом вопросе о загрузке самого jQuery по запросу. Например, вы можете динамически создавать тег script в момент загрузки JQuery UI.
Наконец, поскольку вы говорите о пользовательском интерфейсе jQuery, подумайте о том, чтобы получить его из Google CDN, который в любом случае будет кэшироваться в браузере пользователя.
Ответ 3
Вы можете попробовать этот новый плагин jquery. Работает как yeapnope.js, но имеет смысл.
http://plugins.jquery.com/plugin-tags/autoloader
$(document).autoLoader(
{
test: $.ui,
loadScript: "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery- ui.min.js",
complete: function(){
console.log($.ui);
}
}
);
Ответ 4
Я бы не стал слишком беспокоиться. Файлы кэшируются. Когда одна страница вашего сайта загружает пользовательский интерфейс jquery (или любой другой файл include, такой как CSS), в следующий раз, когда он понадобится, он будет находиться в кеше пользовательского браузера, и его нельзя будет снова загружать за несколько дней/недель
Ответ 5
Похоже, вы хотите загрузчика script.
Обычно вы не можете выполнять синхронную загрузку скриптов в браузерах, поэтому script загрузчики обязательно асинхронны. То, что вы запрашиваете, не совсем возможно, так как script необходимо загрузить, вызвать обратный вызов и продолжить. Вы не хотели бы называть какой-то плагин и не знать, выполняется ли он синхронно или нет, что приводит вас в мир проблем.
Я рекомендую вам посмотреть DeferJS, загрузчик script для jQuery:
https://github.com/BorisMoore/jsdefer
Ответ 6
Из ваших комментариев часть вашего желания, похоже, должна содержать ваш код. Я бы рекомендовал RequireJs. Это позволяет вам разбить код на четко разделенные модули с явными зависимостями. Затем, когда вы хотите перейти на производство, есть инструмент сборки, который объединит их все вместе в (запросом/пропускной способностью) 2-3 файла, которые вы хотите обслуживать.
Ответ 7
Да, я тоже подумал о том, чтобы реализовать что-то подобное. Я не уверен, будет ли это целесообразно или нет, но для этого достаточно нескольких библиотек, например ensure
Ответ 8
вы могли бы попробовать что-то подобное, но это было бы болью. в основном вы проверяете тип пойманной ошибки и сообщение, если диалог (функция, которую вы пытаетесь вызвать не существует) загружает функцию и повторите вызов метода. Как я сказал, было бы больно делать это всюду, если бы не было принято какое-то изящное решение.
function loadDialog() {
$('#myDialog').dialog({});
}
try {
loadDialog()
} catch(e) {
if (e && e.type && e.type=='not_defined' && e.message == 'dialog is not defined') {
//load jQuery plugins...
loadDialog();
}
}
Ответ 9
Это последующая запись для комментария выше:
<link rel="stylesheet" href="../system/stylesheets/universal.css" />
<link rel="stylesheet" href="../system/stylesheets/jquery-ui.min.css" />
<link rel="stylesheet" href="../system/stylesheets/uploadify.css" />
<link rel="stylesheet" href="system/stylesheets/style.css" />
<script src="../system/javascripts/swfobject.js"></script>
<script src="../system/javascripts/jquery.min.js"></script>
<script src="../system/javascripts/jquery-ui.min.js"></script>
<script src="../system/javascripts/global.jquery.js"></script>
<script src="../system/javascripts/analog.jquery.js"></script>
<script src="../system/javascripts/funtip.jquery.js"></script>
<script src="../system/javascripts/uploadify.jquery.js"></script>
<script src="system/javascripts/install.jquery.js"></script>
<link rel="stylesheet" href="system/templates/stylesheets/style.css" />
<script>
$(document).ready(function() {
$(':text, :password, textarea').funtip();
});
</script>