Управление плагинами 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). К сожалению, не все плагины доступны, но многие из них являются основными.