Автозагрузчик 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>