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

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() {

  }
});

Javascipt

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

Javascipt

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

Javascipt

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

Javascipt

el.style.display = 'none';

 

Gösterme (Show)

Jquery

$(el).show();

Javascipt

el.style.display = '';

 

Dom Manipülasyonları

Class Ekleme (Add Class)

Jquery

$(el).addClass(className);

Javascipt

el.classList.add(className);

 

Class Kaldırma (Remove Class)

Jquery

$(el).removeClass(className);

Javascipt

el.classList.remove(className);

 

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

Jquery

$(el).hasClass(className);

Javascipt

el.classList.contains(className);

 

Class'ı Terse Çevirme (Toggle Class)

Jquery

$(el).toggleClass(className);

Javascipt

el.classList.toggle(className);

 

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

Jquery

$(el).after(htmlString);

Javascipt

el.insertAdjacentHTML('afterend', htmlString);

 

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

Jquery

$(el).before(htmlString);

Javascipt

el.insertAdjacentHTML('beforebegin', htmlString);

 

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

Jquery

$(el).replaceWith(string);

Javascipt

el.outerHTML = string;

 

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

Jquery

$(el).html(string);

Javascipt

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

Javascipt

el.textContent = string;

 

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

Jquery

$(parent).append(el);

Javascipt

parent.appendChild(el);

 

Elemanın Html'ini Silme (Empty Element)

Jquery

$(el).empty();

Javascipt

el.innerHTML = '';

 

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

Jquery

$(el).clone();

Javascipt

el.cloneNode(true);

 

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

Jquery

$.contains(el, child);

Javascipt

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;

Javascipt

el.querySelector(selector) !== null

 

Döngü (Each)

Jquery

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

});

Javascipt

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

});

 

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

Jquery

$(el).html();

Javascipt

el.innerHTML

 

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

Jquery

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

Javascipt

el.outerHTML

 

Elemanın Text'ini Alma (Get Text)

Jquery

$(el).text();

Javascipt

el.textContent

 

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

Jquery

$(el).text(string);

Javascipt

el.textContent = string;

 

Elemanın Css'ini Alma (Get Css)

Jquery

$(el).css(ruleName);

Javascipt

getComputedStyle(el)[ruleName];

 

Elemana Css Ekleme (Set Css)

Jquery

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

Javascipt

el.style.borderWidth = '20px';

 

Elemanlara Eşitlik Kontrolü Yapma (Match Element)

Jquery

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

Javascipt

el === otherEl

 

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

Jquery

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

Javascipt

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

Javascipt

el.parentNode.removeChild(el);

 

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

Jquery

$(el).offset();

Javascipt

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

Javascipt

el.offsetParent || el

 

Elemanların Dikey Mesafesini Alma (Offset Height)

Jquery

$(el).outerHeight();

Javascipt

el.offsetHeight

 

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

Jquery

$(el).outerHeight(true);

Javascipt

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

Javascipt

el.offsetWidth

 

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

Jquery

$(el).outerWidth(true);

Javascipt

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

Javascipt

{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
}

Javascipt

el.getBoundingClientRect()

 

Elemanların Attribute'sini Alma (Get Attribute)

Jquery

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

Javascipt

el.getAttribute('tabindex');

 

Elemanlara Attribute Ekleme (Set Attribute)

Jquery

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

Javascipt

el.setAttribute('tabindex', 3);

 

Olaylar (Events)

Olay Ekleme (On)

Jquery

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

Javascipt

el.addEventListener(eventName, eventHandler);

 

Olay Kaldırma (Off)

Jquery

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

Javascipt

el.removeEventListener(eventName, eventHandler);

 

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

Jquery

$(document).ready(function(){

});

Javascipt

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

Javascipt

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

 

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

Jquery

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

Javascipt

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

Javascipt

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

Javascipt

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

Javascipt

Array.isArray(arr);

 

Map Döngüsü (Map)

Jquery

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

});

Javascipt

array.map(function(value, index){

});

 

Html Parse Etme

Jquery

$.parseHTML(htmlString);

Javascipt

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

Javascipt

JSON.parse(string);

 

Yazıyı Trim Etme (Trim Text)

Jquery

$.trim(string);

Javascipt

string.trim();

 

Nesnenin Tipini Alma (Type)

Jquery

$.type(obj);

Javascipt

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