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.

$.fn.bnPlugin = function() {
	// Eklenti gövdesi
};

$('.bn-plugin').bnPlugin();

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.

$.fn.bnPlugin = function() {
	// Eklenti gövdesi
	return this;
};

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.

(function($) {
	$.fn.bnPlugin = function() {
		// Eklenti gövdesi
	};
})(jQuery);

$('.bn-plugin').bnPlugin();

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.

(function($) {
	// private members
	var backgroundColor = '#ba2424';

	$.fn.bnPlugin = function() {
		// Eklenti gövdesi
	};
})(jQuery);

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.

(function($) {
	$.fn.bnPlugin = function() {
		return this.each(function() {
			// Eklenti gövdesi
		});
	};
})(jQuery);

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.

(function($) {
	var backgroundColor = '#ba2424';
	$.fn.bnPlugin = function(options) {		
		var settings = $.extend({}, $.fn.bnPlugin.defaults, options);
	};

	$.fn.bnPlugin.defaults = { backgroundColor: backgroundColor };
})(jQuery);

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

$('.bn-plugin').bnPlugin({ backgroundColor: '#aaa' });

$.fn.bnPlugin.defaults.backgroundColor = '#bbb';

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.

(function($){
	$.fn.randomImage = function(options){
		var settings = $.extend({}, $.fn.randomImage.defaults, options);
		
		if(settings.images){
			var image = settings.images[numbersBetween(0, settings.images.length - 1)];
			this.css({ backgroundImage: `url(${image})` });
		} else {
			console.warn('No images found');
		}

		settings.onInit.call(this);
	};

	$.fn.randomImage.defaults = {images: [], onInit: function(){ } };

	// private members
	var numbersBetween = function(min, max) {
		return Math.floor(Math.random() * (max - min + 1) + min);
	};
})(jQuery);

$('#random-image').randomImage({
  images: [
    'https://image.com/image-1.jpg',
    'https://image.com/image-2.jpg',
    'https://image.com/image-3.jpg'
  ],
  onInit: function(){
    alert('Plugin initialized!')
  }
});

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