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

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

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

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

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

Источник

9 ответов

Решение

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

Источник

Существует множество примеров загрузки скриптов по требованию. Например, в своем блоге у remy sharp есть пример кода, который вы можете использовать как есть или превратить в плагин jQuery. К сожалению, это может не работать во всех браузерах.

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

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

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

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

Источник

Вы можете попробовать этот новый плагин 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);
      }
    }
);
Источник

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

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

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

Источник

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

Источник

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

Источник

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

<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>
Источник

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

Источник

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

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();
    }
}
Источник
Другие вопросы по тегам