jQuery 101: eklenti nedir? nasıl yazılır?

Her ne kadar eskisi kadar tercih edilmese de yine de bazı projelerde jQuery’i projemize dahil etmek durumunda kalıyoruz. Bundan sonra da third-party eklentileri (plugin) projemize peşi sıra eklemeye başlıyoruz; ancak bazı özel durumlarda kendi eklentimizi yazmamız da söz konusu olabiliyor. Bu makale bu konuyu işleyecektir.

jQuery eklentisi (plugin) nedir?

Genellikle yazdığımız kod boyunca kendini tekrarlayan yapılar mevcuttur ya da kurduğumuz tek bir yapı, içerisinde bir dizi etkileşim (script) gerektirir. Bu tarz durumlarda bu yapı(ları) kontrol edecek işlevselliklerin bir fonksiyon altında toplanmasıyla elde edilen çıktıya eklenti diyebiliriz.

Neden eklenti yazmalıyım?

  • Birden çok yerde aynı işlemi yapan durumları yönetmek istediğimizde kod tekrarını önleyerek, kodumuzu merkezileştirmiş ve yönetimi kolaylaştırmış oluruz.
  • Bir proje düşünün; içerisinde başka bir third-party eklentiyi 50 farklı yerde çağırdığımızı. İleride belki ihtiyaçlarımıza cevap vermeyecek ya da daha performanslı/kullanışlı başka bir eklenti kullanmaya karar vereceğiz. Bu durumda nerelerde, kaç kere kullandıysak bunları tek tek değiştirmemiz gerekecek. Ben bu gibi durumların önüne geçmek için third-party eklentileri kapsülleyerek projelerimde kullanıyorum. Bu sayede bu eklentileri modülvari tak-çıkart mantığıyla kullanabiliyorum.

jQuery eklenti (plugin) nasıl yazılır?

Örnek teşkil edecek eklentimizi yazmaya hemen başlayalım.

Daha ileriye devam etmeden önce bilmemizde fayda olan bir kaç konu var. Öncelikle elbette sayfamıza jQuery’i dahil etmeliyiz.

1. Method chaining (Zincirleme fonksiyon)

Tüm jQuery fonksiyonları işleri bittiğinde orjinal elemanı tekrar çağırıldığı yere döndürür, bu sayede “.” (dot) operatörü ile fonksiyonları birbirine bağlayabiliyoruz. Bu aslında neredeyse çoğu programlama dili için geçerlidir. (Ör: C#) Yazdığımız eklenti içinde bu durumun söz konusu olabilmesi için seçtiğimiz elemanı döndürebiliriz, eklenti gövdesinde this anahtar kelimesi ile bu elemana ulaşabiliyoruz.

2. $ çakışması ve Scope oluşturma

jQuery kullandığımızda, third party eklentiler bir noktada kaçınılmaz oluyor ve bu eklentiler de “$” anahtar kelimesi altında toplanıyor. “$” keywordü, jQuery için kısaltılmış bir isim (alias). Bu durum beraberinde diğer jQuery eklentileriyle çalışıldığında çakışma ve hata durumlarını da beraberinde getiriyor, bu durumlardan sakınmak adına tüm kodumuzu bir IIFE (Immediately Invoked Function Expression) içerisine yazarak bu fonksiyona argüman olarak jQuery’i gönderiyor ve parametremizi “$” olarak belirterek, kodumuzun diğer kısımlarından soyutluyoruz.

Ayrıca IIFE ile soyutladığımız blok içerisinde tanımlayacağımız fonksiyon ve değişkenler private olarak değerlendirilecektir, aslında burada bir nevi kapsülleme (encapsulation) de yapıyoruz.

3. each() fonksiyonunun önemi

Yazdığımız eklentileri jQuery seçicileri (selector) ile çağıracağımızı biliyoruz. Bu seçiciyle örtüşen birden fazla eleman olması durumunda, bu elemanlardan her birini özel olarak işlemek için each() fonksiyonunu kullanmalıyız, ayrıca yine burada da method chaining özelliğini sağlamak adına mevcut elemanı tekrar dönüyoruz.

4. Eklentimizi özelleştirilebilir hale getirmek

Yazdığımız eklentiye dışarıdan ayar (options) kabul edebilir veya eklenti ayarının bir özelliğini global olarak dışarıdan değiştirilebilir hale getirebiliriz.

Artık eklentimizi çağırırken ayarlayabilir veya bir noktada eklentinin bir özelliğini global olarak değiştirebiliriz.

Artık örnek eklentimizi yazmaya başlayalım, bu kısma kadar her şeyin netleştiğini düşünüyorum. Eklentimiz; görsel barındıran bir sayfada, bizim vereceğimiz görsel listesini alarak her istek gönderildiğinde kullanıcıya farklı bir resim gösterecektir.

Artık eklentimiz kullanıma hazır, bir sonraki yazıda görüşmek üzere. (:

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.