Руководящие Плагины jQuery
Часто, при работе с jQuery, потребность возникает для включения нескольких плагинов. Это может быстро стать грязной работой, особенно когда некоторые плагины требуют дополнительных компонентов (изображения и файлы CSS).
Что является некоторыми "рекомендуемыми" путями к:
- a. Управляйте необходимыми файлами/компонентами (
.js,.cssи изображения) способом, который легко поддержать, и; - b. Держите эти сменные блоки в курсе к последним версиям
Я не обязательно ищу инструмент, чтобы сделать это (хотя тот, который мог выполнить это управление, будет полезен, я предполагаю), но больше образа мыслей.
6 ответов
Обновление: в наши дни есть Bower , Component и Browserify , которые автоматически позаботятся обо всем нижеследующем. .
Я удивлен, что еще никто не рассказал о том, чем я занимаюсь. Итак, вот как я управляю скриптами и ресурсами.
У меня есть каждый проект, над которым я работаю, с SVN . Почти все скрипты, которые я включаю, имеют зеркало SVN (в настоящее время в github есть svn), это означает, что я могу затем использовать внешние элементы SVN и извлекать любую ветку, версию или все, что я хочу от этого проекта, прямо в скрипты проектов папка. Поскольку мы используем SVN, эти скрипты легко отслеживать, управлять и обновлять.
Если проекта нет в SVN, я просто добавляю его в общий проект SVN, который я сделал, так, например, Project A и Project 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.
Итак, удачи, не стесняйтесь оставлять комментарии, если хотите узнать больше.
Я бы рекомендовал не обновлять их, если только у вас нет проблем с имеющейся версией или вы хотите использовать новую функцию, доступную в обновленном плагине. Как говорится, если ничего не сломалось, не чините.
Все мои плагины 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 Я могу без особых проблем поместить его в новую папку, я даже могу использовать определенную версию плагина в разных частях сайта, если это необходимо. Когда сайт I большой и вы используете несколько разных плагинов, полезно быстро увидеть номера версий, не копаясь в исходных комментариях в файле plugin.js.
Если плагину требуется CSS, я возьму базовые стили из CSS плагина и свяжу их с моей основной таблицей стилей, запрос дополнительных файлов CSS стоит дорого и в 9 случаях из 10 он все равно будет настроен. Точно так же с изображениями, если я выполняю какие-либо настройки изображения, я объединю их в свой спрайт основного изображения, в противном случае я просто буду ссылаться на изображения в этом каталоге plugin.1.4.1.
Да, в вашем репозитории остается еще несколько файлов, но это означает:
- вы можете легко обновить плагины, просто обновив свои пути;
- вы можете легче отлаживать проблемы с плагинами, потому что вы видите, как они устарели вы
- , вы можете вернуться к более ранней версии, если все сломается
Мой личный «рекомендуемый» способ - хранить все мои файлы JavaScript в одной включаемой папке, все файлы CSS в другой, а все изображения в третьем каталоге. Я пишу функции быстрого доступа для своих проектов, которые затем могу использовать, например или . Каждая функция быстрого доступа принимает имя файла (только) в качестве аргумента и выводит полный тег HTML для этого типа ресурса, то есть (по порядку) или
Большинство плагинов jQuery, с которыми я сталкивался требующие изображения, позволяют указать конфигурационную переменную в самом скрипте или в коде, используемом для вызова плагина. Таблицы стилей довольно легко включить, не возясь со сценарием.
До сих пор этот метод помогал мне оставаться в здравом уме, поэтому я думаю, что он работает довольно хорошо. Я не рву волосы там, где я воткнул конкретный плагин; Я просто включаю его с функцией. (Система также поддерживает подкаталоги каталога include, например, равно .)
YMMV, конечно, но единственная проблема, с которой я столкнулся, - это обновления, когда авторы плагинов начинают распространять jquery .plugin.pack.js вместо jquery.plugin.min.js или наоборот, потому что мне действительно нужно не забыть изменить имена файлов, которые я ищу.
(Поскольку я пропустил реализацию этих простых функций, возможно, ваша версия будет проверять различные варианты указанного имени файла. Если аргумент scriptlink () равен jquery.plugin , функция может проверять файловую систему, чтобы увидеть, существует ли jquery.plugin.pack.js , и если нет, искать jquery.plugin.min.js , и если не ищите jquery.plugin.js и т. д.)
Вы можете использовать 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). К сожалению, не все плагины доступны, но есть многие из основных.
CDN отлично подходят, но не для отладки. Иногда отладка действительно требует локального доступа скрипты и CDN бесполезны до тех пор, пока не перейдут в рабочий режим. По этой причине мне до сих пор нравится , чтобы сохранить как отладочные, так и минимизированные версии, а затем сравнить результаты и время отклика теста, пока мы не перейдем к производству.