Фреймворк jquery особенности достоинства и недостатки применения

Обновлено: 03.07.2024

Всем привет, друзья! Сообщество веб-разработчиков в последнее время разрывает дикий баттхерт относительно того, стоит ли использовать jQuery в своей работе. Одни топят за то, что нужно использовать эту библиотеку во всех проектах без исключения, другие не могут понять, что вообще происходит и продолжают делать то, что делали раньше. Третьи, чтобы не отрываться от коллектива, осваивают последний ECMAScript, всячески открещиваются от jQuery и бомбят при любом упоминании этой библиотеки. Сегодня мы разберемся в вопросе более подробно, без крайностей и максимализма.

Полезные ресурсы урока:

В конце выпуска мы познакомимся с коллекцией сниппетов You Don't Need jQuery, которую я подготовил для редакторов Visual Studio Code и Sublime Text. Эта коллекция послужит отличным помощником, если вы вдруг проснулись и поняли, что жизнь слишком проста и нужно писать код исключительно на ванильном JS. Кроме того, в грядущем большом курсе Джедай верстки 8, в качестве академического примера, мы будем верстать без использования jQuery, на чистом JS и представленная коллекция будет очень кстати.

jQuery – это самая популярная в мире JS библиотека, позволяющая значительно упростить процесс взаимодействия с элементами DOM, а также предоставляющая удобный API для работы с событиями и AJAX.

Здесь я не буду защищать ни одну из сторон, так как это бессмысленно. Это не конкуренция и сокращение «vs» (versus) ставить между jQuery и нативным JS просто некорректно. Когда надо, я использую jQuery, когда не надо, не использую. jQuery — это инструмент, созданный для того, чтобы максимально сократить время разработки. Здесь я даже не говорю о краткости записи, ведь нативный JS не стоит на месте, стандарты ES развиваются и нативный код становится короче. Дело не в этом.

Главное преимущество jQuery – это тысячи готовых плагинов и расширений, которые можно подключить к проекту и настроить всего за несколько минут. Второе важнейшее преимущество — это проверенная, оттестированная, железобетонная кроссбраузерность и поддержка всего, что может отображать веб-страницы с поддержкой JavaScript.

Но, давайте по-порядку рассмотрим все аргументы «за» и «против» использования jQuery, а затем перейдем к примерам проектов, в которых целесообразно использовать эту библиотеку.

Аргументы в пользу jQuery

Кроссбраузерность. jQuery учитывает особенности работы со всеми возможными браузерами (с поддержкой JS, конечно-же), имеет все необходимые фолбеки и запасные варианты реализации. Ваш код будет работать везде. В противовес, НЕ использование jQuery потребует от вас больше временных затрат и усилий для написания и тестирования вашего кода.
Вариативность. Функции jQuery включают огромное количество вариантов и возможностей использования, что делает их максимально универсальными и лаконичными. Использование ванильного JS предполагает написание намного большего количества кода, условий и проверок для реализации аналогичного функционала, даже если речь идет о какой-то специфической задаче, где не требуется особая универсальность.
Расширения. Тысячи готовых плагинов, расширений, примеров, сниппетов готовы к использованию. Вам не придется писать свой велосипед для решения типовой задачи. Можно сказать, что это самое важное преимущество jQuery. Писать плагины для jQuery также легко, как писать любой другой код с использованием этой библиотеки. Именно поэтому jQuery так нравится многим веб-разработчикам. Сейчас можно найти абсолютно любой плагин, который поможет быстро решить любую задачу в условиях коммерческого проекта. А в заказной разработке, если вы фрилансер или студия, время — деньги.
Сообщество. Огромное количество уроков, примеров кода, решений на сайтах QA. Можно очень быстро найти решение любой задачи, моментально найти ответ на любой вопрос и продолжить работу.
Краткость записи. Нативный JS, не смотря на свое развитие, пока что не может предложить такие-же возможности краткой записи. jQuery – это простой, лаконичный код, понятный даже начинающим и довольно простой в изучении.
CMS. Практически все популярные CMS, такие, как OpenCart, Joomla, WordPress, используют библиотеку jQuery. Это огромный плюс, ведь возможности этой библиотеки как во фронтенде, так и в бэкенде любой CMS, как правило, реализованы по максимуму и вопроса — подключать jQuery для десяти кастомных строк кода или нет, не стоит. Пользуйтесь в свое удовольствие.

Аргументы против jQuery

Библиотека jQuery загружается в проект как дополнительный ресурс. Можно много спорить относительно того, стоит ли загружать файл, весом 100кб к проекту, чтобы написать всего 5 строчек кода, в то время, когда каждая из картинок на странице весит гораздо больше, а их там, на минуточку, могут быть сотни. Также, следует учитывать и все подключенные плагины, сниппеты и другие ресурсы, использующие jQuery, чтобы понять целесообразность подключения библиотеки.

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

Само по себе понятие «библиотека» в программировании довольно простое для понимания. В процессе работы с каким-либо языком программирования, разработчики сталкивались с определенными задачами, однотипными проблемами, решения которых в результате были объединены в библиотеки для удобного повторного использования. Отсюда и возникают все плюсы и минусы использования библиотек. Плюс — проверенный код на любой случай жизни, минус — много того, что не используется здесь и сейчас также подтягивается в проект.

Можно услышать и некоторые другие аргументы против использования jQuery, вроде того, что эта библиотека замедляет работу браузера и работает медленнее нативного кода. Это весьма сомнительные заявления, не подкрепленные никакими фактами, экспериментальными выводами и результатами тестов. Как показывает практика, никакого негативного влияния на скорость работы браузера библиотека не оказывает, а код работает также быстро, как и нативный, ведь он, по-сути и является нативным — все функции jQuery не имеют какой-то космически-сложной структуры, которая хоть как-то влияла бы на скорость исполнения.

Использовать или не использовать jQuery?

В первую очередь, не стоит отказываться от jQuery в заказной или тиражной разработке сайтов. Эти области достаточно хорошо стандартизированы и автоматизированы. Можно получить потрясающий результат, используя популярные фреймворки, вроде Bootstrap и библиотеки, вроде jQuery, совместно с крутыми известными плагинами. Если вы видите в дизайне элементы, блоки или секции, которые проще и быстрее реализовать с использованием jQuery и плагинов, вперед!

Вообще, jQuery можно использовать практически в любых проектах, если вы уверены, что будет задействована достаточная часть библиотеки и не используется какой-либо JS-фреймворк. Конечно, никто не запретит подключить библиотеку к проекту и написать пресловутые 5 строк кода. Осудить вас может, пожалуй, только вышеупомянутый кодер-перфекционист, если случайно заглянет в ваши исходники. Ему лучше на глаза не попадаться, чтобы не случился очередной приступ паранойи и неконтролируемого гнева. А если серьезно, то в таких случаях библиотеку можно и не использовать, а посмотреть вариант решения задачи в сниппетах для редакторов кода, которые я подготовил к данному выпуску (см. Полезные ресурсы урока).

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

В настоящее время огромное количество контентных проектов, крупных СМИ, коммерческих сайтов и многих известных ресурсов используют jQuery, так как функционал этой библиотеки достаточен и значительная его часть реализована. Это и есть основные критерии грамотного использования любого ресурса.

Коллекция сниппетов для Visual Studio Code и Sublime Text.

Для того, чтобы облегчить написание нативного JS, если до этого вы использовали только jQuery, я подготовил коллекцию сниппетов для редакторов Visual Studio Code и Sublime Text, основанную на популярных примерах You Don't Need jQuery (см. Полезные ресурсы урока). Сниппеты устанавливаются и работают с редакторами кода штатным образом. В коде каждого сниппета есть закомментированный пример, написанный с использованием jQuery и его альтернатива в нативном исполнении:

Установка в Sublime Text

Для установки сниппетов в редактор Sublime Text достаточно скачать архив с GitHub и распаковать папку «YDNjQ - Sublime Text Snippets» в директорию «ПОЛЬЗОВАТЕЛЬ \ AppData \ Roaming \ Sublime Text 3 \ Packages \ User», которую можно открыть из редактора: Меню «Preferences > Browse Packages. », затем перейти в папку User:

Установка в Visual Studio Code

Процесс установки сниппетов в кодовый редактор Visual Studio Code не на много сложнее. Скачиваем тот-же самый архив с GitHub и выгружаем содержимое папки «YDNjQ - Visual Studio Code Snippets» в папку «ПОЛЬЗОВАТЕЛЬ \ AppData \ Roaming \ Code \ User \ snippets». Обратите внимание, что необходимо выгрузить именно содержимое папки «YDNjQ - Visual Studio Code Snippets», то-есть весь список файлов:

После установки сниппеты доступны по ключевым словам jQuery-функций. Например, «hide», «fade», «load» и т. д. Для использования в Sublime Text достаточно набрать нужное сокращение и нажать Tab, или нажав Ctrl+Shift+P, ввести ключевое слово и выбрать нужный сниппет с префиксом YDNjQ. В редакторе Visual Studio Code достаточно нажать F1 > Insert Snippet, ввести ключ сниппета и выбрать нужный.

И в заключение. Хотите использовать jQuery или какую-либо другую библиотеку в вашем проекте — используйте на здоровье. Грамотно и рационально.

В этой статье вы узнаете: что такое JavaScript библиотека jQuery, как скачать последнюю версию и подключить её к сайту, как установить скрипт с Google CDN и других хранилищ на страницу, а также чем отличается обычная версия от slim и сжатая от не сжатой.

Что такое jQuery и её поддержка браузерами

jQuery — это быстрая, лёгкая и многофункциональная JavaScript библиотека, основанная на принципе «пиши меньше, делай больше».

Её создал Джон Резиг в начале 2006 года. В настоящее время jQuery разрабатывается и поддерживается распределенной группой разработчиков как проект с открытым исходным кодом.

Сейчас последней версией jQuery является 3.5.1. Она поддерживается во всех основных браузерах: Chrome, Firefox, Safari, Edge, Opera и Internet Explorer 9+.

Преимущества и недостатки jQuery

Преимущества, которые даёт нам библиотеки jQuery при её использовании для написания клиентских сценариев:

компактность кода . Позволяет писать код более компактно чем на чистом javaScript, т.е. за гораздо меньшее количество строк кода.
простой и понятный синтаксис . Значительно упрощает написание многих вещей, например, таких как манипулирование DOM элементами, обработку событий, добавление эффектов анимации на страницу, AJAX запросов и т.д.
кроссбраузерность . Код написанный на jQuery будет гарантированно работать во всех основных браузерах. В то время как код, написанный на чистом JavaScript надо будет однозначно проверять во всех браузерах. Т.к. некоторые фрагменты кода могут не поддерживаться и их реализацию для этих браузеров нужно будет выполнять как-то по-другому, или например, использовать полифиллы.
открытый код . Библиотека jQuery является полностью бесплатной как для личных, так и для коммерческих проектов.

Кроме преимуществ, приведённых выше, у библиотеки jQuery имеются конечно и недостатки.

К недостаткам jQuery можно отнести то, что она может немного увеличивать скорость загрузки веб-страницы (её сжатый размер составляет около 30КБ), а также немного снижать производительность выполнения кода, чем если он был бы написан на чистом JavaScript.

Статистика использования jQuery

Если перейти к статистике, то многие крупные компании, используют jQuery в своих приложениях и сайтах. При этом растущий тренд продолжается, несмотря на очень горячие дискуссии в ИТ сообществах на тему: «Стоит ли использовать jQuery или нет в 2021 году?»

Что можно делать с jQuery

jQuery позволяет очень легко:

выбирать элементы для выполнения различных манипуляций над ними;
создавать различные визуальные эффекты (например, плавное отображение и скрытие элементов);
создавать сложную анимацию, при этом реализовывая это за гораздо меньшее количество строк кода чем на чистом JavaScript;
манипулировать DOM элементами и их атрибутами;
реализовывать AJAX для асинхронного обмена данными между клиентом и сервером;
перемещаться от текущего узла к другим по иерархической структуре DOM дерева;
выполнять несколько действий над элементом посредством одной строчки кода;
получать или устанавливать размеры HTML элементам и т.д.

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

Как скачать jQuery

Для загрузки нам доступны 2 версии: полная и slim . Отличается slim от полной только тем, что в ней отсутствует часть модулей, а именно ajax и effects . Если функции входящие в эти модули нужны, то тогда следует выбрать полную версию. В противном случае – slim .

Кроме этого, каждая из них доступна нам как в сжатом (с суффиксом min ) так и в несжатом виде.

Несжатый вариант библиотеки рекомендуется использовать только во время разработки проекта или его отладки. Кроме этого, его ещё используют для изучения исходного кода jQuery. В нём можно посмотреть устройство как всей библиотеки, так и определённой функции.

На продакшене лучше применять сжатый вариант jQuery (с расширением min.js ). Он меньше весит, и, следовательно, быстрее загружается. А это очень важно для производительности сайта.

Уменьшение объема JavaScript кода библиотеки jQuery осуществляется за счёт минимизации. Минимизация – это процесс, который заключается в удалении из исходного кода всего лишнего (комментариев, незначащих пробелов, переносов строк, символов табуляции) и замене имен функций и переменных на более короткие.

Кроме этого, существуют разные ветки jQuery: 1.x , 2.x и 3.x .

jQuery 1.x следует использовать если нужна поддержка IE 6 – 8.

jQuery 2.x построено на том же API, что 1.x. Но имеет меньший размер и более высокую производительность. Это было достигнуто благодаря тому, что из неё был удалён устаревший код, необходимый для поддержки IE 6 – 8. Таким образом 2.x можно использовать только в том случае, если вам не нужна поддержка этих старых браузеров.

jQuery 3.x – последняя ветка (3.5.1 – последняя версия). В большинстве случаев рекомендуется выбирать её, если конечно вам не нужна поддержка IE 6 – 8. В отличие от предыдущих веток она имеет множество улучшений (поддержку промисов, работу с анимацией через requestAnimationFrame и др.) и исправлений. Кроме этого, она доступна как в полном формате, так и slim .

После того как вы определись какой вариант библиотеки вам нужен, его необходимо загрузить.

Для скачивания jQuery с официального сайта нажмите правой кнопкой мыши на нужную ссылку и выберите пункт «Сохранить ссылку как. ».

После скачивания, можно заметить, что jQuery представляет обычный файл с расширением .js . Далее его нужно загрузить на сервер.

Как подключить скрипт jQuery в html

Подключение jQuery к странице осуществляется также как и любого другого JavaScript файла. Т.е. посредством добавления в HTML тега <script> с атрибутом src , в котором необходимо задать полный или относительный путь к файлу.

Подключение последней версии jQuery:

При этом разместить <script> можно как секции в <head> , так и в <body> . Но где же лучше?

Раньше (до появления режимов async и defer ) это рекомендовалось делать перед закрывающим тегом body :

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

Если бы мы сделали это по-другому, например, поместили script в раздел head , то создали бы «задержку» при обработке страницы в самом её начале. А это привело бы к тому, что пользователю пришлось бы дольше ждать отображения контента страницы.

Но сейчас так делать не рекомендуется. Лучше размещать скрипты как можно выше (в разделе <head> ) с добавлением к ним атрибута defer или async . Эти атрибуты будут «говорить» браузеру, что скрипт нужно загрузить в фоне, не останавливая при этом основной поток обработки страницы. Это позволит сделать сайт более производительным.

При этом, если на странице имеется несколько внешних скриптов с атрибутом defer , то они будут выполняться строго в том порядке, в котором они расположены в коде.

Пример отложенного подключения jQuery и своего внешнего скрипта, зависящего от этой библиотеки:

При непосредственном размещении JavaScript кода в HTML документе его необходимо поместить в обработчик события DOMContentLoaded (в этом случае его код выполнится после загрузки библиотеки jQuery):

Как подключить jQuery с CDN

CDN (Content Delivery Network) – это технология, которая позволяет увеличить скорость доставки контента конечным пользователям.

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

Т.е. CDN предоставляет ещё один способ подключить библиотеку jQuery. При этом непосредственно загружать его себе на сервер не нужно, он будет браться с CDN.

Загрузку jQuery с CDN предоставляют множество компаний, например, таких как Google, Microsoft, Cloudflare, jQuery, Yandex и т.д.

Подключить jQuery с CDN очень просто. Для этого нужно вставить script с атрибутом src , в котором прописать путь до этой библиотеки.

Код для онлайн подключения jQuery последней версии (3.5.1) с Google CDN:

Если нужна не эта, а какая-то другая версия, то тогда следует перейти страницу Google CDN и выбрать её.

Например, ссылка для подключения версии из ветки 1.x (1.12.4):

Google CDN для последней версии из ветки 2.x (2.2.4):

Другие популярные CDN

Yandex CDN (последняя опубликованная версия 3.3.1):

Дополнительно можно отметить, что если множество сайтов используют один и тот-же URL для подключения jQuery с CDN, то браузеру не потребуется загружать его для каждого такого ресурса. После первого скачивания он поместить jQuery в кэш и при последующих запросах будет брать её уже оттуда.

Как проверить подключён ли jQuery

Проверить подключён ли jQuery к странице можно так:

Если нужно выполнить те или иные действия в зависимости от того подключен jQuery к странице или нет:

Пример, в котором показано как можно добавить jQuery на страницу, если он ещё не загружен:

Узнать версию jQuery, которая у вас подключена к странице можно следующим образом:

Как использовать jQuery на странице

Синтаксис jQuery начинается с функции jQuery или с более короткого и красивого псевдонима - знака $ (как в этом примере).

Что делать при конфликте jQuery с другой библиотекой

Но что делать если знак $ у вас занят и используется другой библиотекой?

В этом случае, чтобы избежать конфликтов можно воспользоваться одним из следующих 3 способов.

jQuery – это чрезвычайно популярная многофункциональная библиотека Javascript, которая предоставляет множество расширенных и кросс-браузерных функций, которые могут улучшить веб-приложения. Это значительно упрощает повторяющиеся задачи, такие как выбор элементов, манипулирование DOM, обработка событий, анимация и Ajax.

пиши меньше, делай больше.

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

Важно отметить, что jQuery – это просто библиотека JavaScript. Код, который вы пишете при использовании jQuery, по-прежнему является кодом JavaScript, поэтому для понимания, структурирования и отладки вашего кода необходимы глубокие знания JavaScript.

Некоторые из особенностей jQuery заключаются в следующем:

Выбор HTML / DOM и манипуляции с ним (на основе селекторов CSS, использующих имена и атрибуты элементов, таких как id и class)
Манипулирование CSS
События
Ajax
Эффекты и анимация
JSON-разбор
Расширяемость с помощью плагинов (новые события, элементы и методы могут быть легко добавлены и затем повторно использованы в качестве плагина)

Зачем использовать jQuery вместо простого JavaScript?

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

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

Начало работы с jQuery

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

Вот как включить jQuery в веб-страницу. Атрибут src в элементе

Как и многие другие библиотеки javascript, jQuery использует глобальную переменную $ в качестве ярлыка. Знак $ используется для определения или доступа к jQuery. Вы можете использовать либо $ («div»), либо jQuery («div»). Они одинаковые. Вы можете использовать любой из ваших предпочтений, но $ короче, аккуратнее и его легче обнаружить, чем jQuery.
Общий синтаксис: $( ‘селектор’ ).действие()

Примеры:
$(this).hide() – скрывает текущий элемент.

$ (‘Div’).hide() – скрывает все элементы div

$ (‘.MyDiv’).hide() – скрывает все элементы с классом = «myDiv».

Чтобы запустить код, как только документ будет готов к работе, вы можете использовать оператор jQuery, известный как событие ready.

// Ваш код здесь.

Кроме того, вы также можете использовать:
$(function ()

// Методы jQuery идут сюда …

>);
Это основа для запуска jQuery. Чтобы освоить jQuery, вы должны научиться использовать селектор jQuery и события jQuery. Селекторы jQuery позволяют вам найти элементы, которые вы хотите изменить, а события jQuery помогают привязать код к событию элемента. В Интернете доступно множество ресурсов, которые помогут вам освоить селекторы и события.

Это много на сегодня. Надеюсь, что это поможет вам изучить основы jQuery.

Здравствуйте, дамы и господа! Вот уже без малого десять лет минуло с первого релиза библиотеки jQuery, и мы решили отряхнуть пыль веков с классики. Подумываем о выпуске третьего издания гусарской баллады об этой библиотеке:

Чтобы пояснить, чем она нас привлекает в эпоху Node и ES6 (у нас в ассортименте и этого добра навалом) предлагаем познакомиться со статьей Коди Линдли, вышедшей вскоре после вышеупомянутого третьего издания

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

В этой статье хотелось бы всем еще раз рассказать, что же такое jQuery, поскольку сегодня она не менее актуальна, чем на момент появления. Вопрос о ее важности нужно соотнести с исходным назначением всего этого решения (то есть, самого API jQuery), а не с браузерными багами или недостающими возможностями. Если исходить из чего-то другого, то мы рискуем встать на позиции, с которых бракуется любая абстракция, которая может быть не абсолютно необходимой, но, все-таки, мощной и полезной.

Прежде чем я начну пылко отстаивать честь jQuery, давайте вернемся к ее истокам, чтобы всем стало понятно, «что» такое jQuery, и «зачем» она нужна.

Что такое jQuery?

jQuery – это библиотека JavaScript (т.e., она написана на JavaScript), предназначенная для абстрагирования, выравнивания, исправления и упрощения скриптинга при работе с узлами HTML-элементов в браузере или для работы в браузере без графического интерфейса.

Абстрагируется интерфейс объектной модели документа (он же DOM API).
Выравниваются все различия реализаций DOM, существующие между браузерами.
Исправляются известные браузерные баги, связанные с CSS и DOM.

Теперь позвольте объяснить, что я понимаю под “скриптингом HTML-элементов”. При помощи jQuery совершенно тривиально решаются задачи вроде «визуально скрыть второй элемент h2 в документе .html. Код jQuery для такой задачи выглядел бы так:

Давайте немного разберем эту строку с кодом jQuery. Сначала вызывается функция jQuery() , ей мы передаем специальный CSS-селектор библиотеки jQuery, выбирающий второй элемент h2 в HTML-документе. Затем вызывается метод jQuery .hide() , скрывающий элемент h2 . Вот как прост и семантически выразителен код jQuery.

Теперь сравним его с нативным DOM-кодом, который потребовалось бы написать, если бы мы не работали с jQuery.

Какой вариант было бы удобнее написать? А читать, а отлаживать? Также учтите, что вышеприведенный нативный DOM-код предполагает, что все браузеры поддерживают использованные здесь методы DOM. Однако оказывается, что некоторые старые браузеры не поддерживают querySelectorAll() или setProperty() . Поэтому вышеприведенный код jQuery вполне нормально работал бы в IE8, а нативный код DOM вызвал бы ошибку JavaScript. Но, все-таки, даже если бы обе строки кода работали повсюду, какую из них было бы проще читать и писать?

Имея дело с jQuery, можно не беспокоиться о том, какой браузер что поддерживает, либо какой DOM API в каком браузере может забарахлить. Работая с jQuery, вы сможете работать быстрее решать задачи на более простом коде, и при этом не беспокоиться, так как jQuery абстрагирует за вас многие проблемы.

jQuery = JavaScript?

Поскольку jQuery повсеместно распространена, то вы, возможно, не вполне представляете, где заканчивается JavaScript и начинается jQuery. Для многих веб-дизайнеров и начинающих разработчиков HTML/CSS, библиотека jQuery — это первый контакт с языком программирования JavaScript. Поэтому jQuery иногда путают с JavaScript.

Первым делом давайте оговоримся, что JavaScript – это не jQuery и даже не сам DOM API. jQuery – это сторонняя свободная библиотека, написанная на JavaScript и поддерживаемая целым сообществом разработчиков. Кроме того, jQuery не относится к числу стандартов тех организаций (напр., W3C), которые пишут спецификации HTML, CSS или DOM.

Не забывайте, что jQuery служит прежде всего как «сахар» и используется поверх DOM API. Этот сахар помогает работать с интерфейсом DOM, который печально известен своей сложностью и обилием багов.

jQuery – это просто полезная библиотека, которой можно пользоваться при написании сценариев для HTML-элементов. На практике большинство разработчиков прибегают к ней при DOM-скриптинге, поскольку ее API позволяет решить больше задач меньшим количеством кода.

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

Два краеугольных камня jQuery

Две базовые концепции, на которых основана jQuery, таковы: “найди и сделай” и “пиши меньше, делай больше.”
Две этих концепции можно развернуть и переформулировать в виде следующего утверждения: первоочередная задача jQuery заключается в организации выбора (то есть, нахождении) или в создании HTML-элементов для решения практических задач. Без jQuery для этого потребовалось бы больше кода и больше сноровки в обращении с DOM. Достаточно вспомнить рассмотренный выше пример с сокрытием элемента h2 .

Еще добавлю, что польза jQuery – не в успешном устранении браузерных багов. «Краеугольные камни» нисколько не связаны с этими аспектами jQuery. В долгосрочном отношении самая сильная сторона jQuery заключается в том, что ее API абстрагирует DOM. И эта ценность никуда не денется.

Как jQuery сочетается с современной веб-разработкой

Однако, при любых разработках, связанных с BOM (браузерной моделью документа) или DOM, а не только с косметическими взаимодействиями, следует пользоваться jQuery. В противном случае вы станете изобретать велосипед (т.e. элементы абстракций jQuery), а потом испытывать его на всевозможных дорожках (т.e в мобильных браузерах и браузерах для ПК).

Опытные разработчики знают, что такое «стоять на плечах гигантов», и когда следует избегать излишней сложности. В большинстве случаев нам все равно не обойтись без jQuery, когда нужно в сжатые сроки выполнить нетривиальную работу, связанную с HTML и DOM.

Кроме того, даже если бы jQuery не решала ни единой проблемы с DOM или с разношерстными браузерными реализациями спецификации DOM, важность самого API ничуть бы не уменьшилась, поскольку он так удобен для HTML-скриптинга.

Причем jQuery совершенствуется, и с ее помощью программисты могут работать толковее и быстрее. Такова ситуация сегодня, так было и на момент создания библиотеки. Сказать «мне не нужна jQuery» — все равно, что утверждать «обойдусь без lo-dash или underscore.js». Разумеется, можно без них обойтись. Но об их ценности судят не по этому.
Их ценность — в API. Из-за излишней сложности разработка может замедляться. Поэтому нам и нравятся такие вещи как lo-dash и jQuery – с ними все упрощается. А поскольку jQuery облегчает выполнение сложных задач (например, писать сценарии для HTML), она не устареет.

Если вы по-прежнему сомневаетесь, нужна ли jQuery в современной веб-разработке, предлагаю посмотреть следующую презентацию от одного из разработчиков библиотеки, где он обосновывает ее нужность безотносительно наворотов современных браузеров.

Читайте также: