Зачем вам jQuery
vk f t

Зачем вам jQuery

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

Представьте, что вам нужно на сайт добавить форму обратной связи и кнопку быстрого заказа. Вы пишете 200 строк на JavaScript: нужно, чтобы поля проверялись, данные отправлялись, если человек не заполнил — на него выпадала выпадайка и т. д. Всё это нужно внимательно описать, запрограммировать и протестировать. На это уходит, допустим, полтора-два часа. Работает? Да. Получилось быстро? Не очень. Чтобы было быстрее, многие используют jQuery.

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

Чтобы было понятно, насколько jQuery может ускорить написание кода, вот пример. Двум программистам дали задачу: сделать так, чтобы по клику в самом низу страницы она сама плавно прокручивалась до самого верха. Один решил эту задачу на чистом JavaScript:

    
language: JavaScript
   var t;

   function scrolltop() {

      var top =

Math.max(document.body.scrollTop,document.documentElement.scrollTop);

      if(top > 0 ) {

      window.scrollTo(0,Math.floor(top/1.5));

      t = setTimeout("scrolltop()",30);

      }

else {

     clearTimeout(t);

     }

   return false;

}


Скопировать код

Код скопирован

Другой использовал jQuery. У него код состоит из одной строки: 

$("html,body").animate({scrollTop:0},500);

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

Как включить jQuery

Чтобы вся магия jQuery заработала, нужно его подключить в HTML-странице:

<script src="https://yastatic.net/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>

Эта команда говорит браузеру: «Иди на сервер Яндекса по вот такому пути, найди там файл jquery.min.js, будем работать с этой библиотекой и писать на ней скрипты». Дальше мы собрали список плюсов и самых веских причин использовать jQuery в проектах. Это будет полезно знать тем, кто хочет делать что-то для веба или лучше понимать, как устроены сайты изнутри.

Плюс: простой синтаксис

jQuery читается несколько проще, чем JavaScript, многие вещи сделаны понятнее. Например, нам нужно скрыть на странице второй по счету заголовок уровня H2.

JS:

document.querySelectorAll('h2')[1].style.setProperty('display','none');

jQ:

jQuery('h2:eq(1)').hide();

Плюс: плагины на любой случай

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

Несколько примеров:

      Scrollpane — кроссбраузерный скролбар любого элемента на странице;

      jReject — проверяет, не устарел ли используемый браузер;

      GridScrolling — навигация по сайту с помощью клавиш;

      FlickerPlate — плагин для слайдеров с поддержкой сенсорных экранов;

      Animsition — создание анимированной загрузки страниц на сайте;

      SlideBars — создание адаптивного меню на сайте

и ещё тысячи готовых плагинов.

Плюс: простой доступ к странице

В чистом JavaScript обратиться к объекту на странице можно одним из способов:

document.getElementById("myElement")
document.getElementsByTagName("td")
document.getElementsByClassName("myClass")

и еще несколько подобных

В jQuery то же самое делает одна прекрасная команда. Заодно она же совмещает в себе кучу других функций. Фактически она говорит jQuery: «Возьми ЭТО и сделай с ним что-то»:

$("myElement")

Поэтому какие-то простые манипуляции с объектами на странице выглядят элегантнее именно с jQuery. Это не значит, что их нельзя делать с простым JavaScript — можно. Но это не так красиво.

Пример манипуляции с объектами

Представьте, что у нас есть страница, на которой есть важные плашки. Такие же, как на этой, и у всех задан класс “SomeClass”. И в зависимости от времени суток, браузера или настроения программиста сайт должен эти плашки скрывать, добавлять новые или как-то их менять. Вот, что можно, к примеру, с ними делать:

  •  удалять все плашки:

      var $elem = $(".SomeClass") //Выбираем элементы.

      $elem.remove(); //Удаляем их.

  •  добавлять новые:

      $elem.prepend($someOtherElem);

  •  вставлять ещё одни перед ними:

      $elem.before($someOtherElem);

  •  заменять их на что-то другое:

      $elem.replaceWith($someOtherElem);

  •  и просто плавно показывать на экране:

      $elem.fadeIn();

Плюс: кроссбраузерность

Многие пользователи используют старые браузеры, например Internet Explorer 11. Они это делают не потому, что не знают, как обновиться, а потому что на работе админ запретил установку любого софта; или в госучереждениях давно не обновляли компьютеры.

Тут и спасает jQuery: разработчики сами предусмотрели поддержку старых браузеров. Например, вот как может выглядеть проверка на версии Intertet Explorer:

    
language: JavaScript
<!--[if expression]> рабочий код <![endif]-->

// если Internet Explorer

[if IE]

// если НЕ Internet Explorer

[if !IE]

// если Internet Explorer 7

[if IE 7]

// если НЕ Internet Explorer 7

[if !(IE 7)]


Скопировать код

Код скопирован

И такие условные блоки есть для всех старых версий IE.

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

Минус: вы контролируете не всё

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

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

Минус: много всего

Подключать целую библиотеку ради одного эффекта — не самая лучшая идея. Иногда проще потратить лишних пять минут и сделать то же самое на JavaScript, чем тащить в проект лишних 64 килобайта кода.

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

$elem.one("click", someFunc);

А можно ничего не подключать и использовать простой JavaScript, который уже научился делать то же самое через третий, необязательный, параметр в addEventListener:

elem.addEventListener('click', someFunc, { once: true, });

Плюс-минус: многое можно уже сделать и на JavaScript

В самом начале, когда jQuery только появился, он сильно помогал разработчикам, потому что сам JavaScript многое не умел делать так же легко и изящно. Сейчас JS по возможностям и удобству почти догнал jQ, и то, на что раньше уходило 10 команд, теперь делается одной.

Замена одного элемента на странице на другой.

С jQuery:

$elem.replaceWith($someOtherElem);

Без jQuery:

elem.replaceWith(someOtherElem);

Минус: нет понимания технологии

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

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

Получается, что знать jQuery всё-таки полезно, но нужно понимать, когда без него можно обойтись.

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

Ещё по теме