Nine Pounds of Mayonnaise

    balajs

    1.0.10 • Public • Published

    bala.js npm version

    A function for elements selection in 251 ASCII chars (less than ¼ KB)!

    bala.js is a function that allows you to select elements on a web page and get rid of jQuery in most of cases. Think of it as of document.querySelectorAll on steroids.

    const buttons = $('.button');

    You can use it as a global variable

    <script>
    $=((a,b,c)=>(c=(d,e,f=Object.create(c.fn))=>(d&&f.push(...(d.dispatchEvent?[d]:""+d===d?/</.test(d)?((e=a.createElement(e)).innerHTML=d,e.children):e?(e=c(e)[0])?e[b](d):f:a[b](d):d)),f),c.fn=[],c.one=(a,b)=>c(a,b)[0],c))(document,"querySelectorAll");
    </script> 

    If you don't want to use $ variable just rename it.

    foo=...
    // instead of
    $=...

    And you can use it as a local variable in a script you make

    ((win, $) => {
        // your code starts here
        const divs = $('div');
        console.log(divs);
        // your code ends here
    })(window, ((a,b,c)=>(c=(d,e,f=Object.create(c.fn))=>(d&&f.push(...(d.dispatchEvent?[d]:""+d===d?/</.test(d)?((e=a.createElement(e)).innerHTML=d,e.children):e?(e=c(e)[0])?e[b](d):f:a[b](d):d)),f),c.fn=[],c.one=(a,b)=>c(a,b)[0],c))(document,"querySelectorAll"));

    The function is also published on NPM

    npm install balajs
    

    bala.js is inherited from Array.prototype which means it has the same set of methods as the native array has.

    More features?

    Various types support

    bala accepts many kinds of first argument and converts everything into bala instance

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

    That means when you make your own library (VanillaJS "plugin") you can use bala in case if you don't know which arg type will be passed by a programmer.

    const myCoolLibrary = (el) => {
      el = $(el);
      // ...
    };

    $.one

    Getting zero-indexed element in DOM libraries is annoying. bala has one little static method called $.one which selects only one element.

    $.one('.button');
    //vs
    $('.button')[0];

    This function is also created to get rid of extra variables (usually DOM libraries make two vars: $$ and $). It means you can import bala nicely via module system.

    AMD

    require(['path/to/bala/umd/bala.umd.js'], ($) => {
        // ...
    });

    CommonJS

    const $ = require('path/to/bala/bala.umd.js');

    CommonJS + NPM

    const $ = require('balajs');

    ECMAScript 2015

    import $ from 'balajs';

    Find elements inside another element

    const elements = $('.my-selector', someParent);
    // or
    const element = $.one('.my-selector', someParent);

    Parse HTML

    Simple parsing.

    const div = $('<div><span class="yeah"></span></div>');

    Contextual HTML parsing

    In case if you need to parse HTML which contains contextual elements (td, tr, option) you can pass a context tag name as a second argument.

    const cells = $('<td>foo</td><td>bar</td>', 'tr')

    Plugins

    You can extend bala as easily as you do it with jQuery or Zepto. Use fn property to define your own plugin.

    $.fn.toggle = function (boolean) {
        for(let node of this) {
            node.hidden = boolean;
        }
    };
     
    $('.button').toggle(false); // hides all buttons

    I need more examples!

    Add style

    for(let element of $('.my-selector')) {
        element.style.color = 'red';
    }

    In case if you need to set style only for one element you can use $.one.

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

    Events delegation

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

    Or

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

    Elements removal

    for(let element of $('.my-selector')) {
        element.remove();
    }

    Or

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

    Animations

    Use element.animate for smooth GPU-accelerated animations. You may need polyfill for Web Animations API.

    $.one('.my-selector').animate({
        opacity: [0.5, 1],
        transform: ['scale(0.5)', 'scale(1)'],
    }, {
        direction: 'alternate',
        duration: 500,
        iterations: Infinity,
    });

    Do you still need jQuery?

    Install

    npm i balajs

    DownloadsWeekly Downloads

    3,441

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    17.7 kB

    Total Files

    12

    Last publish

    Collaborators

    • finom