JavaScript без jQuery: 10 советов
jQuery – отличная библиотека! Она пришла к нам в те времена, когда браузер IE6 был браузером номер один. В те времена было много сложностей и препятствий при работе с браузерами, что делало работу более чем утомительной. В такой ситуации библиотека jQuery была отличным инструментом чтобы добиться кроссбраузерности сайта.
С тех пор браузеры ушли далеко вперёд, что определённо развязывает нам руки при написании кода. Мы можем комфортно использовать все преимущества предоставляемые ES5, а так же в нашем арсенале есть наикрутейший HTML5 APIs, который значительно упрощает работу с DOM.
Разработчики сейчас находятся в ситуации, когда они могут выбирать, использовать ли им библиотеку jQuery, или же они могут вполне обойтись и без неё, не потеряв при этом в функциональности и производительности.
Не поймите меня неправильно – jQuery по прежнему остаётся отличной библиотекой, и в большинстве случаев вам действительно нужно будет использовать её. Тем не менее, для каких-то простых и маленьких вещей, вроде простой страницы с ограниченным JavaScript-взаимодействием, расширения для браузеров или мобильных сайтов, вы можете использовать чистый JS.
В этой статье будут описаны 10 советов, которые помогут вам в ваших стремлениях.
1. Ожидание готовности документа (Document Ready)
Правило номер 1: когда вы пишете код на jQuery, возьмите себе в привычку оборачивать его в $(document).ready(). Так вы всегда будете уверены что ваш документ и его DOM-структура полностью готовы для дальнейших манипуляций.
— Регулярная проверка качества ссылок по более чем 100 показателям и ежедневный пересчет показателей качества проекта.
— Все известные форматы ссылок: арендные ссылки, вечные ссылки, публикации (упоминания, мнения, отзывы, статьи, пресс-релизы).
— SeoHammer покажет, где рост или падение, а также запросы, на которые нужно обратить внимание.
SeoHammer еще предоставляет технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Зарегистрироваться и Начать продвижение
Без jQuery, вместо $(document).ready() можем использовать document.addEventListener('DOMContentLoaded'). Вот как это выглядит:
JS
// Создаём обработчик события DOMContentLoaded готовности всего
// документа и вызываем анонимную функцию.
// Затем вы можете обернуть весь ваш код в этой функции, заключив
// его в фигурные скобки. Как только загрузка страницы завершится,
// этот код сработает.
document.addEventListener('DOMContentLoaded', function () {
// Приветствие нашего гавайского человечка срабатывает сразу же после загрузки страницы
console.log('Aloha');
});
2. Выборка элементов
Раньше для выборки элементов мы могли полагаться лишь на id , class и имена тегов и jQuery для нас с вами был чем-то вроде спасателя, так как позволял осуществлять сложные выборки по селекторам CSS. С тех пор браузеры поймали эту фишку и ввели два важнейших API-метода - querySelector и querySelectorAll:
JS
// Мы можем использовать метод document.querySelector
// чтобы получить самый первый элемент, который в точности
// удовлетворяет указанным нами условиям
// Аргумент является по сути строкой, содержащей один
// или более CSS-селекторов
var lochNess = document.querySelector(".monsters");
console.log("It's from Scotland - " + lochNess.textContent);
// Мы также имеем возможность выбрать все элементы определённого
// типа или класса используя document.querySelectorAll
// Результатом будет возвращённый список узлов документа, которые
// соответствуют заданными нами параметрам
var scary = document.querySelectorAll(".monsters");
console.log("Hide and seek champions: ");
for (var i = 0; i < scary.length; i++) {
console.log(scary[i].innerHTML);
}
HTML
<ul>
<li class="monsters">Nessy</li>
<li class="monsters">Big foot</li>
<li class="monsters">La chupacabra</li>
</ul>
3. Добавление и удаление отслеживания событий
Отслеживание событий – это фундаментальная вещь при создании любых веб-приложений. Раньше существовало два основных лагеря, которые подходили к вопросу отслеживания событий по-разному: это IE и все остальные. Однако сегодня мы просто используем addEventListener:
JS
var btn = document.querySelectorAll("button"),
list = document.querySelector("ul");
// Мы вызываем метод addEventListener по отношению
// к нашей цели (в данном случае это кнопка)
// Отслеживание событий запустится как только будет
// осуществлён клик по кнопке
btn[0].addEventListener("click", function () {
// Когда клик по кнопке был осуществлён, мы хотим сделать
// доступным увеличение нашего списка
// Для этого мы добавим отслеживание события hover
// по списку.
// Как только курсор будет наведён на список, будет вызвана
// функция увеличения enlarge
list.addEventListener("mouseover", enlarge);
});
// Для отключения зума, мы можем просто использовать
// removeEventListener для удаления отслеживания события
btn[1].addEventListener("click", function () {
// Удаление отслеживания события не работает на
// анонимных функциях. Поэтому используйте именованные
// функции
list.removeEventListener("mouseover", enlarge);
});
// Давайте создадим нашу увеличивающую функцию enlarge
var enlarge = function () {
// Добавляем класс увеличения к ненумерованному списку
list.classList.add("zoomed");
// Когда курсор выходит за рамки списка, возвращаем
// нормальный размер, удаляя класс
list.addEventListener("mouseout", function () {
list.classList.remove("zoomed")
});
};
// Теперь мы хотим добавить цвета именам, по кликая по ним
// Когда событие клика обнаружено на одном из элементов
// списка, меняем его цвет на зелёный
// Мы можем добавлять отслеживание событий ко всему
// родительскому объекту
// Т.е. нам не нужно добавлять отслеживание событий к
// каждому тегу <li>
list.addEventListener("click", function (e) {
// Появление цвета у конкретного элемента списка
// только после клика по нему
e.target.classList.add('green');
});
HTML
<button>Enable zoom</button>
<button>Disable zoom</button>
<br><br>
Click on any of the names to color them green
<ul>
<li>Chewbacca</li>
<li>Han Solo</li>
<li>Luke</li>
<li>Boba fett</li>
</ul>
CSS
.green {
color: green;
}
.zoomed {
cursor: pointer;
font-size: 23px;
}
4. Управление классами и атрибутами
Раньше управление классами и атрибутами элементов без jQuery было довольно неудобно. Однако всё изменилось с появлением свойства classList. И если вам нужно поуправлять атрибутами, то всё что вам нужно - это задать атрибут setAttribute
JS
var btn = document.querySelectorAll("button"),
div = document.querySelector("#myDiv");
btn[0].addEventListener("click", function () {
// Получаем любой атрибут. Всё очень просто
console.log(div.id);
});
// Element.classList хранит все классы элемента в форме DOMTokenList
var classes = div.classList;
btn[1].addEventListener("click", function () {
console.log(classes);
});
btn[2].addEventListener("click", function () {
// Поддерживается добавление и удаление классов
classes.add("red");
});
btn[3].addEventListener("click", function () {
// Вы так же можете выключать и включать классы с
//помощью toggle
classes.toggle("hidden");
});
HTML
<div id='myDiv' class="square"></div>
<button>Display id</button>
<button>Display classes</button>
<button>Color red</button>
<button>Toggle visibility</button>
CSS
.square {
width: 100px;
height: 100px;
margin-bottom: 20px;
border: 1px solid grey;
border-radius: 5px;
}
.hidden {
visibility: hidden;
}
.red {
background-color: red;
}
5. Получение и задание контента элемента.
Для этого в jQuery есть удобные методы text() и html(). Но вы так же можете использовать методы textContent и innerHTML эти методы уже достаточно давно существуют на чистом JS.
JS
var myText = document.querySelector("#myParagraph"),
btn = document.querySelectorAll("button");
// Мы запросто можем получить текст содержащийся в узле,
// а также текст всех его потомков
var myContent = myText.textContent;
console.log("textContent: " + myContent);
// Когда используем метод textContent применительно к
// текстовой составляющей элемента, то он удаляет старый контент и
// заменяет его новым
btn[0].addEventListener('click', function () {
myText.textContent=" Koalas are the best animals ";
});
// Когда нам нужно получить весь HTML-код узла, включая
// теги, мы можем использовать innerHTML
var myHtml = myText.innerHTML;
console.log("innerHTML: " + myHtml);
// Чтобы изменить html, просто подключите новый контент
// Конечно же, мы не ограничены добавлением только лишь текста
btn[1].addEventListener('click', function () {
myText.innerHTML="<button> Penguins are the best animals </button>";
});
HTML
<p id="myParagraph"><strong> Which are the best animals? </strong></p> <button>Koalas</button> <button>Penguins</button>
6. Вставка и удаление элементов
Несмотря на то, что на jQuery это делается несколько проще, добавление или удаление DOM-элементов не является непосильной задачей для JavaScript. Вот как это делается на JS:
JS
var lunch = document.querySelector("#lunch");
// Во вкладке "Ланч" идёт описание нашего сегодняшнего ланча
// Давайте добавим туда чутка картошки фри
var addFries = function () {
// Сначала мы должны создать наш элемент и задать
// его содержимое (контент)
var fries = document.createElement("div");
fries.innerHTML = '≶li>≶h4> Fries ≶/h4>≶/li>';
// После чего мы можем использовать appendChild>
// для вставки. После чего наша картошка фри появится в списке
// нашего ланча
lunch.appendChild(fries);
};
// Теперь нам нужно добавить сыра до и после котлетки в нашем бургере.
var addCheese = function () {
var beef = document.querySelector("#Beef"),
topSlice = document.createElement("li"),
bottomSlice = document.createElement("li");
bottomSlice.innerHTML = topSlice.innerHTML = 'Cheese';
// Вставляем верхний кусочек:
// Берём родительский элемент котлетки (это сендвич), и
// юзаем на него insertBefore
// Первым аргументом в методе insertBefore идёт то что мы
// собираемся добавить
// Вторым аргументом идет узел, перед которым нужно добавить новый элемент
beef.parentNode.insertBefore(topSlice, beef);
// Нижний кусочек:
// Здесь мы немножко сфокусничаем!
// Подключим следующий ближайший элемент в качестве второго аргумента
// метода insertBefore, таким образом мы вставим то что нам нужно,
// там где мы этого хотим
beef.parentNode.insertBefore(bottomSlice, beef.nextSibling);
};
var removePickles = function () {
// Наконец, мы получили возможность избавиться от маринованных огурчиков.
// И в этом опять-таки нам помог javascript!
var pickles = document.querySelector("#pickles");
if (pickles) {
pickles.parentNode.removeChild(pickles);
}
};
// Вкусняшка!
var btn = document.querySelectorAll("button");
btn[0].addEventListener('click', addFries);
btn[1].addEventListener('click', addCheese);
btn[2].addEventListener('click', removePickles);
HTML
<button>Add fries to lunch</button>
<button>Add cheese to sandwich</button>
<button>Remove pickles</button>
<h3>My Lunch</h3>
<ul id="lunch">
<li><h4>My sandwich</h4></li>
<li>Bread</li>
<li id="pickles">Pickles</li>
<li id="Beef">Beef</li>
<li>Mayo</li>
<li>Bread</li>
</ul>
7. Проход по дереву элементов структуры DOM
Настоящие JS-джедаи знают, как много всего бывает спрятано в DOM. В сравнении с jQuery, обычное API DOM ограничено в функциональности при выборке родительских а также братских/сестринских элементов. Так или иначе, в вашем кармане есть множество различных способов, чтобы сверху донизу пройтись по DOM-дереву.
JS
var snakes = document.querySelector('#snakes'),
birds = document.querySelector('#birds');
snakes.addEventListener('click', function (e) {
// Для получения доступа к родителю конкретного дочернего
// элемента в древе DOM используется метод parentNode
var parent = e.target.parentNode;
console.log("Parent: " + parent.id);
// С другой стороны, вызов метода children позволяет
// получить все дочерние элементы выбранного объекта
console.log("Children: ");
var children = e.target.children;
// Этот кусок кода вернёт HTMLCollection (вид массива),
// так что мы можем получить доступ к каждому дочернему элементу
// объекта, если пройдёмся по массиву циклом
for (var i = 0; i < children.length; i++) {
console.log(children[i].textContent);
}
});
birds.addEventListener('click', function (e) {
// Получаем ближайший братский элемент
var previous = e.target.previousElementSibling;
if (previous) {
console.log("Previous sibling: " + previous.textContent);
}
var next = e.target.nextElementSibling;
if (next) {
console.log("Next sibling: " + next.textContent);
}
// Так или иначе, чтобы получить все братские элементы в
// одном узле - это более сложная задача. Нам нужно взять
// каждый родительский элемент каждого ребёнка и затем исключить
// из него оригинальный элемент. Делается это с помощью фильтра и
// вызова функции, которая проверяет каждый дочерний элемент один за одним.
console.log("All siblings: ");
Array.prototype.filter.call(e.target.parentNode.children, function (child) {
if (child !== e.target) {
console.log(child.textContent);
}
});
});
HTML
Click on the objects to see their parent and children elements
<div id="snakes">
Snakes
<ul id="venomous">
Venomous
<li>Cobra</li>
<li>Rattlesnake</li>
</ul>
<ul id="non-venomous">
Non venomous
<li>Python</li>
<li>Anaconda</li>
</ul>
</div>
Click on any of the birds to see its siblings
<div>
Birds
<ul id="birds">
<li>Flamingo</li>
<li>Seagull</li>
<li>Raven</li>
<li>Dodo</li>
</ul>
</div>
CSS
div {
color: white;
background-color: #93d0ea;
font-family: sans-serif;
width: 180px;
text-align: center;
padding: 10px;
margin: 5px;
}
8. Обработка массивов
Некоторые из служебных методов, которые обеспечивает jQuery, теперь доступны с появлением ES5-стандартов. Для множественных ассоциативных массивов мы можем использовать forEach и map вместо их jQuery-аналогов each() и map(). Вот только будьте внимательны, есть между ними определённые отличия в аргументах и в возвращаемом по умолчанию значении this.
JS
var ninjaTurtles = ["Donatello", "Leonardo", "Michelangelo", "Raphael"];
// Цикл ForEach автоматически проходит по всему массиву
ninjaTurtles.forEach(function (entry) {
console.log(entry);
});
// Метод map вызывает функцию на каждый элемент
// массива и создаёт новый массив с результатами
var lovesPizza = ninjaTurtles.map(function (entry) {
return entry.concat(" loves pizza!");
});
console.log(lovesPizza);
9. Анимация
Благодаря jQuery, вы фактически можете анимировать всё, что угодно и как угодно, это поистине мощный инструмент! В случае когда вам нужно создать сложную анимацию для вашего проекта, без jQuery вам просто не обойтись.
— Разгрузит мастера, специалиста или компанию;
— Позволит гибко управлять расписанием и загрузкой;
— Разошлет оповещения о новых услугах или акциях;
— Позволит принять оплату на карту/кошелек/счет;
— Позволит записываться на групповые и персональные посещения;
— Поможет получить от клиента отзывы о визите к вам;
— Включает в себя сервис чаевых.
Для новых пользователей первый месяц бесплатно. Зарегистрироваться в сервисе
Однако, благодаря чудесам современных CSS3-свойств, мы можем без проблем создать свою простейшую анимацию либо использовать специальные CSS-библиотеки как например Animate.css, позволяющую создавать и запускать анимации, просто добавляя или удаляя классы к тем или иным элементам страницы.
JS
var btn = document.querySelectorAll("button"),
circle = document.querySelector("#circle");
// Сначала нам нужно добавить класс для анимации нашего объекта
// чтобы библиотека смогла распознать его
circle.classList.add('animated');
// Мы пройдёмся циклом по всем нашим кнопкам и добавим отслеживание
// событий к каждой из них
for (var i = 0; i < btn.length; i++) {
// Чтобы определить каждую анонимную функцию мы будем
// использовать переменную i
(function (i) {
btn[i].addEventListener('click', function () {
// Чтобы начать анимацию мы должны добавить определённый
// класс объекту
// В нашем случае мы храним имена классов в атрибуте data-animation в каждой кнопке
var animation = btn[i].getAttribute('data-animation');
circle.classList.add(animation);
// Чтобы заставить всё это работать больше одного раза
// нам нужно будет удалять класс после того, как анимация
// будет закончена
window.setTimeout(function () {
circle.classList.remove(animation);
}, 1000);
});
}(i));
}
HTML
<button data-animation="bounce">Bounce</button> <button data-animation="pulse">Pulse</button> <button data-animation="fadeInLeftBig">Fade in</button> <button data-animation="fadeOutRightBig">Fade out</button> <button data-animation="flip">Flip</button> <div id="circle"></div>
CSS
body {
text-align: center;
}
#circle {
border-radius: 50%;
margin: 50px auto;
width: 50px;
height: 50px;
background-color: #93d0ea;
}
10. AJAX
AJAX - это одна из тех технологий, которая раньше приводила к кроссбраузерному беспорядку. Слава богам, что теперь мы можем использовать один и тот же код где бы то ни было.
Но не всё так гладко и цветочно, как хотелось бы, AJAX-запросы написанные с XMLHttpRequest всё ещё остаются довольно громоздкими, поэтому лучше бы их оставить на совесть библиотек.
Но! Вам не нужно подключать всю jQuery-библиотеку только ради AJAX. Вы можете использовать одну из доступных лёгких библиотек. Вот как можно писать AJAX-запросы, используя маленькую библиотеку запросов
JS
// Простейший пример регистрирует тело нашей url
// страницы в консоль
// Можно сделать это вручную с помощью GET-запросов,
// но это несколько утомительно
var request = new XMLHttpRequest();
request.open('GET', 'http://tutorialzine.com/misc/files/my_url.html', true);
request.onload = function (e) {
if (request.readyState === 4) {
// Проверяем успешность GET-запроса
if (request.status === 200) {
console.log(request.responseText);
} else {
console.error(request.statusText);
}
}
};
// Ловим ошибки
request.onerror = function (e) {
console.error(request.statusText);
};
request.send(null);
// Используем небольшую библиотеку, такую как Reqwest, что в значительной степени облегчит вам работу
reqwest({
url: 'http://tutorialzine.com/misc/files/my_url.html',
method: 'get',
error: function (err) {
},
success: function (resp) {
console.log(resp);
}
});
Итог
Если вы стремитесь создавать быстрозагружающиеся на любых устройствах страницы и приложения, удобные для пользователей, то минималистичный чистый код без каких либо дополнительных тяжеловесных библиотек - это ваш выбор.
В то же время не стоит изобретать колесо, ведь никто не выиграет от того, что вы будете пытаться написать самостоятельно сложный код, который вполне может предложить jQuery. Также не стоит жертвовать своим временем и трудиться в поте лица, дабы сэкономить пару байтов трафика.
Однако существует некоторое количество рекомендаций и методов, о которых мы говорили сегодня и о которых стоит знать. В некоторых случаях они действительно будут полезным и помогут действительно сэкономить определённое количество трафика. Попробуйте в следующий раз писать на чистом JS, возможно вам больше и не понадобится ничего другого!
Материал подготовил Денис Малышок специально для сайта CodeHarmony.ru
P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
