Merhaba Webkolog takipçileri, bugün sizlere jQuery kütüphanesini kullanarak nasıl kendi özel eklentilerinizi (plugin) geliştirebileceğinizi adım adım anlatacağım.

Web geliştirme süreçlerinde tekrar eden JavaScript kodlarını derleyip toparlamak, hem kod kalitesini artırır hem de projelerimizi modüler hale getirir. 2014 yılı itibarıyla front-end dünyasının vazgeçilmez bir parçası olan jQuery, sunduğu esnek yapısı sayesinde kendi fonksiyonlarımızı kolayca kütüphaneye dahil etmemize olanak tanır.

1. jQuery Eklenti Mantığı Nedir?

jQuery eklentileri temel olarak $.fn nesnesine yeni metodlar eklenmesi esasına dayanır. Bu sayede seçtiğimiz herhangi bir DOM elemanı üzerinde yazdığımız özel fonksiyonları çağırabiliriz.

Eklenti yazarken dikkat edilmesi gereken en önemli konulardan biri, $ çakışmalarını önlemek ve zincirlenebilirlik (chaining) özelliğini korumaktır. Zincirlenebilirlik sayesinde $('element').eklentim().css(...) şeklinde ardışık işlemler yapabiliriz.

[RESİM YOK]

2. Temel Bir Eklenti İskeleti

Kendi eklentimizi oluştururken global değişken alanını kirletmemek için anında çalışan anonim fonksiyonlardan (IIFE) yararlanırız. Aşağıdaki yapı standart bir jQuery eklenti mimarisini temsil eder:

(function($) {
    $.fn.renkDegistir = function(options) {
        // Varsayılan ayarlar
        var settings = $.extend({
            renk: "#ff0000",
            yaziRengi: "#ffffff"
        }, options);

        // Seçilen tüm elemanlar üzerinde dön
        return this.each(function() {
            $(this).css({
                'background-color': settings.renk,
                'color': settings.yaziRengi
            });
        });
    };
})(jQuery);

3. Hazırlanan Eklentinin Kullanımı

Yazdığımız eklentiyi sayfamıza dahil ettikten sonra dilediğimiz elemana uygulamak oldukça basittir. Örneğin aşağıdaki kod bloğu ile seçtiğimiz paragraf alanlarının arka planını ve yazı rengini özelleştirebiliriz:

$(document).ready(function() {
    $('p.ozel-kutu').renkDegistir({
        renk: '#3498db',
        yaziRengi: '#ffffff'
    });
});

Bu yöntemle kendi kütüphanelerinizi oluşturabilir, projelerinizde kod tekrarından kurtularak çok daha temiz bir mimari elde edebilirsiniz. Sorularınızı yorum bölümünden iletmekten çekinmeyin.

Hepinize sağlıklı, mutlu ve huzurlu günler dilerim!

Webkolog'u takipte kalın!