Lose jQuery Bloat — манипуляция DOM с NodeList.js

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

Вот несколько причин, почему:

1. JQuery включает в себя множество функций, которые вам не нужны или не используются (поэтому вес не требуется).
2. JQuery это слишком много вещей, чтобы слишком много людей. Часто небольшие библиотеки могут лучше выполнять определенные задачи.
3. С точки зрения манипулирования DOM, браузерные API теперь могут делать большую часть того, что может делать jQuery.
4. API браузеров теперь более синхронизированы, например, используя addEventListener вместо attatchEvent .

Так в чем проблема?

Проблема в том, что манипулирование DOM с использованием ванильного (или простого) JavaScript может быть проблемой по сравнению с jQuery. Это потому, что вам нужно читать и писать более избыточный код и иметь дело с бесполезным NodeList браузера .

Сначала давайте посмотрим, что такое NodeList в соответствии с MDN:

Объекты NodeList являются коллекциями узлов, таких как возвращаемые Node.childNodes и методом document.querySelectorAll.

И иногда есть живые списки NodeLists (что может сбить с толку):

В некоторых случаях NodeList является живой коллекцией, что означает, что изменения в DOM отражаются в коллекции. Например, Node.childNodes является живым.

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

Также браузер не предоставляет никаких полезных методов для манипулирования этими объектами NodeList .

Например, к сожалению, невозможно forEach узлы с помощью forEach :

 var nodes = document.querySelectorAll('div'); nodes.forEach(function(node) { // do something }); // Error: nodes.forEach is not a function 

Итак, вы должны сделать:

 var nodes = document.querySelectorAll('div'); for(var i = 0, l = nodes.length; i < l; i++) { var node = nodes[i]; // do something } 

Или даже остались с использованием «взломать»:

 [].forEach.call(document.querySelectorAll('div'), function(node) { // do something }); 

Родной NodeList браузера NodeList только один метод: item . Это возвращает узел из NodeList по индексу. Это совершенно бесполезно, когда мы можем получить доступ к этому узлу, как если бы мы использовали массив (используя array[index] ):

 var nodes = document.querySelectorAll('div'); nodes.item(0) === nodes[0]; // true 

Вот тут- то и появляется NodeList.js — чтобы упростить манипулирование DOM с помощью нативных API браузера, как и с jQuery, но с минимальными 4k.

 $$(selector); // returns my NodeList 

 <button></button> <button></button> <button></button> 

 var buttons = document.querySelectorAll('button'); // returns browser's useless NodeList for(var i = 0, l = buttons.length; i < l; i++) { buttons[i].textContent = 'Click Me'; } 

 $('button').text('Click Me'); 

 $$('button').textContent = 'Click Me'; 

 $$('button').set('textContent', 'Click Me'); 

 var buttons = document.querySelectorAll('button'); // returns browser's useless NodeList for(var i = 0, l = buttons.length; i < l; i++) { buttons[i].addEventListener('click', function() { this.classList.add('clicked'); }); } 

 $('button').on('click', function() { $(this).addClass('click'); // or mix jQuery with native using `classList`: this.classList.add('clicked'); }); 

 $$('button').addEventListener('click', function() { this.classList.add('clicked'); }); 

 $$.NL.on = $$.NL.addEventListener; $$('button').on('click', function() { this.classList.add('clicked'); }); 

 $$.NL.myNewMethod = function() { // loop through each node with a for loop or use forEach: this.forEach(function(element, index, nodeList) {...} // where `this` is the NodeList being manipulated } 

 var nodes = $$('body'); nodes.push(document.documentElement); nodes.push(1); // Uncaught Error: Passed arguments must be a Node 

 $$('a').get('href'); // returns array of href values 

 $$('a').set('href', 'https://sitepoint.com/'); 

 $$('button').textContent = 'Click Me'; $$('button').set('textContent', 'Click Me'); // returns NodeList so you can method chain 

 $$('button').set({ textContent: 'Click Me', onclick: function() {...} }); 

 $$('button').style; // this returns an `Array` of `CSSStyleDeclaration` $$('button').style.set('color', 'white'); $$('button').style.set({ color: 'white', background: 'lightblue' }); 

 $$('video').call('pause'); // returns NodeList back to allow Method Chaining 

 $$('button').item(1); // returns NodeList containing the single Node at index 1 

 var btns = $$('button'); btns.style.owner === btns; // true