Извиняюсь за заголовок приманки, потому что это не статья против jQuery. То же самое можно сделать для любой библиотеки JavaScript, включая вашу собственную . Тем не менее, jQuery является любимым выбором для многих разработчиков, и некоторые добавят его перед началом работы с JavaScript.
JQuery это абстракция
Если вы думаете, что веб-разработка сейчас трудна, попробуйте разработать код JavaScript в браузере пять или десять лет назад. Типичные проблемы:
- DOM навигации и манипуляции отличаются. Например, Firefox (правильно) включает пробелы в DOM, а IE6 — нет. Следовательно, вы не можете
node.firstChildна то, чтоnode.firstChildто же самое. - Ajax изначально поддерживался в большинстве браузеров, но в IE был элемент управления ActiveX (хотя Microsoft изобрела XMLHttpRequest).
- В IE была другая модель событий, но даже в других браузерах были свои несоответствия.
- Поддержка CSS2.1 очень разнообразна.
- Анимация может быть затруднена, особенно при работе с различиями блочной модели, элементами управления формой и фреймами (IE6 разместил блоки выбора и фреймы над всем остальным на странице).
- Инструменты разработчика были зачаточными. До Firebug консоль ошибок Firefox и неуклюжая модальная ошибка IE были единственными встроенными инструментами браузера.
Разработчики должны были написать функции абстракции, чтобы обойти эти проблемы. jQuery, Prototype и MooTools произошли из изначального хаоса; библиотеки сглаживали трещины и предоставляли полезные недостающие функции, такие как выбор DOM из селекторов CSS.
Важно помнить, что jQuery и его альтернативы написаны на JavaScript, чтобы облегчить написание JavaScript. Они не языки сами по себе .
Идя голым
В 2013 году пять лучших браузеров стали ближе, чем когда-либо. Вендоры приняли стандарты, и, хотя в некоторых браузерах могут отсутствовать определенные API-интерфейсы HTML5, основные принципы JavaScript, касающиеся обхода DOM, манипулирования, обработки событий, взаимодействия с сервером и CSS-эффектов, хорошо реализованы и задокументированы. Если что-то работает в IE10 или Firefox 23, вы можете (почти) гарантировать, что все будет хорошо в Chrome 27 и Opera 12.
Так зачем использовать библиотеку, когда проблемы, которые она решает, больше не существуют? Голый JavaScript всегда будет быстрее, чем вызов библиотеки, которая абстрагирует собственный вызов. В некоторых случаях голые альтернативы также более полезны. Например:
var i = $(".myclass");
использует jQuery, чтобы найти все элементы на странице, которым присвоен класс «myclass» в момент запуска. Тем не мение:
var i = document.querySelectorAll(".myclass");
всегда будет быстрее. Кроме того, если вы использовали getElementsByClassname , возвращаемое значение является живой коллекцией. Другими словами, коллекция узлов DOM, представленных в i будет волшебным образом изменяться, когда элементы с классом «myclass» добавляются или удаляются со страницы. Версия jQuery должна запускаться повторно для достижения того же результата.
Основное преимущество версии jQuery заключается в том, что она будет работать в IE6 и 7 (при условии, что вы используете jQuery 1.x). Если вы не разрабатываете для этих браузеров или перешли на jQuery 2.x, основным преимуществом является более простой синтаксис — но помните, что вы загружаете и анализируете 30 КБ сжатого сценария, чтобы предоставить эту услугу.
Разорвать цепь зависимости
Я использую jQuery и мои собственные небольшие библиотеки в течение многих лет. Почему? В основном привычка .
В качестве подтверждения концепции я решил переписать код JavaScript на простом сайте, который имел некоторые базовые манипуляции с DOM, проверку формы и эффекты, реализованные с использованием небольшой библиотеки. Поддержка IE6 и 7 не была важной, но IE8 должен был работать, что означало, что я не мог полагаться на проверку формы HTML5, такую как required атрибут. Я все еще абстрагировал некоторые функции браузера, но в основном для краткости, например
function $I(id) { return document.getElementById(id); }
Результат: файл JavaScript размером 15 КБ (объединенный и уменьшенный) был уменьшен до 3 КБ с использованием необработанного кода JavaScript. Экономия 80%.
Следует признать, что это не доказательство того, что вы добьетесь такого результата в других проектах, и экономия в 12 КБ едва ли будет заметна. Тем не менее, это показало, что мне не нужны были все функции, предлагаемые минимальной библиотекой, которую я использовал. Вы, конечно, не будете использовать всю функциональность, предлагаемую jQuery, даже после удаления ненужных модулей. Хуже того, разработчики часто используют несколько библиотек, потому что им нужны определенные функции и / или плагины.
Никогда не говори никогда
Я не говорю, что вы никогда не должны использовать jQuery. Не стоит недооценивать огромные усилия по развитию и помощь, которые предоставляет библиотека. Какой-то уровень родной абстракции браузера всегда требуется независимо от того, как вы подходите к коду. Рассмотрим Ajax — вы не захотите переписывать вызовы API XMLHttpRequest для каждого взаимодействия с сервером. Большому клиентскому приложению потребуется набор общих компонентов, и jQuery или другая библиотека могут подойти.
Тем не менее, если вы не поддерживаете старые IE и хотите предоставить самый быстрый, удобный и совместимый интерфейс, внимательно посмотрите на проблему, которую вы пытаетесь решить. Например, если вы пишете утилиту для обработки файлов cookie, нет смысла делать этот плагин jQuery или связывать его с другой библиотекой. Тем не менее, вы найдете обработчики файлов cookie в репозиториях плагинов, хотя проще и эффективнее создать отдельный модуль, который работает где угодно, независимо от другого кода.
JQuery — это утешительное одеяло, но иногда полезно выйти голым в мир JavaScript. Вы будете наслаждаться свободой и узнаете намного больше о том, как на самом деле работают браузеры.
Скоро: голые эквиваленты для методов jQuery …