10 Рад, як складати javascript без jquery, javascript
JQuery - відмінна бібліотека. Вона з'явилася приблизно в той же час, коли IE6 вважався браузером номер один. У той час було багато специфічних нюансів і відмінностей між різними додатками.
Їх було досить утомливо обходити, а JQuery - це ідеальний інструмент для написання коду для різних браузерів:
Однак сьогодні веб-браузери дуже серйозно просунулися в порівнянні з тими часами. Ми можемо спокійно використовувати всі можливості ES5. а крім того в нашому розпорядженні є неймовірні HTML5 API. які роблять роботу з DOM набагато приємніше.
Розробники тепер мають можливість вибору, для деяких проектів вони можуть не використовувати JQuery. але при цьому зберігають продуктивність на колишньому рівні.
Не зрозумійте мене неправильно - JQuery прекрасна бібліотека, і випадків, коли вона вам знадобиться, буде набагато більше, ніж навпаки. Проте, для більш дрібних проектів, таких як прості сторінки, з обмеженими JS-взаємодія, розширення браузерів і мобільні сайти, ви можете використовувати Vanilla JS.
Нижче наводяться 10 порад, які допоможуть вам в роботі.
1. Очікування готовності документа
Перше, що ви робите, коли створюєте JQuery. це укладаєте код в виклик $ (document) .ready () так, щоб ви знали, коли DOM готовий до дій. Без JQuery ми маємо подія DOMContentLoaded. Ось як воно використовується:
2. Вибір елементів
3. Установка і видалення обробників подій
Обробники подій є фундаментальною частиною побудови веб-додатків. Колись існувало два основні табори, які відрізнялися між собою тим, як вони працювали - IE і інші. Але сьогодні ми просто використовуємо AddEventListener:
addEventListener застосований з третім аргументом (useCapture), але деякий час це було опціонально. В результаті, код виглядає ще більше схожим на JQuery.
4. Дії з класами і атрибутами
Виробляти дії з іменами класів елемента без JQuery раніше було дуже незручно. Завдяки властивості classList тепер це залишилося в минулому. А якщо вам потрібно управляти атрибутами, у вашому розпорядженні є setAttribute:
5. Отримання та встановлення вмісту елемента
JQuery має зручні методи text () і html (). Замість них ви можете використовувати властивості textContent і innerHTML. які застосовуються вже дуже давно:
6. Вставка і видалення елементів
7. Переходи по дереву DOM
Кожен справжній JS -ніндзя знає, що в DOM приховані величезні можливості. У порівнянні з JQuery. прості DOM API пропонують обмежений набір функцій по вибірці елементів вищого або одного рівня. Тим не менш, є ще багато речей, які ви можете зробити для подорожей по дереву DOM:
8. Обробка масивів через цикл
Деякі з корисних методів, що надаються JQuery. доступні в стандарті ES5. Для перебору масивів, ми можемо використовувати forEach і map замість їх JQuery версій - each () і map (). Тільки зверніть увагу на відмінності в аргументах і значенні за замовчуванням для this в зворотних виклики:
9. Анімація
Метод анімації JQuery чудовий для всього, що ви можете з'єднати самостійно, і якщо для додатка вам потрібні складні сценарії анімації, ви все одно повинні використовувати його.
Але завдяки чудесам CSS3 деякі прості варіанти анімації можуть бути оброблені за допомогою невеликої бібліотеки на зразок Animate.css. яка дозволяє викликати для елементів анімацію, додавати або видаляти імена класів:
AJAX був ще однією технологією, з якої не було визначеності для різних браузерів. Тепер ми вже можемо використовувати той же код всюди.
Однак створення екземплярів об'єктів і відправка AJAX запитів за допомогою XMLHttpRequest як і раніше дуже громіздкі, так що краще робити це за допомогою бібліотеки.
Але ви не зобов'язані підключати виключно для цієї мети весь JQuery. Ви можете використовувати одну з численних легких бібліотек. Ось приклад побудови AJAX запиту безпосередньо, за допомогою невеликої бібліотеки reqwest:
висновок
Прагнення до мінімалізму, до веб-сторінці без зайвих наворотів є гідною метою, що принесе вам дивіденди у вигляді швидкого завантаження і кращого користувацького досвіду взаємодії. Але ви повинні бути обережні - ніхто не виграє від того, що ви будете знову винаходити колесо, яке вже винайшов JQuery.
Чи не жертвуйте корисними практиками виключно заради малої кількості байтів. У той же час є величезна кількість випадків, де ці поради прекрасно застосовні. Спробуйте наступного разу обійтися Ванілла, можливо, вам більше нічого і не знадобиться!