Автозагрузчик JavaScript? - PullRequest
Новая
       2

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

10 голосов
/ 22 июня 2011

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

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

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

Спасибо за потраченное время.

Ответы [ 9 ]

3 голосов
/ 22 июня 2011

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

3 голосов
/ 22 июня 2011

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

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

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

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

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

2 голосов
/ 26 июля 2011

Вы можете попробовать этот новый плагин 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);
      }
    }
);
1 голос
/ 29 июля 2011

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

1 голос
/ 22 июня 2011

Звучит так, будто вы хотите загрузчик скриптов.

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

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

1 голос
/ 22 июня 2011

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

0 голосов
/ 22 июня 2011

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

<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 голосов
/ 22 июня 2011

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

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 голосов
/ 22 июня 2011

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

...