ITVDN logo
Видеокурсы по
программированию

Доступ более чем к 7700 видеоурокам от $19.99

Подписка
ITVDN logo
Видеокурсы по
программированию

Доступ более чем к 7700 видеоурокам от $19.99

Подписка

Введение

JQuery - огромная библиотека. Она пришла приблизительно в то время, когда IE6 был браузером номер один. Тогда было много специфических моментов и разногласий, что делало процесс разработки утомительным и JQuery был идеальным инструментом для написания кроссбраузерного кода.


С тех пор, однако, веб-браузеры намного усовершенствовались. Вы можете с удобством использовать все возможности, предоставляемые ES5, и имеете в полном распоряжении огромную API-библиотеку HTML5, которая делает работу с DOM-элементами намного приятнее. Разработчики теперь могут выбирать, что же можно оставлять из JQuery для некоторых проектов, продолжая сохранять свою производительность.

Не поймите неправильно – JQuery по-прежнему отличная библиотека и чем чаще вы будете использовать ее, тем лучше. Тем не менее, для небольших проектов, например, для простых страниц с ограниченным JS взаимодействием, расширениями браузеров и мобильных сайтов, вы можете использовать vanlla JS. 

Вот 10 советов, которые помогут в вашей деятельности.

1. Прослушивание на готовность документа (Document Ready)

Первое, что вы делаете, когда пишете JQuery, это упаковывание своего кода в вызов $(document).ready()  для того, чтобы определить готовность DOM к манипуляциям. Без JQuery у вас есть событие DOMContentLoaded. Вот как оно используется.

2. Выбор элементов

Давным-давно Вы могли только выбирать элементы по ID, классу и имени тега, а JQuery с ее умными CSS-селекторами выступала своеобразным спасателем. Браузеры исправили это и представили две важные API - querySelector и querySelectorAll.

3. Установка и удаление слушателей событий

Прослушивание событий - фундаментальная часть построения веб-приложения. Принято было использовать две основные стороны, которые отличались тем, каким способом все было сделано - IE и остальное. Но сегодня мы просто используем addEventListener.

4. Манипулирование классами и свойствами

Манипулирование именами классов элементов без JQuery было очень неудобно использовать. Но проблема была решена благодаря свойству ClassList. И если нужно управление атрибутами, Вам нужен SetAttribute.

5. Получение и установка содержимого элементов

JQuery имеет удобный текст и html ( )методы. Вместо их можно использовать свойства textContent и innerHTML, которые были у нас в течение очень долгого времени.

6. Установка и удаление элементов

Хотя JQuery и делает все намного проще, добавление и удаление DOM-элементов невозможно без простого JavaScript. Здесь показано, как добавлять, удалять и заменять любые элементы, какие Вы только захотите.

7. Прохождение по DOM дереву

Любой настоящий JS-ниндзя знает, что есть много возможностей, скрытых в DOM. По сравнению с JQuery простые интерфейсы DOM предлагают ограниченную функциональность для выбора нескольких уровней. И, тем не менее, есть множество вещей, которые Вы можете делать,  путешествуя по DOM - дереву.

8. Обработка массивов

Некоторые из утилитных методов, которые предоставляет JQuery, доступны со стандартом ES5. При переборе массивов можно использовать forEach и map вместо их JQuery аналогов - each() и map(). Просто будьте осторожны при различиях в аргументах и значениях по умолчанию в обратных вызовах.

9. Animations

Методы анимации JQuery самым лучшим образом подходят ко всему, что Вы бы хотели «оживить» и, если нужны сложные анимации из скриптов в приложении, Вы должны по-прежнему иметь дело с ней. Но благодаря всем чудесам CSS3, некоторые простые случаи можно обработать с помощью легкой библиотеки Animate.css, которая позволяет запускать анимацию, добавляя или удаляя имена классов элементов.

10. AJAX

Ajax – это еще одна технология, которая используется при кросс-браузерном беспорядке. Хорошая новость - теперь можно использовать один и тот же код везде. Плохая новость - по-прежнему громоздко создавать экземпляры и отправлять AJAX-запросы с XMLHttpRequest, так что лучше предоставить это библиотеке. Но Вы не должны подключать всю JQuery только для этого. Вы можете использовать одну из самых многочисленных и легких библиотек, которые доступны. Вот пример построения запроса AJAX напрямую, и с помощью небольшой библиотеки запросов.

Выводы

Стремление к минимальному, нулевому количеству наворотов на веб-странице - достойная цель, что окупит себя быстрой загрузкой и лучшим пользовательским опытом. Но будьте осторожны - никто не выиграет, если Вы будете изобретать велосипед, который уже используется в JQuery. Не жертвуйте хорошей практикой разработки только для того, чтобы сократить количество кода. Но есть множество мест, где на сегодня советы вполне применимы. Попробуйте следовать ванили в следующий раз, это может быть все, что вам нужно!

Источник: http://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery/

СТАТЬИ ПО СХОЖЕЙ ТЕМАТИКЕ
ВИДЕО КУРСЫ ПО СХОЖЕЙ ТЕМАТИКЕ

КОМЕНТАРИИ И ОБСУЖДЕНИЯ

ОЦЕНИТЕ ДАННЫЙ МАТЕРИАЛ

ПОДПИСКА НА ITVDN ВЫГОДА ДО 29.95$ НА ОБУЧЕНИЕ ПРЕСТИЖНЫМ ПРОФЕССИЯМ!

1 месяц19.99$
подписка

легкий старт в обучении

3 месяца49.99$
подписка

выгода от подписки до9.98$

6 месяцев89.99$
подписка

выгода от подписки до29.95$