bala.js - jQuery killer in less than 400 characters of code *

* This is a joke.


(picture borrowed somewhere on the Internet)

[ Repository ]
')
Hello.

The days of mandatory support for 6, 7, 8 Donkeys and the inevitable use of jQuery have long gone, the DOM API is gradually being brought to a single form, but I still often see on the Internet the assertions that VanillaJS is a long sausage.

Like, why should I write like this:

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. ~400 , .

?

, , (, appendChild). .

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

, $.one, , , null

//     ,      
$.one('.selector').appendChild(node); 

$.one, , : ( : $$ $) .

import $ from 'balajs';

var $ = require('balajs');

?

, : , , , 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

    ...
    <script src="app.js"></script>
  </body>
</html>

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

, , - ( ), , td tr, tr tbody, option select.

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

bala.js jQuery- .

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

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

?

<script>
$=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?/</.test(a)?((g=d.createElement(b||"q")).innerHTML=a,g.children):(b&&c(b)[0]||d).querySelectorAll(a):/f/.test(typeof a)?/c/.test(d.readyState)?a():d.addEventListener("DOMContentLoaded",a):a:e)};c.fn=f.prototype=e;c.one=function(a,b){return c(a,b)[0]||null};return c}(document,[]);
</script>

<script>
    $(function() {
        alert($('.my-selector').length);
    });
</script>

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?/</.test(a)?((g=d.createElement(b||"q")).innerHTML=a,g.children):(b&&c(b)[0]||d).querySelectorAll(a):/f/.test(typeof a)?/c/.test(d.readyState)?a():d.addEventListener("DOMContentLoaded",a):a:e)};c.fn=f.prototype=e;c.one=function(a,b){return c(a,b)[0]||null};return c}(document,[]));

bala.js NPM

npm install --save balajs

True-way

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

old-school-way

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

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

, :

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

closest while.

$('.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();

DOM4 element.remove element.closest.

( , , bala.js. .)

jQuery?

, .



Web Aimations API JS ( , jQuery, GPU ).

//     
$.one('.my-selector').animate([
  {transform: 'translate(' + snowLeft + 'px, -100%)'},
  {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], {
  duration: 1500,
  iterations: 10,
  delay: 300
});

, ( , Web Animations API).

Ajax
. Fetch API XMLHttpRequest.

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

Fetch API.

jQuery? ?

, Internet Explorer Webkit-based . , Internet Explorer, , , , Blink V8, 11; …

, : polyfill.io. User-Agent . chico RReverser .

- , , , , jQuery ba.js.