jQuery Pugin или CSS3

Question

После того, как вы сделали прыжок, чтобы начать использовать библиотеку jQuery (или другая библиотека JS по вашему выбору) для многих «простых» задач, с которыми вы столкнулись перед дилеммой 3 подходов к разработке:

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

Что касается следующих типов улучшений CSS3, должен ли всегда использовать подход плагинов?

• Закругленные углы
• Вращающиеся вещи
• Простая анимация / переходы
• Прозрачные цвета
• закругленные углы
• Text Shadows Box Shadows
• Несколько фонов

Меня меньше волнует производительность, но больше скорость разработка и длительное обслуживание. Мне также нужно поддерживать IE6 и Mac. Так что я думаю, jQuery / плагины полностью, но если вы знаете что-то лучше, пожалуйста, поделитесь своим опытом.

Если плагинов много, люди объединяют их в одну загрузку?

Спасибо

Mike

---

mkoistinen * Ответ 1041 * побудил меня написать это, но он был слишком большим, чтобы его можно было вписать в комментарий.

Я думаю, что такое решение зависит от потребностей вашего проекта. В большинстве случаев я думаю, что вы абсолютно правы, плагины могут быть слишком убиты. Специально для опытного «инженера внешнего интерфейса» с хорошими навыками работы с HTML, CSS и JavaScript.

В моем случае у нас много разных людей, широкий круг навыков, разные команды / третьи лица / оффшоры, поставка сложного сайта с содержанием и формами.

Плагины jQuery предлагают:

• более низкая кривая обучения для менее способных
• повторное использование в разных частях бизнеса
• важна доступность
• поддержка роликов темы также важна
• у нас есть формы, которые могут использовать большинство виджетов
• поддержка от команды jQuery (и Microsoft, если вы используете .net)

Тем не менее, это не жесткое решение. Я думаю, что мы должны чувствовать наш путь, когда мы набираемся опыта.

Некоторые из нашей команды, такие как jQuery Tools http://flowplayer.org/tools/index.html - выглядит хорошо и занимает меньше места, но я думаю, что мы действительно хотим большую часть дополнительной функциональности в jQuery UI.

Answer 1

Вы должны следовать методологии прогрессивного улучшения.

Добавьте CSS поверх HTML, чтобы css мог делать. например закругленные углы и т. д. затем добавьте jquery сверху только для вещей, которые может сделать jquery. А затем используйте jquery для изменения css3 для улучшения UX.

Это означает, что при выключенном javascript вы по-прежнему получаете классные функции css3.

Другое соображение заключается в том, что вы должны использовать обнаружение функций, а не тестирование браузера, чтобы форкать ваш код для создания кросс-браузерного кода. На alistapart и в Интернете есть несколько статей об обнаружении функций.

Answer 2

• Закругленные углы - используйте CSS.Для Проводника используйте CSS3Pie .

  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  behavior: url(/PIE.htc);
  

• Вращение вещей - используйте CSS.Для Проводника используйте их пользовательский фильтр () CSS.

  -moz-transform: rotate(45deg);  /* FF3.5+ */
  -o-transform: rotate(45deg);  /* Opera 10.5 */
  -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
  transform: rotate(45deg);  /* CSS3 (for when it gets supported) */
  filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
  

• Простая анимация / переходы - Используйте JQuery.(CSS-анимации еще недостаточно широко поддерживаются)

• Прозрачные цвета - используйте CSS.Для Проводника используйте filter ().

  filter: alpha(opacity=90);
  opacity: 0.9;
  

• Закругленные углы - см. Выше;)

• Тени в поле "Текстовые тени" - для Проводника:используйте CSS3Pie по закругленным углам.

• Несколько фонов - и снова CSS;для проводника используйте CSS3Pie .

Итак, в конце все это сообщение: Большинство браузеров, за исключением MS Explorer, поддерживают большую часть того, что вы просили.Для MS Explorer получите CSS3Pie.

Answer 3

Хотя я абсолютно ЛЮБЛЮ jQuery, я не большой поклонник плагинов в целом (хотя некоторые из них потрясающие). Главным образом потому, что они часто являются «одним решением, подходящим для всех» типов, что добавляет большой размер файла к общей загрузке и сложности к коду, который я пишу.

В качестве примера, я недавно посмотрел некоторые библиотеки Drag-and-drop для jQuery и обнаружил, что все они были хорошо сделаны, но были огромными. В некоторых случаях> 300K минимизируется. Я закончил тем, что написал то, что мне было нужно, менее чем в 200 строках (комментариях) JS, которые я просто включил в свою существующую базу кода. Будет ли это работать для всех потребностей перетаскивания? Возможно, нет, но мне не нужно взвешивать клиентов этого клиента с помощью кода, который я не использую.

jQuery важен для меня, потому что он выравнивает игровое поле (несоответствия браузера и т. Д.). Это важно для меня и моих клиентов И ускоряет общее развитие, поэтому его легко обосновать. Некоторые другие плагины просто не всегда оправданы таким же образом.

Answer 4

Никогда не используйте jquery. jquery преобразует document.getElementById ("бла") в $ ("# бла"). и, таким образом, делая его еще одним шагом для анализа запроса и снижает производительность. Двигайтесь дальше .. JQuery устарел. Поскольку все используют его, это не делает вас связанными. Исследуйте дом самостоятельно, и вы найдете его более интересным и знающим.

Используйте чистый CSS везде, где это возможно, или используйте knockoutjs, который является мощным и отделяет данные от пользовательского интерфейса.

Answer 5

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

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