В даному уроці наводиться 15 рекомендацій по роботі з бібліотекою jQuery. Описані методи допомагають ефективно використовувати потужний інструмент розробника.
1. Використовуйте найсвіжішу версію jQuery.
Використання інновації, які з'являються в проекті jQuery, є одним з найпростіших способів поліпшити продуктивність вашого сайту. Кожна нова версія бібліотеки містить нові оптимізації коду і виправлення помилок. Весь процес поліпшення зводиться до елементарної заміни змісту тега script.
Останній приклад включатиме найсвіжішу версію jQuery 1.6.x автоматично, але врахуйте, що вона кешируєтся тільки на одну годину.
2. Робіть селектори простіше.
Однак слід оптимізувати процес отримання елементів. Багато користувачів продовжують використовувати старі версії браузерів, які змушують jQuery занурюватися в розбір дерева DOM, що є повільним процесом.
Вибір по id - найшвидший варіант. Якщо вам потрібно вибрати клас, передуватимете його ім'я тегом - $ ( 'li.selected'). Така оптимізація істотно впливає на процеси в старих браузерах і мобільних пристроях.
Ще один момент, про який слід пам'ятати, полягає в тому, що jQuery надає вам великий набір додаткових селекторів (таких як: visible. Hidden. Animated), які не є селекторами CSS. В результаті, якщо ви використовуєте їх, то бібліотека не задіює функцію querySelectorAll (). Щоб оптимізувати процес слід спочатку вибрати елементи, а потім фільтрувати їх:
Результат виконання вище наведеного прикладу однаковий, але другий варіант видає результат швидше.
3. Об'єкти jQuery як масиви.
Результатом використання селекторів є об'єкт jQuery. Але з ним можна працювати як з масивом за допомогою індексу елементів і їх довжини.
Якщо питання продуктивності вас турбує, використовуйте прості цикли for або while замість $ .each ().
Перевірка довжини також є методом визначення наявності в колекції елементів.
4. Властивість selector.
jQuery надає властивість, яке використовується для початку ланцюжка.
Хоча вище наведені приклади вказують на один елемент, селектори відрізняються. Другий селектор можна використовувати для створення нового об'єкта jQuery. Він показує метод фільтрації для звуження колекції.
5. Створюємо порожній об'єкт jQuery.
Іноді потрібно створити порожній об'єкт і заповнити його в подальшому за допомогою методу add ().
Такий підхід є основою для методу quickEach (). який можна використовувати в якості альтернативи стандартному each ().
6. Власний фільтр для селекторів. Вибираємо випадковий елемент.
Ви можете створити свій власний фільтр для селекторів. Потрібно просто додати нову функцію до об'єкту $ .expr [ ':']. Нижче наводиться код для випадкового вибору елемента:
7. Використовуємо гачки CSS.
API гачків CSS дає розробнику можливість отримувати і встановлювати певні значення CSS. Можна приховувати специфічну реалізацію властивостей в браузерах і використовувати єдиний інтерфейс для доступу до певних властивостей.
А особливо добре, що вже є багата бібліотека підтримуваних гачків CSS, яку можна використовувати в своїх проектах.
8. Використовуємо для користувача функцію переходу в анімаціях.
9. $ .proxy ()
Одним з недоліків використання зворотних функцій в jQuery є те, що при їх виконанні методами бібліотеки контекст встановлюється для іншого елемента. Наприклад, якщо у вас є розмітка:
Потрібно приховувати панель при натисканні кнопки. Пробуємо зробити код:
В результаті маємо проблему - зникає кнопка, а не панель. За допомогою $ .proxy можна зробити так:
Тепер все виконується так, як потрібно. Функція $ .proxy отримує два аргументи - оригінальну функцію і контекст. Вона повертає нову функцію, в якій значення this відповідає контексту.
10. Визначайте вага вашої сторінки.
Простий факт: чим більше змісту на вашій сторінці, тим більше часу витрачає браузер на її висновок. Ви можете швидко визначити кількість елементів DOM на сторінці за допомогою консольного коду:
Чим менше число, тим швидше буде виводитися сторінка. Ви можете оптимізувати швидкість завантаження, видаливши надлишкову розмітку і непотрібні контейнери.
11. Зробіть ваш код плагіном jQuery.
Якщо ви витратили час на розробку коду з використанням jQuery, розгляньте питання про реалізацію його в якості плагіна. Так код можна буде легко використовувати повторно і без обмежень, а також допоможе сформувати вам свою базу розробок для проектів.
Створення плагін jQuery дуже простий процес:
12. Встановлюйте глобальні функції і значення для AJAX за замовчуванням.
При роботі з запитами AJAX в вашому додатку часто потрібно виводити індикацію про прогрес процесу. Зазвичай відображається анімація завантаження або затемняють шар. Управління індикатором в кожному виклику $ .get або $ .post може швидко втомити.
Кращим рішенням буде встановити набір глобальних значень і функцій AJAX за замовчуванням з використанням методів jQuery.
13. Використовуйте для анімацій delay ().
Зв'язування анімаційних ефектів в ланцюжка є потужним інструментом jQuery. Ви також можете вставляти затримку між анімаціями.
14. Використовуйте атрибут HTML5 data
Атрибут HTML5 data призначений для простого включення даних в веб сторінку. Він зручний для обміну даними між сервером і клієнтською частиною, коли потрібно висновок з блоку