JQUERY EKLENTISI YAZMAK

jQuery hayatımıza o kadar girdi ki, artık herhangi bir HTML dosyasını yazmaya başlarken jQuery'yi include etmeden başlamayı neredeyse hayal dahi edemiyoruz.

Kabul etmek gerekir ki jQuery büyük kolaylıklar getirdi. Hayatımızı kolaylaştırdı desek herhalde yanılmış olmayız. O zaman jQuery'nin en başarılı özelliklerinden biri olan pluginleri de bilgi dağarcığımıza almakta fayda var.

 

jQuery Pluginleri (eklentileri)

Eklentiler aslında HTML'in DOM elementlerine uygulayabileceğimiz birer metoddan ibarettir. Bu şekli ile herhangi bir jQuery metodu (örneğin ".toggle()" metodu) gibidir. Tek farkla: bu metodları biz kendi ihtiyaçlarımıza göre yazıp düzenleyebiliyoruz.

 

jQuery Eklentisi Nasıl Yazılır

Bu işlemi anlayabilmek için çok basit bir jQuery eklentisi yazalım. Bu eklenti, uygulandığı elementlerdeki metin ve arka plan rengini istediğimiz renklerle değiştirsin.

Öncelikle sağlıklı bir kod yazacağımızdan emin olmak için bir temel şablon oluşturalım:

(function($) {
  "use strict";
  /* Kod Buraya */
})(jQuery);

Açıklama: Burada, muhtemelen pek alışkın olmadığınız iki farklı kullanım görüyorsunuz.

 

Eklentiyi oluşturalım

Kodumuzu yazacağımız ortamı oluşturduk. Şimdi içeriğini oluşturmaya başlayabiliriz. Önce eklentimizi oluşturalım:

(function($) {
  "use strict";

  $.fn.renklendir = function() {
    /* Eklenti kodu buraya */
  }
})(jQuery);

Açıklama: Gördüğünüz gibi aslında eklentimiz bir fonksiyondan ibaret. jQuery nesnesini, içine bir fonksiyon ekleyerek genişletiyoruz. Bu fonksiyonun içeriğini istediğimiz gibi oluşturabiliriz. Örneğin fonksiyonumuzun içeriğine "alert('Merhaba');" yazarsak her çağırdığımızda bize "Merhaba" diyen bir jQuery eklentisine sahip oluruz.

 

Artık fonksiyonumuzun içeriğini oluşturmaya başlayabiliriz: 

(function($) {
  "use strict";

  $.fn.renklendir = function() {
    this.css({
      color: 'red',
      backgroundColor: 'yellow'
    });
  }
})(jQuery);

Açıklama: Burada eklentiyi uyguladığımız DOM element(ler)inin metin renklerini kırmızı, arkaplan renklerini ise sarı yaptık. Buradaki "this" nesnesi eklentiye gönderdiğimiz DOM elementleri değil jQuery nesnesidir (instance).

 

jQuery'nin en keyifli özelliklerinden biri de chaining (zincirleme) olarak adlandırılır. Seçicinize ardı ardına istediğiniz kadar metod uygulayabileceğiniz anlamına gelir. Örneğin şöyle bir kod dizgisi gayet mümkün ve makuldür: "$(element).addClass('hoy').css('display', 'block');". jQuery bunu her metodundan (birkaç istisna hariç) o anki jQuery nesnesini (instance) geri döndürerek başarır. Bizim yazdığımız eklenti ise geriye herhangi bir şey döndürmüyor. Bu sorunu çözelim:

(function($) {
  "use strict";

  $.fn.renklendir = function() {
    this.css({
      color: 'red',
      backgroundColor: 'yellow'
    });
    return this;
  }
})(jQuery);

Açıklama: Evet bu kadar basit. Fonksiyonumuza gelen jQuery instance'ını geri döndürüyoruz. Bunu biraz sadeleştirelim. Unutmayın ne kadar az satır, o kadar iyi kod...

(function($) {
  "use strict";

  $.fn.renklendir = function() {
    return this.css({
      color: 'red',
      backgroundColor: 'yellow'
    });
  }
})(jQuery);

 

Süperiz, herşeyi hallettik... mi?

Evet bir eklenti yazdık ama bu eklenti yalnızca sarı - kırmızı kombinasyonu uyguluyor. Fenerliler ne yapsın? Uygulayacağımız renkleri kullanıcı seçemez mi?

Seçer elbette ancak bunun için dışarıdan parametre kabul etmemiz gerekli. Peki bunu nasıl yapacağız. Elbette parametrelerimizi bir nesne (object) içinde fonksiyonumuza göndererek:

(function($) {
  "use strict";

  $.fn.renklendir = function(param) {
    return this.css({
      color: param.renk,
      backgroundColor: param.arkaplan
    });
  }
})(jQuery);

Tabii bu parametreleri eklentimizi aktive ederken HTML içinden göndereceğiz:

<script>
  $(element).renklendir({
    renk: 'red',
    arkaplan: 'yellow'
  });
</script>

 

Tamam, artık eklentimiz kullanıcının gönderdiği renkler ile çalışıyor. Herşey iyi de, kullanıcı parametrelerden herhangi birini ya da hiç birini göndermezse ne olacak? Kod hata mı versin? Bu parametrelerin bir varsayılan değeri olmalı, değil mi?

Bu iş için parametreleri tek tek kontrol edip gelmeyen değerler için varsayılanları atamanıza gerek yok (gerçi bunu yapmayı tercih etmek isteyebileceğiniz durumlar olabilir ama bu onlardan biri değil). Bu iş için jQuery bize bir araç sunmuş: ".extend();"

(function($) {
  "use strict";

  $.fn.renklendir = function(param) {
    var degerler = $.extend({
      renk: '#666',
      arkaplan: '#fff'
    }, param);

    return this.css({
      color: degerler.renk,
      backgroundColor: degerler.arkaplan
    });
  }
})(jQuery);

 

Evet, artık gerçekten tamamlandı. Başlangıçta tarif ettiğimiz işlemleri yapabilen bir jQuery eklentisi oluşturduk. Elbette bu çok basit bir örnek. İleride daha detaylı (ve gerçekten işe yarayabilecek) eklentiler paylaşacağım.

 

Kategori : Web Programlama