elviento

7 лет назад

jQuery в деталях. Вступление.

Доброго времени суток, друзья.

Недавно, общаясь с одним из моих заказчиков об использовании технологий на клиентской части его небольшого проекта, он выдал такую фразу: "Я думаю, что jQuery не лучший вариант для моего сайта, я бы предпочел Angular". Уточню, что это небольшой проект с небольшим бюджетом для автомастерской с каталогом шин и галлереей изображений. Исходя из небольшого бюджета, сжатых сроков и проекта с относительно небольшой посещаемостью, я все таки убедил его остановиться именно на jQuery, приведя весомый (для заказчика) аргумент, что разработка и поддержка проекта на jQuery в итоге ему выйдет дешевле при той же функциональности.

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

Сегодня я вас попробую убедить, что старичек jQuery жив и актуален наряду со многими js библиотеками.

Заглянув на сайт https://w3techs.com мы видим следующую статистику:

Диаграмма построена по этим данным
Еще статистика

То есть в 72% из всех существующих веб ресурсов, использующих js, уверенно держит лидерство JQuery. Конечно, многие из этих проектов существуют уже не один год, а новые крупные порталы пишутся только на Angular/Angular2/Meteor/Polymer фрейморках.

Где же истина?

давайте разберемся.

Что такое jQuery.

Это библиотека, написанная на JavaScript. Другими словами - это своего рода набор инструментов или "оболочка" над javascript.

В 2006 году, когда ее выпустили, каждый браузер имел свои собственные стандарты для работы с DOM. До ее выпуска обычной практикой была отладка и заточка под каждый браузер.
AJAX запросы было непросто реализовать даже под разные версии одного и того же браузера.

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

Но это было тогда, а сейчас наиболее популярные браузеры обновляются сами и придерживаются одинаковых стандартов. Теперь можно написать на чистом javascript один раз и весь код будет почти одинаково (и главное быстрее) работать на последних версиях клиентов.

А стоит ли сейчас вообще использовать библиотеку jQuery и если да, то в каких случаях?

Давайте рассмотрим преимущества ее использования, приведу основные:

Легкий порог вхождения для новичков, знающих CSS и javascript
Лаконичный синктаксис.
Экономит время разработчика.
Кроссбраузерность. (Бывают все же случаи, когда js не одинаково отрабатывает даже в новейших браузерах)
Огромное количество плагинов, написанных под jQuery. Подключил плагин, вызвал конструктор, задал параметры и все всегда работает (ну почти всегда)
Начиная с 3 версии в jQuery убрали поддержку старых браузеров и оптимизировали код, теперь она более компактна и работает еще быстрее
Проект ращвивается и регулярно выходят очередные обновления.

А теперь недостатки:

Легкий порог вхождения(!). Да именно это является также и недостатком, многие новички начинают ей пользоваться так и не научившись хотя бы азам javascript и не разобравшись, что представляет из себя DOM. В результате такой проект становится практически невозможно расширять и проще переписать логику фронтенда заново.
Необходимость в подгрузке файла библиотеки при первой загрузке сайта происходит небольшая (несущественная) задержка. (лучше подключать сжатую версию)
Чуть медленнее отрабатывают пользовательские скрипты по сравнению с нативным js.
Иногда случаются конфликты при использовании дополнительных библиотек в одном проекте. Это актуально для порталов со сложной и разветвленной архитектурой.

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

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

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

Для новичков я предлагаю небольшой курс для ознакомления с этим полезным инструментом.

Перед тем как начать работать с jQuery

Необходимо иметь практический опыт работы с javascript. Рекомендую для новичков этот онлайн-учебник
Уметь работать с CSS.
Знать HTML и DOM .

Скачиваем и подключаем.

Подключить можно как минимум двумя способами:

Локально

т.е. библиотека будет находиться на хостинге вместе с файлами проекта.

Для этого скачиваем jQuery с официального сайта http://jquery.com/ нажав на кнопку Download.
На сегодняшний день актуальна версия 3.1.1

Затем в новом окне выберите нужный вам вариант библиотеки

После этого создадим файл index.html и скопируем наш jQuery в папку js, которую перед этим надо создать
В файл index.html пишем базовую структуру html подключаем jQuery в между тегами head

<!DOCTYPE html>
<html>
<head>
    <title>jQuery тест</title>
    <meta charset="UTF-8">
    <sсript type="text/javascript" src="js/jquery.js"></sсript>
</head>
<body>       
    
</body>
</html>

Через CDN

Давайте посмотрим, что же такое CDN

CDN - Сеть доставки (и дистрибуции) содержимого (англ. Content Delivery Network или Content Distribution Network, CDN) — географически распределённая сетевая инфраструктура, позволяющая оптимизировать доставку и дистрибуцию содержимого конечным пользователям в сети Интернет.

К примеру я предпочитаю пользоваться сервисами CDN от Google, т.к. ответ от них приходит зачастую быстрее чем от хостинга, в случае локального подключения jQuery.

В этом случае в секции head следует изменить строку

<head> 
    <sсript type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">    </sсript>
</head>

Если требуется получить самую "свежую" версию библиотеки из текущей ветки, то следует указать только 2 первые цифры.

Например, задав версию 3.1, вы получите самую актуальную на сегодня 3.1.1.

Но в ответе от сервера (в заголовках для кеширования) значение expires будет равно сегодняшней дате, из этого следует, что кеш jquery будет чаще обновляться, что не очень хорошо сказывается на скорости загрузки страницы.

Если же указать конкретную версию, например 3.1.1, то expires будет равен текущей дате + 1 год.

Так же неплохой CDN на сервисе cloudflare.com
Ссылка на jquery, актуальную на сегодня, будет выглядеть так:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

Hello world

Теперь попробуем как работает jQuery. Как это принято у разработчиков, в самом первом выводе на экран программа приветствует Мир.

Пишем в наш файл index.html следующий код:

<!DOCTYPE>
<html>
<head>
    <title>jQuery тест</title>
    <meta charset="UTF-8">
    <sсript type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></sсript>     
</head>
<body>
   <div id="hello_text"></div>
   <sсript >
        $('#hello_text').text('Привет Мир');
   </sсript>
</body> 
</html>

Сохраняем и открываем файл в браузере, видим что текст "Привет Мир" теперь находится в контейнере с id="hello_text".

Хочу заметить, что можно переместить содержимое <script> наверх страницы, между тегами <head>. Но в таком случае надо дождаться загрузки страницы со всеми элементами DOM. Иначе вы просто ничего не увидите. Делается это следующим образом:

<sсript>
    $(function(){
        $('#hello_text').text('Привет Мир');
    });
</sсript>

Примечание:
В старых версиях можно увидеть такой вызов:

jQuery.(document).ready(function(){ 
    // произвольный код
});

но он уже считается устаревшим (deprecated) в версиях jquery начиная с 3.0. В новых версиях следует применять следующую конструкцию

$(function(){ 
    // произвольный код
});

и это лаконичней и правильней.

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

$(function($, undefined){
    $('#hello_text').text('Привет Мир');
})(jQuery);

Этим мы ставим в известность интерпретатор js, что $ относится к jQuery и ко всему коду внутри этой функции следует применять jQuery.

Таким образом наша программа примет окончательный вид:

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

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