Статьи

Собственные JavaScript-эквиваленты методов jQuery: CSS и анимация

Декабрь 24, 2018

Вам действительно нужен JQuery? Иногда — особенно если вы хотите поддерживать IE6 / 7/8, используя jQuery 1.x. Однако современные браузерные API-интерфейсы предоставляют большую часть функциональности, которую мы считаем само собой разумеющейся в jQuery. В этой статье мы рассмотрим методы, связанные с CSS.

Класс Манипуляция

Одна из наиболее распространенных задач jQuery — применение класса к определенному элементу: 

$("#myelement").addClass("myclass");

Мы можем добиться того же в родном JavaScript: 

 document.getElementById("myelement").className = "myclass";

Это не совсем вся история:

  1. jQuery может применять класс к любому количеству узлов.
  2. jQuery добавляет новый класс к существующим определениям классов, но собственный пример перезапишет их.

В нативном JavaScript свойство className Поэтому нам нужна функция для репликации работы jQuery, например 

 function addClass(node, class) {
	if (!node.length) node = [node];
	for (var n = 0, m = node.length; n < m; n++) {
		if ((" " + node[n].className + " ").indexOf(" "+class+" ") >= 0) {
			node.className += " " + class;
		}
	}
}
// apply myclass to all nodes
addClass(document.getElementById("myelement"), "myclass");

Хотя этот код меньше и быстрее, чем jQuery, мы копируем то, что уже доступно в библиотеке — в этом нет особого смысла.

К счастью, современные браузеры теперь предлагают новое свойство classList, которое реализует DOMTokenList — массив, подобный массиву, всех классов, применяемых к узлу. Доступны следующие свойства:

  • длина — количество примененных имен классов
  • item ( index ) — имя класса по определенному индексу
  • Содержит ( класс ) — возвращает истину, если к узлу применен этот класс
  • add ( class ) — применяет новый класс к узлу
  • удалить ( класс ) — удаляет класс из узла
  • toggle ( class ) — удаляет или добавляет класс, если он применяется или не применяется соответственно

Мы можем использовать это в предпочтении к свойству clunkier className: 

 document.getElementById("myelement").classList.add("myclass");

classList поддерживается большинством браузеров, кроме IE9. К счастью, есть пара шайб, которые можно было бы условно загрузить в этот браузер.

Стиль манипуляции

JQuery предоставляет ряд методов для применения определенных стилей, например 

 $("#myelement").css({
	color: "#c00",
	backgroundColor: "#eee",
	width: "200px",
	height: "100px",
	borderColor: "#f00"
});

Нативный эквивалент: 

 var m = document.getElementById("myelement"), c = m.style;
c.color = "#c00";
c.backgroundColor = "#eee";
c.width = "200px";
c.height = "100px";
c.borderColor = "#f00";

Более 10000 итераций с использованием кэшированных селекторов, код jQuery был выполнен за 6 670 мс. Собственный JavaScript занял 330 мс — это было в 20 раз быстрее.

Конечно, вы не должны использовать либо, если значение не должно быть рассчитано каким-либо образом. Более эффективно определить класс стилей в CSS, а затем применить его имя к элементу.

Анимация

JQuery предлагает различные анимированные эффекты из коробки, включая скольжение и затухание. Нативный JavaScript может быть быстрее, но ничего из этого не имеет значения: CSS3-анимация мешает обоим .

Сначала я скептически относился к анимации CSS3. Он никогда не сможет обеспечить детальный контроль (например, остановить анимацию после N кадров) и нарушить поведенческие обязанности JavaScript. Однако преимущества более чем перевешивают недостатки:

  1. CSS3 анимация обрабатывается браузером; это всегда будет быстрее, чем выполнение JavaScript.
  2. CSS3 анимация проще в использовании и требует значительно меньше кода.
  3. CSS3 предлагает такие эффекты, как трехмерные преобразования, которые были бы непрактичны — если не невозможны — только в JavaScript.

IE9 и ниже не будут отображать эффекты, но они могут изящно ухудшаться, и IE10 должен стать доминирующей версией в течение нескольких месяцев .

Джинн CSS3 никогда не вернется в лампу. Если вы все еще используете jQuery или JavaScript для анимации DOM в современных браузерах, вы, вероятно, тратите свое время.

Тем не менее, JavaScript может быть использован для реагирования на CSS3-анимации, когда они запускаются, останавливаются или переходят к следующей итерации, используя animationstartanimationendanimationiteration Для получения дополнительной информации см. Как захватить события анимации CSS3 в JavaScript .

В моей следующей статье мы закончим серию, рассматривая события, Ajax и вспомогательные функции.

37
Share: