Управление плагинами jQuery

Question

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

Каковы некоторые из "рекомендуемых" способов:

• a. Управляйте необходимыми файлами / компонентами (.js, .css и изображениями) простым в обслуживании способом; и;
• b. Сохраните эти плагиныпакеты, обновленные до последних версий

Я не обязательно ищу инструмент для этого (хотя тот, который мог бы выполнять это управление, я думаю, был бы полезен), но больше для мышления.

Answer 1

Обновление: в эти дни есть Бауэр , Компонент и Browserify , которые автоматически позаботятся обо всем следующем для нас.

Я удивлен, что никто еще не рассказал о том, что я делаю. Вот как я управляю скриптами и ресурсами.

У меня есть каждый проект, над которым я работаю, с SVN. Почти у всех сценариев, которые я включаю, есть зеркало SVN (в настоящее время у github есть svn), это означает, что я могу затем использовать внешние SVN и извлекать любую ветку или версию или все, что мне нужно, этого проекта непосредственно в папку проектов scripts. Поскольку мы используем SVN, эти сценарии легко отслеживать, управлять и обновлять.

Если проект не в SVN, то я просто добавляю его в общий проект SVN, который я создал, поэтому, например, для проектов A и B, оба используют jquery-project-not-in-svn, поэтому мы вставляем jquery-project-not-in-svn в наш общий проект. Репозиторий SVN, а затем используйте внешние ссылки SVN в проектах A и B для ссылки на него - как описано выше.

Теперь это касается управления, выборки и обновления.

Вот как я освещаю включения и запросы скриптов.

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

• Выполните обновление SVN (это обновит все внешние SVN соответственно)
• Как только это будет сделано, он упакует и сократит все js-файлы до scripts/all.js и scripts/all.min.js

Я не могу поделиться точным Makefile, но могу поделиться общедоступным, который занимается упаковкой / объединением и минимизацией CSS и Javascript. Вот ссылка: http://github.com/balupton/jquery-sparkle/blob/9921fcbf1cbeab7a4f2f875a91cb8548f3f65721/Makefile

Делая эти вещи, мы достигли:

• Управление внешними ресурсами сценариев в нескольких проектах
• Автоматическое обновление соответствующих ресурсов скрипта
• Упаковка всех используемых ресурсов сценария проекта в один файл
• Сокращение этого файла, чтобы выполнялся только один запрос JS и один запрос CSS.

Итак, удачи, не стесняйтесь оставлять комментарии, если хотите узнать больше.

Answer 2

CDN хороши, но не для отладки.Иногда для отладки действительно требуется локальный доступ к сценариям, а CDN бесполезны до тех пор, пока не будут запущены в рабочем режиме.По этой причине мне все еще нравится хранить отладочную и минимизированную версии, а затем сравнивать результаты и время отклика, пока мы не перейдем к производству.

Answer 3

Мой личный «рекомендуемый» способ - хранить все мои файлы JavaScript в одной папке include, все файлы CSS в другой и все изображения в третьем каталоге. Я пишу функции быстрого доступа для своих проектов, которые затем я могу использовать как <?php scriptlink( 'jquery.tooltip' ); ?> или <?php stylelink( 'jquery.thickbox' ); ?>. Каждая функция ярлыка принимает имя файла (только) в качестве аргумента и выводит полный тег HTML для этого типа ресурса, то есть (по порядку) <script type="text/javascript" src="/includes/js/jquery.tooltip.js"></script> или <link rel="stylesheet" href="/includes/css/jquery.thickbox.css" />

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

Пока этот метод держал меня в здравом уме, поэтому я думаю, что он работает довольно хорошо. Я не рву свои волосы там, где застрял тот или иной плагин; Я просто включаю это с функцией. (Система также поддерживает подкаталоги каталога include, например, <?php scriptlink( 'ui/accordion' ); ?> равно <script type="text/javascript" src="/includes/js/ui/accordion.js"></script>.)

YMMV, конечно, но единственная проблема, с которой я столкнулся, связана с обновлениями, когда авторы плагинов начинают распространять версию jquery.plugin.pack.js вместо jquery.plugin.min.js или наоборот, потому что мне действительно нужно помнить об изменении имен файлов искать.

(Поскольку я пропустил реализацию этих простых функций, возможно, ваша версия будет проверять различные варианты заданного имени файла. Если аргумент scriptlink() равен jquery.plugin, функция может проверить файловую систему на посмотрите, существует ли jquery.plugin.pack.js, и если нет, ищите jquery.plugin.min.js, а если нет, найдите jquery.plugin.js и т. д.)

Answer 4

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

Answer 5

Вы можете использовать Google CDN (Content Delivery Network) для более популярных плагинов.Google поддерживает его в актуальном состоянии, вы можете быстро выбирать / переключаться между версиями, а также получаете преимущества кэширования на других сайтах, использующих CDN.

Пример для jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

И, если вы хотите использовать более высокую версию автоматически, измените версию на 1.4 (автоматическое обновление 1.4.x) или даже на 1 (автоматическое обновление 1.xx).К сожалению, не все плагины доступны, но многие из основных.

Answer 6

Все мои плагины jQuery организованы в подпапки, которые включают номер версии, например

• / assets / js / plugin.1.4.1 / plugin.1.4.1.min.js
• / assets / js / plugin.1.4.1 / images / image.gif

Если мне нужно обновить до 1.4.2, я могу без проблем поместить его в новую папку,Я даже могу использовать определенную версию плагина в разных частях сайта, если это необходимо.Когда у меня большой сайт, и вы используете несколько разных плагинов, полезно быстро увидеть номера версий, не копаясь в комментариях источника в файле plugin.js.

Если для плагина требуется CSS, я возьму базовые стили из плагина CSS и свяжу их с моей основной таблицей стилей, запрашивая дополнительные файлы CSS, это дорого, и в любом случае 9 из 10 будут настроены.Аналогично с изображениями, если я делаю какую-либо настройку изображения, я включу их в свой основной спрайт изображений, в противном случае я просто буду ссылаться на изображения в этом каталоге plugin.1.4.1.

Да, вы заканчиваетев вашем репо есть еще несколько файлов, но это означает:

• вы можете легко обновлять плагины, просто обновляя пути
• вы можете легче отлаживать проблемы с плагинами, потому что вы видите, какна сегодняшний день вы
• вы можете вернуться к более ранней версии, если все сломается