Управление плагинами jQuery
Часто при работе с jQuery возникает необходимость включения нескольких плагинов. Это может быстро стать грязной работой, особенно когда некоторым плагинам нужны дополнительные компоненты (изображения и файлы CSS).
Каковы некоторые из "рекомендуемых" способов:
- a. Управляйте необходимыми файлами/компонентами (
.js
, .css
и изображениями) таким образом, который легко поддерживать, и
- b.. Обновляйте эти плагиновые пакеты до последних версий.
Я не обязательно ищу инструмент для этого (хотя тот, который мог бы выполнить это управление, был бы полезен, я полагаю), но скорее способ мышления.
Ответы
Ответ 1
Обновление: в наши дни Bower, Component и Browserify, которые автоматически заботятся обо всех следующих.
Я удивлен, что никто не покрыл то, что я делаю. Итак, вот как я управляю сценариями и ресурсами.
У меня есть каждый проект, над которым я работаю с настройкой SVN
. Почти все сценарии, которые я включаю, имеют зеркало SVN (в настоящее время github имеет svn), это означает, что я могу затем использовать внешние SVN и извлекать любую ветвь или версию или что-то, что я хочу из этого проекта, непосредственно в папку проектов scripts
. Поскольку мы используем SVN, легко отслеживать, управлять и обновлять эти сценарии.
Если проект не находится в SVN, я просто добавляю его в общий проект SVN, который я сделал, так что, например, Project A и Project B используют jquery-project-not-in-svn
, поэтому мы вставляем jquery-project-not-in-svn
в наш общий проект SVN, а затем использовать внешние SVN для проектов A и B для ссылки на него - как объяснялось ранее.
Теперь это охватывает управление, выборку и обновление.
Вот как я описываю включения и запросы script.
Поскольку у каждого проекта теперь есть собственный каталог скриптов, который содержит все необходимые ему сценарии (которые управляются внешними внешними файлами SVN), теперь нам нужно беспокоиться о их минимизации, чтобы уменьшить нагрузку на наш сервер. Каждый проект имеет Makefile
в нем root, который содержит команду update
. Эта команда выполнит следующее:
- Выполните обновление SVN (это будет соответствующим образом обновлять все внешние SVN файлы)
- Как только это будет сделано, он упакует и минимизирует все файлы js в
scripts/all.js
и scripts/all.min.js
Я не могу поделиться точным Makefile
, но я могу поделиться тем, который является общедоступным, который обрабатывает упаковку/слияние и минимизацию CSS и Javascript. Ссылка здесь:
http://github.com/balupton/jquery-sparkle/blob/9921fcbf1cbeab7a4f2f875a91cb8548f3f65721/Makefile
Сделав это, мы достигли:
- Управление внешними ресурсами script по нескольким проектам
- Автоматическое обновление ресурсов script
- Упаковка всех используемых ресурсов script проекта в один файл
- Минимизировать этот файл, чтобы выполнить только один запрос JS и один запрос CSS.
Итак, удачи, не стесняйтесь оставлять комментарии, если вы хотите узнать больше.
Ответ 2
Я бы рекомендовал не обновлять их, если у вас нет проблемы с версией, которую вы имеете, или вы хотели бы использовать новую функцию, доступную в обновленном плагине. Как говорится, если он не сломался, не исправляйте его.
Ответ 3
Мой собственный "рекомендуемый" способ - сохранить все мои файлы JavaScript в одной папке include, все файлы CSS в другом и все изображения в третьем каталоге. Я пишу функции быстрого доступа для своих проектов, которые затем могу использовать как <?PHP скриптlink( '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, с которыми я столкнулся, которые требуют изображений, позволяют либо указать конфигурационную переменную в самом script, либо в коде, используемом для вызова плагина. Таблицы стилей довольно легко включаются, не опускаясь с помощью script.
До сих пор этот метод помогал мне в здравом уме, поэтому я думаю, что он работает довольно хорошо. Я не вырываю свои волосы, где я прикрепляю специальный плагин; Я просто включаю его с функцией. (Система также поддерживает подкаталоги каталога include, поэтому, например, <?PHP скриптlink( '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
и т.д.)
Ответ 4
CDN отлично, но не для отладки. Иногда отладка действительно требует локального доступа
к скриптам и CDN бесполезны до тех пор, пока в производственном режиме. По этой причине мне все еще нравится
чтобы сохранить как отладочные, так и уменьшенные версии, а затем сравнить результаты и контрольное время отклика, пока мы не перейдем к производству.
Ответ 5
Все мои плагины 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.
Да, в конечном итоге вы получите еще несколько файлов в своем репо, но это означает:
- вы можете легко обновлять плагины, просто обновляя свои пути.
- вы можете отлаживать проблемы с плагинами, потому что вы можете видеть, как устаревшие вы
- вы можете вернуться к более ранней версии, если все сломается
Ответ 6
Вы можете использовать Google CDN (сеть доставки контента) для более популярных плагинов. 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.x.x). К сожалению, не все плагины доступны, но многие из них являются основными.