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

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

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

Вступление

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

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

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.

Модерн

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

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

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

Наследие

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

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

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

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

Модерн

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

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

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

Наследие

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

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

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

Модерн

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

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

Наследие

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

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

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

Модерн

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

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

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

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);

Наследие

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 для модификации имени класса для набора элементов.

Модерн

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

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

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

Наследие

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 возвращает элемент, который следует непосредственно за текущим элементом наборе.

Модерн

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

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

Наследие

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

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

7 -$('<div id=box></div>').appendTo('body');

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

Модерн

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

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

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

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

8 – $(document).ready(fn)

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

Модерн

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

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

Наследие

// 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');

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

Модерн

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

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

Наследие

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

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

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

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

10 – $()

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

Модерн

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

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

Наследие

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в старых браузерах.

• Комментарии