Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

14 корисних технік, порад та усталених практик з jQuery

by
Read Time:14 minsLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

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

Але це нормально; написання жахаюче поганого коду, від якого навіть ваша бабуся охнула – це перехідний обряд, пов'язаний зі зміною вашого статусу як розробника. Необхідно лише пройти цей етап, чому й буде присвячено сьогоднішній посібник.


1. Методи повертають об'єкт jQuery

Варто пам'ятати, що більшість методів повернуть об'єкт jQuery. Це дуже корисно, і завдяки цьому реалізується можливість зчеплення методів, якою ми так часто користуємося

Враховуючи, що завжди повертається об'єкт jQuery, ми можемо цим іноді користатися для видалення зайвого коду. Наприклад, розглянемо наступний код:

Ми «гешуємо» розташування елемента someDiv для того, щоб скоротити кількість обходів DOM для отримання цього елемента до одного.

Код вище пречудовий; проте, ви могли би так же просто скомбінувати ці два рядки в один та отримати той же самий результат.

Таким чином, ми як і раніше ховаємо елемент someDiv, проте цей метод, як ми дізналися, також повертає об'єкт jQuery, на який потім можемо посилатися через змінну someDiv.


2. Вибір селектора для пошуку

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

Одне з них – використання методу find() коли це можливо. Ключовий момент при цьому – не провокуйте jQuery на використання програмного механізму Sizzle (* бібліотека JavaScript для роботи з селекторами; програмний механізм на чистому JavaScript для роботи з селекторами CSS, створений для легкої інтеграції з головною бібліотекою), якщо в цьому нема потреби. Безумовно, будуть моменти, коли це буде неможливо – і це нормально; але якщо вам не потрібні додаткові витрати, уникайте цього.

Останні версії сучасних браузерів підтримують метод QuerySelectorAll, до якого можна передавати CSS-подібні селектори без необхідності в  jQuery. jQuery також користується цією функцією.

Проте, більш ранні версії браузерів – такі, як IE6/IE7 – зі зрозумілих причин не підтримують його. Це означає, що при використанні таких більш складних, ніж звичайно, селекторів відбувається запуск програмного механізму Sizzle jQuery, що, при всій своїй чудовості, спричиняє додаткові витрати.

Sizzle – чудова глиба коду, яку я, скоріш за все, ніколи не зрозумію. Проте, якщо сформулювати принцип його роботи одним реченням, то так: відбувається перетворення вашого селектора у «масив», елементами якого є компоненти вашого селектора.

Потім відбувається розшифрування кожного елемента справа наліво за допомогою регулярних виразів. Також це означає, що частина вашого селектора, розташована в самому кінці справа, повинна бути конкретизована максимально – наприклад, бути id або іменем тегу.

Таким чином, коли це можливо:

  • Використовуйте максимально прості селектори
  • Користуйтеся методом find(). При цьому замість використання Sizzle ми можемо продовжити користуватися власними функціями браузера.
  • При використанні Sizzle оптимізуйте кінцеву частину селектора справа наскільки це можливо.

Як щодо альтернативи – використання контексту?

Також є можливість додавання контексту до ваших селекторів, наприклад, так:

Цей код інструктує jQuery зібрати колекцію всіх елементів з класом someElements, що є дочірніми елементами елементу з id someContainer. Використання контенту – хороший спосіб обмежити кількість обходів DOM, хоча скритно при цьому jQuery використовує метод find.

Доказ


3. Не зловживайте $(this)

Якщо ви не знаєте різноманітні методи DOM, то запросто можете почати використовувати об'єкт jQuery без необхідності. Наприклад:

Якщо ми використовуємо об'єкт jQuery тільки для отримання атрибута id якоря, то такий підхід – марнотратний. Краще скористатися «чистим» JavaScript.

Зверніть, будь ласка, увагу, що є три атрибути, до яких  завжди необхідно звертатися за допомогою jQuery: "src" "href" і "style". Для доступу до цих аргументів в старих версіях IE необхідно використовувати getAttribute.

Доказ

Багаточисельні об'єкти jQuery

Ще гірше, якщо ви багато разів запитуєте елементи DOM та створюєте велику кількість об'єктів jQuery.

Сподіваюсь, що вам вже зрозуміло, наскільки неефективний цей код. Якщо ні – нічого страшного; ви – в процесі навчання. Рішення – або реалізувати зчеплення, або «помістити до кеша» розташування #elem.


4. Скорочена форма методу Ready в jQuery

Відстежити момент, коли документ готовий до проведення маніпуляцій, за допомогою jQuery дуже просто.

Проте, можливо, що ви зустрічали іншу більш заплутану обертаючу функцію.

Хоча останню складніше зрозуміти, два вищезазначені фрагменти ідентичні. Не вірите? Давайте просто перевіримо початковий код jQuery?

rootjQuery – це просто посилання на кореневий компонент – jQuery(document). При передаванні селектора до функції jQuery буде здійснено перевірку його типу: string, tag, id, function тощо. Якщо було передано функцію, то jQuery потім викличе свій метод ready() передасть вашу анонімну функцію в якості селектора.


5.  Забезпечте свій код

При розробленні коду для поширення завжди слід пам'ятати, що важливо забезпечити його від якого-небудь можливого конфлікту імен. Щоб трапилося, якщо в якихось скриптах, підключених після вашого, також була би функція $? Куча неприємностей!

Рішення – або викликати функцію jQuery noConflict(), або розташовувати ваш код усередині функції-виразу негайного виклику і потім передавати до неї об'єкт jQuery.

Спосіб 1: NoConflict

Будьте обережні з використанням цього методу та намагайтеся на використовувати його, якщо планується поширення вашого коду. Це вельми збентежить користувача вашого скрипта! :)

Спосіб 2: передача jQuery

Завдяки останній парі круглих скобок (function(){}()) функція викликається автоматично. Проте, при виклику функції ми також передаємо jQuery, до якого потім звертаємося за допомогою $.

Спосіб 3: передача $ за допомогою методу Ready


6. Проявіть кмітливість

Пам'ятайте, jQuery – це просто код на JavaScript. На сподівайтеся, що jQuery зможе компенсувати недоліки вашого коду. :)

Це означає, що необхідність оптимізації таких моментів, як оператори for у JavaScript, справедлива і для методу each jQuery. А як же інакше? Це всього-на-всього допоміжний метод, у якому пізніше скритно створюється оператор for.

Жахливий варіант використання

  1. Відбувається пошук anotherDiv при кожній ітерації
  2. Двічі відбувається звернення до властивості innerHTML
  3. Відбувається створення нового об'єкта jQuery, і все для того, щоб отримати текстовий вміст елемента.

Більш вдалий варіант

При цьому єдина дія, яку ми виконуємо всередині методу each (for), – додавання нового значення до масиву ... на відміну від звертання до DOM, отримання значення властивості innerHTML елемента двічі тощо.

Порада цього пункту загалом стосується скоріше до JavaScript, ніж до jQuery. Суть полягає в тому, щоб запам'ятати: jQuery не  компенсує недоліки вашого коду.

Фрагменти документа

Раз ми торкнулися цієї теми, то знайте, що є ще один варіант для подібних випадків – використання фрагментів документа.

Ключовий момент тут – це те, що є багато способів рішення простих задач на зразок цієї, і кожен має свої власні переваги з продуктивності при роботі в різноманітних браузерах. По мірі того, як ви все більше працюєте з jQuery і вивчаєте JavaScript, ви можете відкрити для себе, що все частіше звертаєтеся до нативних (* що описані в моделі DOM та стандартах HTML) властивостей та методів JavaScript. І якщо це так, то здорово!

jQuery надає дивовижний рівень абстракції, яким вам обов'язково варто скористатися, проте це не означає, що ви зобов'язані використовувати її методи. Наприклад, у прикладі вище з фрагментом ми використовували метод jQuery each. Якщо ви віддавати перевагу використанню замість нього циклів for або while, то вперед!

Незважаючи на вищесказане, пам'ятайте, що команда jQuery дуже добре оптимізувала цю бібліотеку. Суперечки з приводу переваг методу each() або нативного циклу for безглузді та не витримують ніякої критики. Якщо ви використовуєте у вашому проекті jQuery, то зекономте свій час та скористайтеся її допоміжними методами. Саме для цього вони в ній і є! :)


7. Методи AJAX

Якщо ви – новачок в jQuery, то різноманітні методи AJAX, які нам надає бібліотека, можуть здатися лякаючими; хоча це не так. Насправді, більшість з них – просто допоміжні методи, в основі роботи яких лежить $.ajax.

  • get
  • getJSON
  • post
  • ajax

У якості прикладу давайте розглянемо getJSON, за допомогою якого ми можемо отримати документи у форматі JSON (* JavaScript Object Notation - текстовий формат обміну даними, заснований на JavaScript).

Спочатку в цьому методі скритно викликається $.get.

Потім передані дані збираються в $.get, і відбувається виклик «головного» (свого роду) методу – $.ajax.

Нарешті, $.ajax виконує кучу роботи для надання нам можливості здійснення асинхронних викликів у всіх браузерах!

Це означає, що ви можете безпосередньо і виключно використовувати метод $.ajax для здійснення всіх ваших запитів  AJAX. Решта методів – просто обгортки для нього. Так що, якщо захочете, то приберіть посередників. Між цими підходами нема великої різниці.

Чудовий спосіб

Трошечки більш ефективний


8. Доступ до нативних властивостей та методів

Що ж, ви вивчили щось з JavaScript та знаєте, наприклад, що при роботі з якорями ви можете отримати значення атрибутів безпосередньо:

Єдина проблема полягає в тому, що цей варіант не спрацює, якщо ви звертаєтеся до елементів DOM за допомогою jQuery, вірно? Звичайно ж, ні.

Так не спрацює.

Отже, якщо вам необхідно отримати доступ до атрибуту href (або будь-якої іншої властивості або методу, якщо на те пішло), то у вас є декілька варіантів.

Метод get особливо корисний, оскільки може перетворити вашу вибірку jQuery у масив.


9. Виявляємо запити ajax за допомогою PHP

Без сумнівів, у більшості проектів ми не можемо розраховувати виключно на JavaScript для виконання, скажімо, перевірки вірності даних, або запити ajax. Що якщо у клієнта відключено JavaScript? Саме на цей випадок звичайний спосіб – перевірити, чи було виконано запит AJAX, за допомогою використовуваної вами на серверній частині мови.

За допомогою jQuery це дуже просто виконати: шляхом додавання заголовка до методу $.ajax.

Встановивши значення цього заголовка, тепер ми можемо використовувати PHP (або будь-яку іншу мову) для перевірки наявності заголовка і потім діяти відповідним чином. У цьому випадку ми перевіряємо значення $_SERVER['HTTP_X_REQUESTED_WITH'].

Обгортка


10. jQuery і $

Замислювались коли-небудь, чому/яким чином ви можете використовувати jQuery та $ на рівних правах? Щоб відповісти, давайте подивимося на початковий код jQuery та глянемо на саму нижню частину. Там ви побачите:

Скрипт всієї jQuery, звісно ж, заключено всередині функції-виразу негайного виклику, завдяки чому кількість глобальних змінних скрипта скорочується наскільки це можливо. Також це означає, окрім іншого, що об'єкт jQuery недоступний за межами обертаючої його анонімної функції.

Щоб це виправити, jQuery додається до глобального об'єкта window, і, між тим, також створюється псевдонім – $.


11. Умовне завантаження jQuery

HTML5 Boilerplate (* зразок для клієнтської частини) пропонує винахідливу однорядкову програму (* програма, ефект якої значно більший, ніж можна було б чекати по її розміру) для завантаження локальної копії jQuery, якщо через яку-небудь причину вибрана вами CDN (* мережа доставки (розповсюдження) контенту) недоступна.

Виразити код вище словами можна так: якщо значенням window.jQuery є undefined, то це означає, що виникла проблема з завантаженням скрипта з CDN. У цьому випадку перейти до виконання правої частини оператора && та вставити скрипт із посиланням на локальну версію jQuery.


12. Фільтри jQuery

Зверніть увагу: jQuery.expr[':'] – просто коротка назва для jQuery.expr.filters.


13. Можливість передачі функції для методу Hover

Згідно з jQuery 1.4 тепер ми можемо передавати до методу hover тільки одну функцію. Раніше необхідно було задавати методи як для події mouseenter, так і для mouseleave.

Раніше

Зараз

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


14. Передача об'єкта з атрибутами

Згідно з jQuery 1.4 тепер ми можемо передавати об'єкт у якості другого параметра функції jQuery. Це виявляється корисним, якщо нам необхідно додати нові елементи в DOM. Наприклад:

Раніше

Після

Завдяки цьому ми не тільки скорочуємо код, але й робимо його зрозуміліше. Окрім атрибутів елементів ми можемо навіть передати специфічні для jQuery атрибути та події, наприклад, click або text.


Дякую за проявлену зацікавленість!
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.