bala.js — убийца jQuery в 408 символах кода *22.12.2015 23:18

* Это шутка.

(картинка позаимствована где-то в интернете)

[ Репозиторий ]

Всем привет.

Уже давно прошли времена обязательной поддержки 6, 7, 8 Ослов и неизбежного использования jQuery, DOM API постепенно приводится к единому виду, но я всё так же часто встречаю на просторах интернета утверждения о том, что VanillaJS — это длинная колбаса.

Мол, зачем мне писать вот так:

document.querySelector('.selector');

Если я могу написать вот так:

$('.selector');

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

// selects one node matched given selector
function $(selector, ctx) {
        return (ctx || document).querySelector(selector);
}

// selects all nodes matched given selector
function $$(selector, ctx) {
        return [].slice.call((ctx || document).querySelectorAll(selector));
}

Это касается крошечных скриптов. Для крупных проектов, конечно, нужно юзать какой-нибудь фреймворк, который берет на себя все манипуляции с DOM.
Но я совершенно несогласен с тем, что для обычной выборки нужно подклюать что-то большое (Zepto, jQuery).

«Движение» против использования jQuery и за использование нативных методов DOM существует уже несколько лет. Вспомним два самых известных сайта youmightnotneedjquery и vanilla-js. Оба сразу отталкивают новичка устаревшими альтернативами. vanilla-js показывает ужасные примеры использования AJAX и анимаций, второй грешит только беспощадным XMLHttpRequest. Оба сайта ни слова не говорят о Fetch API.

Хотя, если присмотреться, и с анимациями у второго не всё гладко. В качестве альтернативы они предлагают воспользоваться transition, хотя CSS Animations существуют давно и, самое главное, Web Animations JavaScript API уже имплементирован в Хроме и Файерфоксе и неплохо полифилится для других браузеров.

***

Для того, чтоб получить небольшую DOM библиотеку с минимальным необходимым набором методов, я когда-то сделал библиотеку, с шуточным названием balalaika.js. Напомню, балалайка — jQuery-подобная микробиблиотека, с очень небольшим набором методов: on, off, is, extend.

Но и она устарела. Метод is потерял свою актуальность, так как метод matches стал кроссбраузерным. extend самоуничтожился, так как в JavaScript пришел Object.assign, on и off просто-напросто не нужны, по причине, озвученной выше: фреймворки.

Я решил немного обновить эту библиотеку, выпилив все методы и оставив только функциональность, отвечающу за выборку элементов. Так как это изменение полностью ломает совместимость с балалайкой, было решено вынести её в отдельный проект с другим названием «bala» — обрубленное старое название (как и библиотека), — «пуля» по-испански.

Кроме всего прочего, целью bala.js (приписывать к названию букву «е» строго запрещается, по крайней мере, при детях) является улучшение того, что сейчас иногда называют «плагинами к VanillaJS». Я очень люблю библиотеки без зависимостей, но почти все они предлагают инициализировать скрипт с передачей DOM Element.

myAwesomeLib(document.getElementByID('block'));

В таких случаях мне бы хотелось иметь больше возможностей: передать селектор, передать NodeList или, на худой конец, инстанс jQuery. Подключив к такому инструменту 420 символов кода, инициализация скрипта будет более гибкой.

Что добавлено?

Крайне часто, при выборке, требуется только одна нода (например, для вызова appendChild). Но каждый раз запрашивать нулевой элемент выборки никому не нравится.

$('.selector')[0].appendChild(node);

Поэтому, была добавлена симпатичная альтернатива в виде статичного метода $.one, который работает в точности так же, как и основная функция, но возвращает нулевой элемент или null

// всего одним символом  больше, а выглядит на тысячу символов лучше
$.one('.selector').appendChild(node); 

$.one, кроме всего, служит двум целям: не создавать дополнительную переменную (в таких библиотеках их обычно две: $$ и $) и оставить возможность симпатичного импорта.

import $ from 'bala';

var $ = require('bala');

Что осталось от Балалайки?

Возможность передать в функцию всё, что угодно: селектор, узел, массив, NodeList, jQuery и любой другой array-like объект

$('.one, two')
$(document.querySelectorAll('.selector'));
$(document.body);
$(element.children);
$(jQuery('.selector'));
$([document.querySelector('.one'), document.querySelector('.two')])

Поиск элемента в другом элементе

var elements = $('.my-selector', element);

DOM ready

$(function() {
  alert('DOM is ready');
});

Не забывайте, что вместо использования DOM ready можно просто указать скрипты в конце тега body

    ...
    
  

Парсинг

var div = $('
');

Парсинг контекстных элементов
Для персинга элементов, требующих контекст, нужно передать имя тега-родителя (он создается динамически), например, для парсинга td нужно передать tr, для парсинга tr нужно передать tbody, для парсинга option нужно передать select.

var cells = $('foobar', 'tr');

Плагины
Расширять bala.js можнно как и любую другую jQuery-подобную библиотеку.

$.fn.toggle = function(boolean) {
  this.forEach(function(item) {
    item.hidden = boolean;
  });
};

$('.button').toggle(false); // hides all buttons

Как использовать?

Как глобальную переменную на странице

Как локальную переменную в IIFE

(function(win, $) {
    // your code starts here
    $(function() {
        alert($('.my-selector').length);
    });
  // your code ends here
})(window, function(d,e,c,f,g){c=function(a,b){return new f(a,b)};f=function(a,b){e.push.apply(this,a?a.nodeType||a==window?[a]:""+a===a?/


Можно установить bala.js с помощью NPM

npm install --save balajs

for(let element of $('.button')) {
  console.log(element);
}

$('.button').forEach(function(element) {
  console.log(element);
});

$('.my-selector').forEach(function(element) {
    element.style.color = 'red';
});

$.one('.my-selector').style.color = 'red';

$('.my-selector').forEach(function(element) {
  element.addEventListener('click', function(evt) {
    if(this.contains(evt.target.closest('.delegated-selector'))) {
      alert('yep!');
    }
  });
});

$.one('.my-selector').addEventListener('click', function(evt) {
  if(this.contains(evt.target.closest('.delegated-selector'))) {
    alert('yep!');
  }
});

$('.my-selector').forEach(function(element) {
    element.remove();
});

$.one('.my-selector').remove();

// код позаимствован из гугловской статьи
$.one('.my-selector').animate([
  {transform: 'translate(' + snowLeft + 'px, -100%)'},
  {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], {
  duration: 1500,
  iterations: 10,
  delay: 300
});

fetch('user.json')
  .then(function(response) {
    return response.json();
   })
  .then(function(user) {
    console.log(user);
  })
  .catch(alert);