Навіщо нам jQuery?

Доброго дня, пані та панове! Ось вже без малого десять років минуло з першого релізу бібліотеки jQuery, і ми вирішили обтрусити пил століть з класики. Подумуємо про випуск третього видання гусарській балади про цієї бібліотеки:


Щоб пояснити, чому вона нас приваблює в епоху Node і ES6 (у нас в асортименті і цього добра навалом) пропонуємо познайомитися зі статтею Коді Ліндлі, що вийшла незабаром після вищезгаданого третього видання

Оскільки давно вщухають розмови про непотрібність jQuery, я буквально не можу позбутися думки, що ми забули основну цінність jQuery. Час про неї нагадати.

У цій статті хотілося б всім ще раз розповісти, що ж таке jQuery, оскільки сьогодні вона не менш актуальна, ніж на момент появи. Питання про її важливість потрібно співвіднести з вихідним призначенням всього цього рішення (тобто, самого API jQuery), а не з браузерних багами або відсутніми можливостями. Якщо виходити з чогось іншого, то ми ризикуємо стати на позиції, з яких бракується будь-яка абстракція, яка може бути не абсолютно необхідною, але, все-таки, потужної і корисною.

Перш ніж я почну палко відстоювати честь jQuery, давайте повернемося до її витоків, щоб стало всім зрозуміло, «що таке jQuery, і навіщо вона потрібна.

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

Отже:

Все це обертається в більш простий і менш кострубатий API, ніж нативний API DOM – ось вам і бібліотека jQuery.

Тепер дозвольте мені пояснити, що я розумію під «скриптингом HTML-елементів». За допомогою jQuery зовсім тривіально вирішуються завдання на зразок «візуально приховати другий елемент
h2
в документі .html. Код jQuery для такої задачі виглядав би так:

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

Давайте трохи розберемо цю рядок з кодом jQuery. Спочатку викликається функція
jQuery()
, їй ми передаємо спеціальний CSS-селектор бібліотеки jQuery, вибирає другий елемент
h2
в HTML-документі. Потім викликається метод jQuery
.hide()
, що приховує елемент
h2
. Ось як простий і семантично виразний код jQuery.

Тепер порівняємо його з нативним DOM-кодом, який треба було б написати, якби ми не працювали з jQuery.

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

Який варіант було б зручніше написати? А читати, а налагоджувати? Також врахуйте, що вищенаведений нативний 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 цим не обмежується. Вона не просто абстрагує нативні DOM-взаємодії, але і абстрагує асинхронні HTTP-запити (т. зв. AJAX) за допомогою об'єкта XMLHttpRequest. Крім того, в ній є ще ряд допоміжних рішень на JavaScript і дрібних інструментів. Але основна користь jQuery полягає саме у спрощенні HTML-скриптинга і просто в тому, що з нею приємно працювати.

Ще додам, що користь jQuery – не в успішному усунення браузерних багів. «Наріжні камені» анітрохи не пов'язані з цими аспектами jQuery. В довгостроковому відношенні найсильніша сторона jQuery полягає в тому, що її API абстрагує DOM. І ця цінність нікуди не дінеться.

jQuery поєднується з сучасними веб-розробкою
Бібліотеці jQuery вже десять років. Вона створювалася для тієї епохи веб-розробки, яку ми вже безумовно минули. jQuery не є незамінною технологією для роботи з DOM або виконання асинхронних HTTP-запитів. Практично все, що можна зробити з jQuery, можна зробити і без неї. А якщо вас цікавить всього лише пара дрібних простих взаємодій з DOM в одному-двох сучасних браузерах, то можливо, краще буде скористатися нативними 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 в сучасній веб-розробці, пропоную подивитися наступну презентації від одного з розробників бібліотеки, де він обґрунтовує її потрібність безвідносно наворотів сучасних браузерів.

Додаток – важливі факти про jQuery
Нарешті, перерахую деякі важливі факти, що стосуються jQuery.

  • Бібліотеку jQuery написав Джон Резиг (John Resig), її реліз відбувся 26 серпня 2006. Джон зізнався, що написав цей код, щоб «зробити революцію у взаємодії JavaScript з HTML».
  • jQuery вважається найбільш популярною сучасною бібліотекою JavaScript.
  • jQuery – вільне, надається ліцензії MIT.
  • Існує дві версії jQuery. Версія 1.x підтримує Internet Explorer 6, 7 і 8\ а 2.x підтримує тільки IE9+. Якщо вам потрібна підтримка IE8, то доведеться працювати з версією 1.x. Але це нормально, обидві версії, як і раніше, активно розробляються.
  • Мінімальна версія jQuery 2.x має розмір 82kb. В архіві Gzip — близько 28k.
  • Мінімальна версія jQuery 1.x має розмір 96kb. В архіві Gzip — близько 32k.
  • Вихідний код jQuery доступний на Github.
  • На основі вихідного коду з Github можна створитивласну версію jQuery.
  • jQuery можна встановити за допомогою менеджера пакетів bower або npm (т. e.
    $ bower install jquery or npm install jquery
    ).
  • jQuery є офіційна мережа CDN, в якій можна взяти різні версії jQuery.
  • jQuery має просту архітектуру на основі плагінів, тому будь-який бажаючий може додавати власні методи.
  • jQuery володіє великим набором плагінів. Можна придбати високоякісні плагіни для enterprise-розробки (напр. Kendo UI) або скористатися не менш класними безкоштовними (напр. Bootstrap).
  • jQuery можна розбити на категорії (відповідно до розбиттям документації API ).
  • ajax
  • attributes
  • callbacks object
  • core
  • CSS
  • data
  • deferred object
  • dimensions
  • effects
  • events
  • forms
  • internals
  • manipulation
  • miscellaneous
  • offset
  • properties
  • selectors
  • traversing
  • utilities


Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.