javaScript shorthand (kısaltmalar)

javascript'de programlama yazmanın en kötü yanı uzun kod adlarını ezberleme ve bunları tekrar tekrar yazmak hem yorucu hemde zaman alıcıdır. Biz bu makalede bu uzun kod adlarını kısaltarak javaScript'de proğramlama yazmayı kısa ve eğlenceli hale getireceğiz. Tabiki bazı basit işlemler için JQuery kütüphanesi gibi koca kütüphaneyi indirmek ve siteye uyarlamak bazen işimize gelmiyebilir; Çünkü koca kütüphanenin yüklenmesi zaman aldığı için websitemizde yavaşlamalar olabilir. Ayrıca JQuery gibi kütüphanelerin seçicileri çok yavaş çalışmakta biz ise burda sadece method isimlerini değiştirerek hızdan feregat etmeyeceğiz. Javascript'de en çok uğraştığımız bir HTML öğesi seçmek için uğraşıyoruz önce bu seçicileri(getElementById,queryselector gibi....) kısaltarak işe başlayacağız

querySelector() methodun Kısaltılması

var $ = function( x ) { 

return document.querySelector( x );

};

Kullanımı:

$("#test") // id="test" böyle seçebiliriz.

 $("#test").style.color="darkgreen";

ÇIKTI:

JQuery gibi kütüphane yükleyecekseniz $() ismi genelde birçok kütüphane kullanıyor, burdaki fonksiyonla çakışabilir herhangi bir isim verebilirsiniz (sec() gibi...)

querySelectorAll() methodun Kısaltması

var $$ = function( x ) { 

 return document.querySelectorAll( x );

 };

Kullanımı:

$$(".test") //class="test" böyle seçeriz.

$$(".test")[0].style.color="blue";

getElementById() Methodun Kısaltılması

var id= function( x ) { 

 return document.getElementById( x );

 };

Kullanımı:

id("test") //id="test" böyle seçeriz.

id("test").style.color="blue";

getElementsByTagName() methodun Kısaltması

var tag = function( x ) { 

return document.getElementsByTagName( x );

 };

Kullanımı:

tag("p") //paragrafları böyle seçeriz.

tag("p")[0].style.color="blue";

addEventListener() Methodun Kısaltılması

addEventListener() Methodu on ismi ile kısaltacağız yukarıdaki seçicileri Şöyle kullanabiliriz.

$("#test").addEventListener()

Yukardaki addEventListener() methodun kısaltılmış şeklini oluşturduğumuz seçiçilerle kullanamayız.

$("test").on{} // typeerror

Yukardaki ifadeyi zicirleme method özellik vermediğimiz için yeni bir seciçi ile addEventListener() methodun kısasını yazacağız.

var select = function (x){

    this.Node = document.querySelector( x );

    return this;
}
var on = function (c,fonk, capture){

  this.Node.addEventListener(c,fonk,capture);
  
  return this;
}
var off = function (c,fonk, capture){

  this.Node.removeEventListener(c,fonk,capture);
  
  return this;
}

NOT: on fonksiyonun içinde artık seçiciyi this olarak kullanacaksınız.