Clever Geek Handbook

bala.js-400文字未満のコードのjQueryキラー*

*これは冗談です。



画像

（写真はインターネット上のどこかで借りたものです）



[ リポジトリ ]



みなさんこんにちは。



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


More articles:


All Articles