avatar

jQuery Eklentisi yazmak
jQuery eklentileri hayatı kolaylaştırır...

18/07/2014
Hakan Özakar

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.

  • (function($) {})(jQuery);
    jQuery'nin ana fonksiyonunu $ aliası ile kullanmaya çok alışkınız. Ancak bu alias oldukça popülerdir ve birçok JavaScript kitaplığı için kullanılır. Bu durum eklentinizin başka JS kitaplıkları ile kullanımı durumunda çakışmalara ve beklenmeyen hatalara sebebiyet verebilir. Bu nedenle kodumuzu yazacağımız alanı bir fonksiyon gibi tanımlayarak bu fonksiyona jQuery nesnesini bir değişken olarak gönderiyoruz. Bu değişkeni fonksiyonun içeriğinde $ ile isimlendirerek dış dünyadan soyutluyor ve diğer kitaplıklarda kullanılması muhtemel olan diğer değişkenlerle çakışmasını engellemiş oluyoruz. Not: (function($) {}(jQuery)); şeklinde de kullanılabilir.
  • "use strict"
    Strict kelimesi katı - müsamahasız anlamına geliyor. JavaScript'i strict modda yazıyorsanız kodunuzu şişirecek kötü kullanımlardan ve güvenlik düzeyi düşük işlemlerden kaçınmış olursunuz. Çünkü bu tür durumlarda kod hata verir :) Örneğin önce deklare etmeden değişken kullanamazsınız. Uzun lafın kısası, strict modda yazıyorsanız mecburen daha kaliteli kod yazarsınız.
    Herhangi bir kodunuzu alın, en üst satırına "use strict" yazın. Eğer hata veriyorsa o kodun kalitesi düşüktür... Bu kullanımı tüm JS kodlarınız için bir alışkanlık haline getirmenizi öneririm.

 

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.

 

Bu örneğin üzerinde çalışmak için http://jsfiddle.net/hozakar/L4uvv/24/

Yorumlar Yorum Yap

  • Erhan

    Faydalı bir yazı teşekkürler, bugün bir deneme yapacağım bununla, emeğinize sağlık

    Erhan 07/05/2018 08:22
  • Bora

    Anlatım için teşekkürler çok güzel bir yazı olmuş

    Bora 29/06/2017 17:38
  • yasin

    merhaba jquery kullanmadan sadece kor javascript ile bunu nasıl yaparız acaba

    yasin 29/01/2017 14:45
  • Ahmet

    Çok harika bir döküman emeğinize sağlık Teşekkürler.

    Ahmet 14/05/2016 14:32
  • Ahmet

    Faydalı bir yazı olmuş elinize sağlık.

    Ahmet 31/10/2015 18:28