В JavaScript Автозагрузчик?

есть ли решение, где я могу иметь JavaScript / jQuery autoload зависимые файлы, когда это необходимо? Например, рассмотрим следующий сценарий:

  1. у меня есть скрипт автозапуска, слушающий, когда конкретный скрипт должен быть загружен.
  2. из jQuery dialog() плагин называется.
  3. загрузчику говорят слушать, когда этот плагин вызывается, и загружает пользовательский интерфейс jQuery.
  4. если в будущем будут вызваны дополнительные диалоговые окна, скрипт не будет загружен.

это слишком много усилий для простой попытки ограничить пропускную способность? Должен ли я просто включить все основные файлы в один суперпакет и покончить с этим?

Спасибо за ваше время.

10
autoloader javascript jquery jquery-ui

9 ответов

Да, вы должны включить все скрипты в один файл. Или, по крайней мере, большинство из них группировалось так: jquery.js, global.js (вот где часто - на более чем одной, двух страницах - должны быть используемые скрипты) и page_specyfic.js. Представьте себе, что a dialog() вызывается, и пользователь должен ждать .js для загрузки и плагинов для инициализации. Экономия в bandwith (если есть) не будет стоить вреда пользователям expirience.

3

есть много примеров загрузки скриптов по требованию. Например, у Реми Шарпа есть образец кода в своем блоге что вы можете использовать как есть или превратиться в плагин jQuery. К сожалению, это может не работать во всех браузерах.

есть еще jQuery ленивый плагин загрузчик который загружает Плагины jQuery по требованию, а не спереди. Чтобы использовать его, вам нужно будет настроить ленивую загрузку для каждого фрагмента пользовательского интерфейса jQuery, который вы используете следующим образом (имя будет имя функции для каждой части используется):

$.lazy([{
   src: 'jquery-ui-1.8.14.custom.min.js',
   name: 'dialog'
}]);

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

наконец, поскольку вы говорите о jQuery UI, рассмотрите возможность его получения от CDN Google, который, вероятно, кэшируется в браузере пользователя в любом случае.

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);
      }
    }
);
2

Я бы не слишком беспокоиться. Файлы кэшируются. Как только одна страница на вашем сайте загружает пользовательский интерфейс jquery (или любой другой файл, такой как CSS), в следующий раз он будет нужен в кэше браузера пользователя, который никогда не будет загружен снова в течение нескольких дней/недель

1

Похоже, вам нужен загрузчик скриптов.

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

Я рекомендую вам посмотреть на DeferJS, a загрузчик скриптов для jQuery: https://github.com/BorisMoore/jsdefer

1

из ваших комментариев, часть вашего желания, кажется, чтобы структурировать код. Я бы рекомендовал помощью RequireJS. Это позволяет разбить код на четко разделенные модули с явными зависимостями. Затем, когда вы хотите перейти к производству, есть инструмент сборки, который объединит их все вместе в (запрос/сохранение полосы пропускания) 2-3 файлов, которые вы хотите обслуживать.

1

Да, я тоже думал о реализации чего-то подобного. Я не уверен, будет ли это стоить или нет в конце, но есть довольно много библиотек, чтобы сделать это для вас, как обеспечить

0

вы можете попробовать что-то вроде этого, но это будет больно. в основном вы проверяете тип ошибки и сообщение, если диалоговое окно (функция, которую вы пытаетесь вызвать, не существует) загружает функцию и пытается вызвать метод снова. Как я уже сказал, Было бы больно делать это везде, если бы не было придумано какое-то элегантное решение.

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();
    }
}
0

Это последующее сообщение для комментария выше:

<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>
0