JavaScript без jQuery - несколько примеров

Не нужно использовать jQuery там, где вся его мощь ни к чему, т.к. многие вещи вполне спокойно делаются и без него

Ниже вы увидите примеры для следующих ситуаций:
  • Подписывание на окончание загрузки документа
  • Выборка элементов используя css-селекторы
  • Добавление/удаление подписчиков на события
  • Манипуляция с классами элемента
  • Работа с аттрибутами элементов
  • Управление контентом
  • Добавление/удаление элементов
  • Проход по DOM
  • Использование анимации
  • AJAX

Окончание загрузки документа

Привычное использование:


Без jQuery:

Но стоит заметить, что в IE8 и ниже событие это не поддерживается, и если вам не посчастливилось их поддерживать, то рекомендую к использованию jquery.documentReady.js

Выборка элементов

Несколько примеров на jQuery:


Вполне спокойно заменяются на простом JS:


И да, первый элемент в jQuery можно было выбрать через first, т.е. $('.monsters:first')

Если вы поддерживаете старые браузеры и хотите использовать jQuery только для выборки элементов, то стоит заюзать Sizzle, но позволит использовать CSS3-селекторы для поиска элементов DOM.
Использование довольно простое: Sizzle('div.someClassName'), т.е. как и в jQuery, только помните - если элементов нет, то Sizzle вернёт пустой массив:



Добавление и удаление подписчиков на события:

jQuery предоставляет нам целый зоопарк методов, для подписки на события, некоторые из них являются упрощением вызова метода on:
  • one:
  • hover, bind/unbind, delegate/undelegate
Но в большинстве случаев вам нужно лишь навесить событие на элемент или контейнер элементов примерно так:


Как обойтись без jQuery:

Кода стало не на много больше, а работает и без жквери
Только стоит иметь ввиду разницу в контексте в методе onItemClick и всё, а разница получается совсем небольшая. Да - больше клавиш нажать нужно, но intellisence вам в помощь да сниппеты )

Манипуляция классами

Должно быть некоторые даже понятия не имеют как проверить наличие класса у элемента, кроме как проверять значение indexOf свойства className :)
Хотя жквери почти так и делает, см. ниже:


И потому предпочитают использовать jQuery, оборачивая this в jQuery и вызывая метод hasClass (см. работу с классами в jQuery по адресу https://github.com/jquery/jquery/blob/master/src/attributes/classes.js)

Несколько примеров работы с классами на jQuery:


Собственно да - ничего сложного, но не менее сложно использовать нативный JS:


Работа с атрибутами

jQuery:


Vanilla JS:


И вновь - всё просто, главное помнить, что jQuery attr вернёт undefined, а getAttribute - null

Управление контентом

jQuery имеет два удобных метода для установки или получения содержимого элемента:
  • text() - просто текста
  • html() - html-текста
Вместо этого спокойно можно использовать нативные свойства объектов:
  • textContent - возвращает текстовое содержимое элемента (только внимание - текст тегов style/script также вернётся, но вы же, надеюсь, не вставляете их в элементы, текст коих собираетесь считывать)
  • innerHTML - при чтении возвращает html-содержимое элемента, а при присвоении - устанавливает переданное значение

Добавление и удаление элементов

jQuery:

Простой JS:


Да, здесь немного неудобно, но в целом всё очень похоже и при достаточности и несложности простого js - не следует подключать jQuery только для манипуляций DOM, тем более, что для этого уже существует полно всяких шаблонизаторов

Проход по дереву DOM

jQuery.parent() заменяется element.parentNode
jQuery.prev() => element.previousElementSibling
jQuery.next() => element.nextElementSibling
jQuery.children() => element.children

Здесь всё просто, но сложнее с методом closest
Предлагается реализовывать свою функцию хождения по родительским элементам, что я, бывало, и делал:



Использование анимации

Безусловно, во времена, когда не было CSS3 анимационный функционал jQuery был очень удобен, сейчас же можно многие вещи делать на простом css, а через js просто добавлять/удалять нужные классы

На github есть замечательный проект Animate.css, с заранее подготовленными многими css-анимациями, которые, естественно, не обязательно все включать в проект

Вставляю оригинальный исходник, см. вкладку Result:


AJAX

Использование AJAX в jQuery довольно удобно, тем более, что есть множество упрощённых методов (get, post, getJSON), но опять таки - если нужен от jQuery только ajax, то не следует его подключать, а можно использовать классический XMLHttpRequest или один из множества готовых скриптов, реализующих упрощённый ajax
В примере ниже используются XMLHttpRequest и библиотека reqwest, которая очень даже напоминает jQuery в использовании )




Решил сделать эту заметку по мотивам http://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery/
+ к тому же чтобы не забыть, что уже доавно хотел записать. Я уже несколько месяцев почти не использую JS, и в будущем пока не предполагается, потому лишним не будет, да и пригодится может кому

Комментариев нет:

Отправить комментарий

Можете оставить свой комментарий