Для получения полного доступа
зарегистрируйтесь

Balalaika.js: альтернатива jQuery в 975 байт


В этой простой библитеке доступны следующие методы:

onoffisextendDOM-ready

Если перед вами стоит простая задача, где всё, что нужно — это манипуляция с dom-элементами, нет смысла подключать jQuery.

Пара примеров того, как использовать эту библиотеку:

$(function () {
    $('.btn').on('click', function () {
        alert('I need my balalaika');
    });
});

beab4ff84a9ea9327bd0cc73dee7df86.gif

Т.к Balalaika.js наследуется от Array.prototype, вам доступны всего его методы:

$(function () {
    $('.btn').on('click', function () {
        $('.list .item').forEach(function(el) {
            console.log(el.innerHTML);
        });
    });
});

425391cebc5984ec9c0da47676e8899b.gif

Полный список методов:

  • concat
  • join
  • pop
  • push
  • reverse
  • shift
  • slice
  • sort
  • splice
  • toString
  • unshift
  • every
  • filter
  • forEach
  • indexOf
  • lastIndexOf
  • map
  • some

Это всё хорошо, но если нам необходимо добавить класс к нужному элементу? Вы можете рассширить библиотеку, например, вот так можно добавить метод, который добавляет класс элементу:

$.fn.addClass = function (className) {
    this.forEach(function (item) {
        var classList = item.classList;
        classList.add.apply(classList, className.split(/\s/));
    });
    return this;
};

Используем так:

$('.btn').addClass('light');

d377d8c8f67dbf4a616d723a45329ce6.gif

Более полную документацию, вы можете получить тут — https://github.com/finom/balalaika

$=function(p,e,l,h,q,n,k,b,f,g,d,c){c=function(a,b){return new c.i(a,b)};c.i=function(a,m){l.push.apply(this,a?a.nodeType||a==p?[a]:""+a===a?/</.test(a)?((b=e.createElement(m||"q")).innerHTML=a,b.children):(m&&c(m)[0]||e).querySelectorAll(a):/f/.test(typeof a)?/c/.test(e.readyState)?a():c(e).on("DOMContentLoaded",a):a:l)};c.i[d="prototype"]=(c.extend=function(a){g=arguments;for(b=1;b<g.length;b++)if(d=g[b])for(f in d)a[f]=d[f];return a})(c.fn=c[d]=l,{on:function(a,c){a=a.split(h);this.map(function(d){(h[b=a[0]+(d.b$=d.b$||++q)]=h[b]||[]).push([c,a[1]]);d["add"+n](a[0],c)});return this},off:function(a,c){a=a.split(h);d="remove"+n;this.map(function(e){if(b=(g=h[a[0]+e.b$])&&g.length)for(;f=g[--b];)c&&c!=f[0]||a[1]&&a[1]!=f[1]||(e[d](a[0],f[0]),g.splice(b,1));else!a[1]&&e[d](a[0],c)});return this},is:function(a){b=this[0];return(b.matches||b["webkit"+k]||b["moz"+k]||b["ms"+k]||b["o"+k]).call(b,a)}});return c}(window,document,[],/\.(.+)/,0,"EventListener","MatchesSelector");

Чтобы увидеть комментарии, нужно быть участником сообщества

Регистрация