jQueryの各種メソッドをes6で再現する

jQueryの各種メソッドをes6で再現する:

onメソッドの代替

jQuery

var $btnElements = $('.btn'); 
 
$btnElements.on('mouseenter mouseleave', function (event) { 
  var $this = $(this); 
  if (event.type === 'mouseenter') { 
    $this.addClass('hover'); 
  } else { 
    $this.removeClass('hover'); 
  } 
}); 

es6

// addEventListenerMulti の定義 
Object.prototype.addEventListenerMulti = function addEventListenerMulti (events, callback) { 
  let target = (/(NodeList|HTMLCollection)/).test(Object.prototype.toString.call(this)) ? this : [this]; 
  events.split(' ').forEach(event => { 
    Array.prototype.forEach.call( 
      target, 
      elm => elm.addEventListener(event, event => callback(event)), 
    ); 
  }); 
}; 
 
const btnElements = document.querySelectorAll('.btn'); 
 
btnElements.addEventListenerMulti('mouseenter mouseleave', event => { 
  const target = event.target; 
  if (event.type === 'mouseenter') { 
    target.classList.add('hover'); 
  } else { 
    target.classList.remove('hover'); 
  } 
}); 

onメソッドの代替としてaddEventListenerMultiを定義。

複数のイベント指定に対応し、NodeListやHTMLCollectionが対象でもこれを処理する。

もちろんgetElementsById()などの直接指定にも対応する。

val()の代替

jQuery

var rdElements = $('[name=sample]'); 
console.log(rdElements.val()); 

es6

// checkValを定義 
Object.prototype.checkVal = function checkVal() { 
  let result = Array.prototype.filter.call( 
    this, elm => elm.checked, 
  ); 
  if (this.item(0).type === 'radio') { 
    result = result[0].value; 
  } else if (this.item(0).type === 'checkbox') { 
    result = result.map(elm => elm.value); 
  } 
  return result; 
}; 
 
const rdElements = document.getElementsByName('sample'); 
console.log(rdElements.checkVal()); 

input[type='radio']の場合チェックされたvalueを、
input[type='check']の場合チェックされたvalueの配列を返す。