Image for Jak zastąpić jQuery czystym JavaScript?
29 sierpnia 2015

Jak zastąpić jQuery czystym JavaScript?

Czas czytania:

Jak zastąpić jQuery czystym JavaScript? GOGO.Developer

Biblioteka jQuery znacznie ułatwia programowanie w języku JavaScript, dzięki czemu zawdzięcza swoją popularność. Jednakże dzieje się to kosztem wydajności aplikacji. Pomijając już potrzebę pobierania przez przeglądarkę samej biblioteki, to wykonanie kodu jQuery zajmuje znacznie więcej czasu, niż kodu, dającego taki sam rezultat, napisanego w czystym JavaScript.

Wybór dodatkowej biblioteki często spowodowany jest również tym, że kod jQuery, w przeciwieństwie do czystego JS, w każdej przeglądarce jest interpretowany dokładnie w ten sam sposób. W rzeczywistości, dla nowoczesnych przeglądarek powyżej IE8, w niewiele bardziej skomplikowany sposób można uzyskać efekt taki jak w jQuery, za pomocą samego JS.

Poniżej posłużę się przykładami ze strony youmightnotneedjquery.com opracowanymi przez @zackbloom i @adamfschwartz w HubSpot:

AJAX

JSON

jQuery

$.getJSON('/my/url', function(data) {

});

IE9+

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var data = JSON.parse(request.responseText);
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

POST

jQuery

$.ajax({
  type: 'POST',
  url: '/my/url',
  data: data
});

IE9+

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

Request

jQuery

$.ajax({
  type: 'GET',
  url: '/my/url',
  success: function(resp) {

  },
  error: function() {

  }
});

IE9+

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var resp = request.responseText;
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

Efekty

Fade In

jQuery

$(el).fadeIn();

IE9+

function fadeIn(el) {
  el.style.opacity = 0;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
    }
  };

  tick();
}

fadeIn(el);

Hide

jQuery

$(el).hide();

IE9+

el.style.display = 'none';

Show

jQuery

$(el).show();

IE9+

el.style.display = '';

Elementy

AddClass

jQuery

$(el).addClass(className);

IE9+

if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;

After

jQuery

$(el).after(htmlString);

IE9+

el.insertAdjacentHTML('afterend', htmlString);

Append

jQuery

$(parent).append(el);

IE9+

parent.appendChild(el);

Before

jQuery

$(el).before(htmlString);

IE9+

el.insertAdjacentHTML('beforebegin', htmlString);

Children

jQuery

$(el).children();

IE9+

el.children

Clone

jQuery

$(el).clone();

IE9+

el.cloneNode(true);

Contains

jQuery

$.contains(el, child);

IE9+

el !== child && el.contains(child);

Contains Selector

jQuery

$(el).find(selector).length;

IE9+

el.querySelector(selector) !== null

Each

jQuery

$(selector).each(function(i, el){

});

IE9+

var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){

});

Empty

jQuery

$(el).empty();

IE9+

el.innerHTML = '';

Filter

jQuery

$(selector).filter(filterFn);

IE9+

Array.prototype.filter.call(document.querySelectorAll(selector), filterFn);

Find Children

jQuery

$(el).find(selector);

IE9+

el.querySelectorAll(selector);

Find Elements

jQuery

$('.my #awesome selector');

IE9+

document.querySelectorAll('.my #awesome selector');

Get Attributes

jQuery

$(el).attr('tabindex');

IE9+

el.getAttribute('tabindex');

Get Html

jQuery

$(el).html();

IE9+

el.innerHTML

Get Outer Html

jQuery

$('<div>').append($(el).clone()).html();

IE9+

el.outerHTML

Get Style

jQuery

$(el).css(ruleName);

IE9+

getComputedStyle(el)[ruleName];

Get Text

jQuery

$(el).text();

IE9+

el.textContent

Has Class

jQuery

$(el).hasClass(className);

IE9+

if (el.classList)
  el.classList.contains(className);
else
  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);

Matches

jQuery

$(el).is($(otherEl));

IE9+

el === otherEl

Matches Selector

jQuery

$(el).is('.my-class');

IE9+

var matches = function(el, selector) {
  return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
};

matches(el, '.my-class');

Next

jQuery

$(el).next();

IE9+

el.nextElementSibling

Offset

jQuery

$(el).offset();

IE9+

var rect = el.getBoundingClientRect()

{
  top: rect.top + document.body.scrollTop,
  left: rect.left + document.body.scrollLeft
}

Offset Parent

jQuery

$(el).offsetParent();

IE9+

el.offsetParent || el

Outer Height

jQuery

$(el).outerHeight();

IE9+

el.offsetHeight

Outer Height With Margin

jQuery

$(el).outerHeight(true);

IE9+

function outerHeight(el) {
  var height = el.offsetHeight;
  var style = getComputedStyle(el);

  height += parseInt(style.marginTop) + parseInt(style.marginBottom);
  return height;
}

outerHeight(el);

Outer Width With Margin

jQuery

$(el).outerWidth(true);

IE9+

function outerWidth(el) {
  var width = el.offsetWidth;
  var style = getComputedStyle(el);

  width += parseInt(style.marginLeft) + parseInt(style.marginRight);
  return width;
}

outerWidth(el);

Outer Width

jQuery

$(el).outerWidth();

IE9+

el.offsetWidth

Parent

jQuery

$(el).parent();

IE9+

el.parentNode

Position

jQuery

$(el).position();

IE9+

{left: el.offsetLeft, top: el.offsetTop}

Position Relative To Viewport

jQuery

var offset = el.offset();

{
  top: offset.top - document.body.scrollTop,
  left: offset.left - document.body.scrollLeft
}

IE9+

el.getBoundingClientRect()

Prepend

jQuery

$(parent).prepend(el);

IE9+

parent.insertBefore(el, parent.firstChild);

Prev

jQuery

$(el).prev();

IE9+

el.previousElementSibling

Remove

jQuery

$(el).remove();

IE9+

el.parentNode.removeChild(el);

Remove Class

jQuery

$(el).removeClass(className);

IE9+

if (el.classList)
  el.classList.remove(className);
else
  el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');

Replace From Html

jQuery

$(el).replaceWith(string);

IE9+

el.outerHTML = string;

Set Attributes

jQuery

$(el).attr('tabindex', 3);

IE9+

el.setAttribute('tabindex', 3);

Set Html

jQuery

$(el).html(string);

IE9+

el.innerHTML = string;

Set Style

jQuery

$(el).css('border-width', '20px');

IE9+

// Use a class if possible
el.style.borderWidth = '20px';

Set Text

jQuery

$(el).text(string);

IE9+

el.textContent = string;

Siblings

jQuery

$(el).siblings();

IE9+

Array.prototype.filter.call(el.parentNode.children, function(child){
  return child !== el;
});

Toggle Class

jQuery

$(el).toggleClass(className);

IE9+

if (el.classList) {
  el.classList.toggle(className);
} else {
  var classes = el.className.split(' ');
  var existingIndex = classes.indexOf(className);

  if (existingIndex >= 0)
    classes.splice(existingIndex, 1);
  else
    classes.push(className);

  el.className = classes.join(' ');
}

Zdarzenia

Off

jQuery

$(el).off(eventName, eventHandler);

IE9+

el.removeEventListener(eventName, eventHandler);

On

jQuery

$(el).on(eventName, eventHandler);

IE9+

el.addEventListener(eventName, eventHandler);

Ready

jQuery

$(document).ready(function(){

});

IE9+

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

Trigger Custom

jQuery

$(el).trigger('my-event', {some: 'data'});

IE9+

if (window.CustomEvent) {
  var event = new CustomEvent('my-event', {detail: {some: 'data'}});
} else {
  var event = document.createEvent('CustomEvent');
  event.initCustomEvent('my-event', true, true, {some: 'data'});
}

el.dispatchEvent(event);

Trigger Native

jQuery

$(el).trigger('change');

IE9+

// For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent
var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
el.dispatchEvent(event);

Zainteresował Cię ten artykuł?

Oferujemy profesjonalne wsparcie programistów w technologii Web.
Napisz do nas
Tagi
Może Cię również zainteresować:
5 rzeczy, na które warto zwrócić uwagę, wybierając dedykowany system klasy ERP, WMS lub LMS

Tworzenie dedykowanych aplikacji web’owych (dostępnych przez przeglądarkę WWW z poziomu komputera, tabletu czy telefonu) jest… Read More

Clutch Recognizes GOGOmedia as a 2022 Development Leader in Poland

GOGOmedia is a multidisciplinary team with vast experience in the digital technology space. We deliver… Read More