10 методов для замены jQuery чистым JavaScript в проектах

В настоящий момент ситуация такова, что все больше и больше разработчиков приходят в мир JavaScript через ворота jQuery. И новички являются счастливчиками. Они получают доступ к изобилию новых API JavaScript, которые делают процесс работы с DOM существенно легче. Но, к сожалению, они не имеют представления об этих API! В данном уроке мы рассмотрим несколько типовых задач, которые решаются средствами jQuery, и преобразуем решения в обычный JavaScript. 

В уроке будут приводиться два варианта решения - модерн и наследие. Решения типа "модерн" представляют собой новейшие методы, а "наследие" демонстрирует то, что будет нравиться старым браузерам. Выбор варианта зависит от разработчика веб проекта и целевой аудитории.

Вступление

Обратите внимание, что некоторые варианты из набора "наследие" в данной статье используют простую, кросс-браузерную функцию addEvent. Данная функция нормализует два варианта - рекомендованную W3C модель событий addEventListener и вариант для Internet Explorer attachEvent.

Когда используется функция addEvent(els, event, handler) в коде, она представляет собой следующий код:

Code
var addEvent = (function () {
  var filter = function(el, type, fn) {
  for ( var i = 0, len = el.length; i < len; i++ ) {
  addEvent(el[i], type, fn);
  }
  };
  if ( document.addEventListener ) {
  return function (el, type, fn) {
  if ( el && el.nodeName || el === window ) {
  el.addEventListener(type, fn, false);
  } else if (el && el.length) {
  filter(el, type, fn);
  }
  };
  }
   
  return function (el, type, fn) {
  if ( el && el.nodeName || el === window ) {
  el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
  } else if ( el && el.length ) {
  filter(el, type, fn);
  }
  };
})();
   
// Использование
addEvent( document.getElementsByTagName('a'), 'click', fn);
  


1 – $('#container');

Данная функция обращается к DOM для получения элемента с идентификатором container и создает новый объект jQuery.
Модерн

Code
var container = document.querySelector('#container');


querySelector является частью API Selectors, которая обеспечивает возможность обращения к DOM с помощью селекторов CSS.

Данный метод возвращает первый элемент, который соответствует переданному селектору.
Наследие

Code
var container = document.getElementById('container');


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

2 – $('#container').find('li');

В данном случае мы получаем любое количество пунктов списка, которые являются потомками элемента #container.
Модерн

Code
var lis = document.querySelectorAll('#container li');


querySelectorAll возвращает все элементы, которые соответствуют определенному CSS селектору.

Ограничения. Хотя все браузеры поддерживают API Selectors, передача определенных селекторов CSS ограничивается возможностью браузера. Например: Internet Explorer 8 поддерживает только селекторы CSS 2.1.
Наследие

Code
var lis = document.getElementById('container').getElementsByTagName('li');


3 – $('a').on('click', fn);

В данном примере обработчик события click привязывается ко всем ссылкам на странице.
Модерн

Code
[].forEach.call( document.querySelectorAll('a'), function(el) {
  // на ссылку нажали
});


Выше приведенный код выглядит ужасно, но он не так уж и плох. Так как querySelectorAll возвращает NodeList, а не массив, то мы не можем непосредственно использовать метод, например, forEach. Данный момент обходится вызовом forEach для объекта Array и передачей результата querySelectorAll как this.
Наследие

Code
var anchors = document.getElementsbyTagName('a');
addEvent(anchors[i], 'click', fn);


4 – $('ul').on('click', 'a', fn);


Данный пример немного отличается. Код jQuery используется для делегирования события. Обработчик click используется для всех неупорядоченных списков. Но возвратная функция будет запускаться только целью (где пользователь нажимает кнопку) является ссылка.
Модерн

Code
document.addEventListener('click', function(e) {
  if ( e.target.matchesSelector('ul a') ) {
  // Обработка
  }
}, false);


ехнически, данный метод JavaScript не является полным соответствием примеру jQuery. Он привязывает обработчик события непосредственно к document. А затем используется метод matchesSelector для определения того факта, что цель (узель, на котором произошло нажатие кнопки) соответствует указанному селектору. Таким образом, мы привязываем единственный обработчик события.

Обратите внимание, что на момент написания урока все браузеры реализовывали matchesSelector с использованием префиксов: mozMatchesSelector, webkitMatchesSelector, и так далее. Для нормализации метода, вы можете написать:

Code
var matches;
   
(function(doc) {
  matches =
  doc.matchesSelector ||
  doc.webkitMatchesSelector ||
  doc.mozMatchesSelector ||
  doc.oMatchesSelector ||
  doc.msMatchesSelector;
})(document.documentElement);
   
document.addEventListener('click', function(e) {
  if ( matches.call( e.target, 'ul a') ) {
  // Обработка
  }
}, false);


Наследие

Code
var uls = document.getElementsByTagName('ul');
   
addEvent(uls, 'click', function() {
  var target = e.target || e.srcElement;
  if ( target && target.nodeName === 'A' ) {
  // Обработка
  }
});


Для обеспечения обратной совместимости мы проверяем, что свойство nodeName (имя целевого элемента) равно нашему запросу. Обратите внимание на факт, что старые версии Internet Explorer иногда играют своими собственными правилами. Вы не захотите получать доступ к цели непосредственно из объекта event. Зазочется использовать event.srcElement.

5 - $('#box').addClass('wrap');

jQuery обеспечивает удобный API для модификации имени класса для набора элементов.
Модерн

Code
document.querySelector('#box').classList.add('wrap');


Новая техника использует новый API classList для добавления, удаления и переключения класса (add, remove, и toggle).

Code
var container = document.querySelector('#box');
   
container.classList.add('wrap');
container.classList.remove('wrap');
container.classList.toggle('wrap');


Наследие

Code
box = document.getElementById('box'),
   
  hasClass = function (el, cl) {
  var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
  return !!el.className.match(regex);
  },
   
  addClass = function (el, cl) {
  el.className += ' ' + cl;
  },
   
  removeClass = function (el, cl) {
  var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
  el.className = el.className.replace(regex, ' ');
  },
   
  toggleClass = function (el, cl) {
  hasClass(el, cl) ? removeClass(el, cl) : addClass(el, cl);
   
  };
   
addClass(box, 'drago');
removeClass(box, 'drago');
toggleClass(box, 'drago'); // Если элемент не имеет класса 'drago', добавляем его.


Обратная совместимость требует достаточно много действий.

6 - $('#list').next();


Метод jQuery next возвращает элемент, который следует непосредственно за текущим элементом наборе.
Модерн

Code
var next = document.querySelector('#list').nextElementSibling; // IE9


nextElementSibling ссылается на следующий узел за элементом. К сожалению, Internet Explorer 8 и старше не поддерживают его.
Наследие

Code
var list = document.getElementById('list'),
  next = list.nextSibling;
   
// Нам нужен следующий элемент, а не текст.
while ( next.nodeType > 1 ) next = next.nextSibling;


Есть пара способов для реализации задачи. В данном примере мы определяем тип узла nodeType, который следует на определенным элементом. Это может быть текст, элемент или, даже, комментарий. Так как нам нужен именно следующий элемент, то мы ищем nodeType равный 1. Если next.nodeType возвращает номер больше, чем 1, то мы пропускаем узел, так как он, вероятно, является текстом.

7 - $('
').appendTo('body');


В дополнение к запросам DOM jQuery также предлагаем возможность создавать и вставлять элементы.
Модерн

Code
var div = document.createElement('div');
div.id = 'box';
document.body.appendChild(div);


В данном примере нет ничего нового. Таким способом выполнялся процесс создания и вставки элемента в структуру DOM очень давно.

Вероятно, что вам понадобится добавить содержание в элемент. В данном случае вы можете использовать innerHTML или createTextNode.

Code
div.appendChild( document.createTextNode('wacka wacka') );
   
// или
   
div.innerHTML = 'wacka wacka';


8 – $(document).ready(fn)

Метод jQuery document.ready невероятно удобен. Он позволяет нам выполнять код сразу по завершению загрузки DOM.
Модерн

Code
document.addEventListener('DOMContentLoaded', function() {
  // Наш код
});


Стандартная часть HTML5, событие DOMContentLoaded генерируется после завершения анализа документа.
Наследие

Code
// http://dustindiaz.com/smallest-domready-ever
function ready(cb) {
  /in/.test(document.readyState) // in = loadINg
  ? setTimeout('ready('+cb+')', 9)
  : cb();
}
   
ready(function() {
  // Получаем нужное из DOM
});


Решение для обратной совместимости - каждые 9 миллисекунд мы проверяем значение document.readyState. Если возвращается "loading”, то документ все еще не загружен полностью (/in/.test()). Как только значение document.readyState будет равно "complete,” выполнится возвратная функция.

9 – $('.box').css('color', 'red');

Если возможно, всегда добавляйте класс к элементу, когда нужно задать ему определенный стиль. Однако, иногда стили задаются динамически, и приходится вставлять атрибуты.
Модерн

Code
[].forEach.call( document.querySelectorAll('.box'), function(el) {
  el.style.color = 'red'; // или добавляем класс
});


Снова мы используем технику [].forEach.call() для фильтрации всех элементов с классом box и придания им красного цвета с помощью объекта style.
Наследие

Code
var box = document.getElementsByClassName('box'), // смотрите пример 10 ниже для кросс-браузерного решения
  i = box.length;
   
while ( i-- > 0 && (box[i].style.color = 'red') );


Мы используем трюк с циклом while. По существу, мы имитируем:

Code
var i = 0, len;
   
for ( len = box.length; i < len; i++ ) {
  box[i].style.color = 'red';
}


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

10 – $()


Определенно, цель полностью заменить jQuery API выходит за рамки данного урока. Но часто в проектах функции $ или $$ используются для короткой записи получения одного или нескольких элементов из DOM.
Модерн

Code
var $ = function(el) {
  return document.querySelectorAll(el);
};
// Использование = $('.box');


Это просто односимвольный указатель на document.querySelector. Сохраняет время!
Наследие

Code
if ( !document.getElementsByClassName ) {
  document.getElementsByClassName = function(cl, tag) {
  var els, matches = [],
  i = 0, len,
  regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
   
  // Если не задано имен тегов,
  // мы будем получать все элементы из DOM  
  els = document.getElementsByTagName(tag || "*");
  if ( !els[0] ) return false;
   
  for ( len = els.length; i < len; i++ ) {
  if ( els[i].className.match(regex) ) {
  matches.push( els[i]);
  }
  }
  return matches; // массив элементов, которые имеют определённое имя класса
  };
}
   
// Очень простая реализация. Проверяем id, класс и имя тега.
var $ = function(el, tag) {
  var firstChar = el.charAt(0);
   
  if ( document.querySelectorAll ) return document.querySelectorAll(el);
   
  switch ( firstChar ) {
  case "#":
  return document.getElementById( el.slice(1) );
  case ".":
  return document.getElementsByClassName( el.slice(1), tag );
  default:
  return document.getElementsByTagName(el);
  }
};
   
// Использование
$('#container');
$('.box'); // Любые элементы с классом box
$('.box', 'div'); // Элементы div с классом box
$('p'); // Получаем все элементы p


К сожалению, метод обратной достаточно большой. В данном случае лучше использовать библиотеку. jQuery оптимизирован для работы с DOM! Пример выше будет работать, но он не поддерживает сложные селекторы CSSв старых браузерах.

  • FalleN

  • 2734

  • 1

  • 0

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!