Logo

Jquery'den Yalın Javascript (Vanilla Js)'e Geçiş

Merhaba Arkadaşlar,

Çalıştığım iş yerinde, bu aralar frontend tarafında, ciddi bir performans iyileştirmesi yapmaktayım. Bu noktada, Jquery bağımlılığını kaldırma kararı aldım.

Peki neden böyle bir gereksinim duydum? Bunun aslında cevabı, aşağıdaki performans testinde gizli;

Yukarıdaki tablodan da görüleceği üzere, dom manipülasyonlarında yalın js yazmak ciddi bir performans kazanımı sağlamaktadır. Burada Vanilla Js diye bahsedilen kısmın, yalın javascript olduğu gözden kaçmamalıdır.

JQuery ile kullanılan metodların, Javascript üzerinde alternatiflerinin neler olduğunu, inşallah başlıklar halinde inceleyeceğiz.

Örneklerin çoğunu,  youmightnotneedjquery.com sitesinden aldım.

Seçiciler (Selectors)

Jquery'nin en popüler olduğu alan, geniş seçici desteğiydi. Css seçicilerini doğrudan kullanabilmek gerçekten büyük bir nimetti. Bu imkan, Sizzle Js kütüphanesi ile dahili olarak sağlanmaktaydı.

Ancak Internet Explorer 9 ve diğer modern tarayıcılar ile birlikte, artık bu tarz seçicileri, doğrudan Javascript ile çağırabilir hale geldik.

Id Seçici (Id Selector)

Jquery

$("#id ismi")

Javascript

document.getElementById("id ismi");

Class Seçici (Class Selector)

Jquery

$(".class ismi")

Javascript

document.getElementsByClassName("class ismi");

Sonraki Eleman Seçici (Next Selector)

Jquery

$(el).next();

Javascript

el.nextElementSibling

Önceki Eleman Seçici (Prev Selector)

Jquery

$(el).prev();

Javascript

el.prevElementSibling

Çocuk Eleman Seçici (Child Selector)

Jquery

$(el).children();

Javascript

el.children

Üst Eleman Seçici (Parent Selector)

Jquery

$(el).parent();

Javascript

el.parentNode

Üst En Yakın Eleman Seçici (Verilen Seçiciye Göre) (Closest Selector)

Jquery

$(el).closest("selector");

Javascript

el.closest("selector")

Not : closest metodu Internet Explorer'da çalışmıyor.

Kardeş Eleman Seçici (Siblings Selector)

Jquery

$(el).siblings();

Javascript

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

Özel Seçiciler

".buttons>.i" şeklinde özel bir seçici yazacaksak eğer şu şekillerde çağırım yapabiliyoruz.

Jquery

$(".buttons>.i");

Javascript

document.querySelector(".buttons>.i");

Burada dikkat çeken husus, yukarıdaki seçim yönteminde, eşleşme sağlanan ilk eleman gelir.

document.querySelectorAll(".buttons>.i");

Bu yöntemde ise eşleşen bütün elemanlar gelecektir.

Ajax İstekleri

Get

Jquery

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

  },
  error: function() {

  }
});

Javascript

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
 
request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    var resp = this.response;
  } else {
 
  }
};
 
request.onerror = function() {
};
 
request.send();

Post

Jquery

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

Javascript

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);

Görsel Efektler

Animasyonlu Gösterme (Fade In)

Jquery

$(el).fadeIn();

Javascript

el.classList.add('show');
el.classList.remove('hide');
.show {
  transition: opacity 400ms;
}
.hide {
  opacity: 0;
}

Css

.show {
  transition: opacity 400ms;
}
.hide {
  opacity: 0;
}

Gizleme (Hide)

Jquery

$(el).hide();

Javascript

el.style.display = 'none';

Gösterme (Show)

Jquery

$(el).show();

Javascript

el.style.display = '';

Dom Manipülasyonları

Class Ekleme (Add Class)

Jquery

$(el).addClass(className);

Javascript

el.classList.add(className);

Class Kaldırma (Remove Class)

Jquery

$(el).removeClass(className);

Javascript

el.classList.remove(className);

Class'ın Olup Olmadığını Kontrol Etme (Has Class)

Jquery

$(el).hasClass(className);

Javascript

el.classList.contains(className);

Class'ı Terse Çevirme (Toggle Class)

Jquery

$(el).toggleClass(className);

Javascript

el.classList.toggle(className);

Seçilen Elemanın Sonrasına Html Ekleme (Insert After)

Jquery

$(el).after(htmlString);

Javascript

el.insertAdjacentHTML('afterend', htmlString);

Seçilen Elemanın Öncesine Html Ekleme (Insert Before)

Jquery

$(el).before(htmlString);

Javascript

el.insertAdjacentHTML('beforebegin', htmlString);

Seçilen Elemanın Dış Html'ini Değiştirme (Replace Outer Html)

Jquery

$(el).replaceWith(string);

Javascript

el.outerHTML = string;

Seçilen Elemanın İç Html'ini Değiştirme (Replace Inner Html)

Jquery

$(el).html(string);

Javascript

el.innerHTML = string;

Seçilen Elemanın İç Text'ini Değiştirme (Replace Inner Text)

Bu işlemin, yukarıdaki işlemden farkı, içerideki html düğümlerine müdahele etmeyip, sadece text içeriğini değiştirmesidir.

Jquery

$(el).text(string);

Javascript

el.textContent = string;

Seçilen Elemanın İç Html'ine, Elemen Ekleme (Append Element)

Jquery

$(parent).append(el);

Javascript

parent.appendChild(el);

Elemanın Html'ini Silme (Empty Element)

Jquery

$(el).empty();

Javascript

el.innerHTML = '';

Elemanın Kopyasını Alma (Clone Element)

Jquery

$(el).clone();

Javascript

el.cloneNode(true);

Elemanın İçerisinde, Seçili Elemanın Olup Olmadığını Kontrol Etme (Contains Element)

Jquery

$.contains(el, child);

Javascript

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

Elemanın İçerisinde, Verilen Seçiciye Uyan Elemanın, Olup Olmadığını Kontrol Etme (Contains Selector)

Jquery

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

Javascript

el.querySelector(selector) !== null

Döngü (Each)

Jquery

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

});

Javascript

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

});

Elemanın İç Html'ini Alma (Get Inner Html)

Jquery

$(el).html();

Javascript

el.innerHTML

Elemanın Dış Html'ini Alma (Get Outer Html)

Jquery

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

Javascript

el.outerHTML

Elemanın Text'ini Alma (Get Text)

Jquery

$(el).text();

Javascript

el.textContent

Elemanın Text'ini Güncelleme (Set Text)

Jquery

$(el).text(string);

Javascript

el.textContent = string;

Elemanın Css'ini Alma (Get Css)

Jquery

$(el).css(ruleName);

Javascript

getComputedStyle(el)[ruleName];

Elemana Css Ekleme (Set Css)

Jquery

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

Javascript

el.style.borderWidth = '20px';

Elemanlara Eşitlik Kontrolü Yapma (Match Element)

Jquery

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

Javascript

el === otherEl

Elemanlara Seçici Üzerinden Eşitlik Kontrolü Yapma (Match Element Selector)

Jquery

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

Javascript

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');

Elemanı Dom'dan Silme (Remove Element)

Jquery

$(el).remove();

Javascript

el.parentNode.removeChild(el);

Elemanların Döküman Elemanına Olan Mesafesini Alma (Offset)

Jquery

$(el).offset();

Javascript

var rect = el.getBoundingClientRect();

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

Elemanların Bir Üst Elemanına Olan Mesafesini Alma (Offset Parent Element)

Jquery

$(el).offsetParent();

Javascript

el.offsetParent || el

Elemanların Dikey Mesafesini Alma (Offset Height)

Jquery

$(el).outerHeight();

Javascript

el.offsetHeight

Elemanların Dikey Mesafesini, Margin'i de Dahil Ederek Alma (Offset Height With Margin)

Jquery

$(el).outerHeight(true);

Javascript

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

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

outerHeight(el);

Elemanların Yatay Mesafesini Alma (Offset Width)

Jquery

$(el).outerWidth();

Javascript

el.offsetWidth

Elemanların Yatay Mesafesini, Margin'i de Dahil Ederek Alma (Offset Width With Margin)

Jquery

$(el).outerWidth(true);

Javascript

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

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

outerWidth(el);

Elemanların Display'lerine Göre Pozisyonlarını Allma (Position)

Jquery

$(el).position();

Javascript

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

Elemanların Viewport'a Göre Pozisyonlarını Alma (Position To Viewport)

Jquery

var offset = el.offset();

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

Javascript

el.getBoundingClientRect()

Elemanların Attribute'sini Alma (Get Attribute)

Jquery

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

Javascript

el.getAttribute('tabindex');

Elemanlara Attribute Ekleme (Set Attribute)

Jquery

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

Javascript

el.setAttribute('tabindex', 3);

Olaylar (Events)

Olay Ekleme (On)

Jquery

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

Javascript

el.addEventListener(eventName, eventHandler);

Olay Kaldırma (Off)

Jquery

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

Javascript

el.removeEventListener(eventName, eventHandler);

Dökümanın Yüklenmesi Tamamlandı Olayı (Document Ready)

Jquery

$(document).ready(function(){

});

Javascript

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

Varsayılan Olarak Tanımlı Olay Tetikleme (Trigger Native Event)

Jquery

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

Javascript

var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
el.dispatchEvent(event);

Özel Olarak Tanımlanmış Olayı Tetikleme (Trigger Custom Event)

Jquery

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

Javascript

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);

Araçlar (Utils)

Nesne Birleştirme (Extend)

Jquery

$.extend({}, objA, objB);

Javascript

var extend = function(out) {
  out = out || {};

  for (var i = 1; i < arguments.length; i++) {
    if (!arguments[i])
      continue;

    for (var key in arguments[i]) {
      if (arguments[i].hasOwnProperty(key))
        out[key] = arguments[i][key];
    }
  }

  return out;
};

extend({}, objA, objB);

Nesneyi Alt Nesneleriyle Birleştirme (Deep Extend)

Jquery

$.extend(true, {}, objA, objB);

Javascript

var deepExtend = function(out) {
  out = out || {};

  for (var i = 1; i < arguments.length; i++) {
    var obj = arguments[i];

    if (!obj)
      continue;

    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (typeof obj[key] === 'object')
          out[key] = deepExtend(out[key], obj[key]);
        else
          out[key] = obj[key];
      }
    }
  }

  return out;
};

deepExtend({}, objA, objB);

Nesnenin Liste Olup Olmadığını Kontrol Etme (Is Array)

Jquery

$.isArray(arr);

Javascript

Array.isArray(arr);

Map Döngüsü (Map)

Jquery

$.map(array, function(value, index){

});

Javascript

array.map(function(value, index){

});

Html Parse Etme

Jquery

$.parseHTML(htmlString);

Javascript

var parseHTML = function(str) {
  var tmp = document.implementation.createHTMLDocument();
  tmp.body.innerHTML = str;
  return tmp.body.children;
};

parseHTML(htmlString);

Json Parse Etme

Jquery

$.parseJSON(string);

Javascript

JSON.parse(string);

Yazıyı Trim Etme (Trim Text)

Jquery

$.trim(string);

Javascript

string.trim();

Nesnenin Tipini Alma (Type)

Jquery

$.type(obj);

Javascript

Object.prototype.toString.call(obj).replace(/\[object (.+)\]/, '$1').toLowerCase();