0Pricing
jQuery Academy · Ders

Eklenti Tasarım Kalıpları ve Kapsamlandırma

Çakışmaları önlemek için hemen çağrılan işlev ifadesi (IIFE) gibi yaygın eklenti tasarım kalıplarını ve değişken kapsamlandırma için en iyi uygulamaları anlayın.

Eklenti Tasarım Kalıpları ve Kapsamlandırma, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.

jQuery Eklentileri Nedir?

jQuery eklentileri, jQuery'nin yeteneklerini genişleten ve $.fn nesnesine yeni yöntemler eklemenize olanak tanıyan küçük kod parçalarıdır.

Yeniden kullanılabilir işlevleri paketlemenize yardımcı olarak kodunuzu daha modüler, düzenli ve bakımı daha kolay hâle getirirler. Bunları jQuery araç kutunuza eklediğiniz özel araçlar olarak düşünebilirsiniz.

Eklentiler Neden Kullanılır?

Eklentiler çeşitli avantajlar sunar:

  • Yeniden kullanılabilirlik: Kodu bir kez yazın, her yerde kullanın.
  • Modülerlik: Karmaşık özellikleri daha küçük ve yönetilebilir parçalara ayırın.
  • Kapsülleme: Eklentinizin iç mantığını diğer betiklerden ayrı tutun.
  • Paylaşım: Özel özelliklerinizi diğer geliştiricilerle kolayca paylaşın.

Temel Eklenti Yapısı (İlk Hâli)

Çok temel bir eklenti, $.fn'ye bir işlev eklenerek oluşturulabilir. Ancak bu yaklaşımın önemli bir sakıncası vardır: kodunuzu genel değişken çakışmalarına karşı korumaz.

Bu basit, kapsüllenmemiş eklentiyi inceleyin. mySimplePlugin değerini doğrudan jQuery'nin prototipine ekler:

$.fn.mySimplePlugin = function() {
  return this.each(function() {
    $(this).css("color", "blue");
  });
};

// Usage (assuming jQuery and HTML are loaded):
// $('p').mySimplePlugin();

IIFE ile Tanışma

Hemen Çağrılan İşlev İfadesi (IIFE), tanımlanır tanımlanmaz çalışan bir JavaScript işlevidir. Değişkenleri ve işlevleri için özel bir kapsam oluşturur ve bunların genel ad alanını kirletmesini önler.

Bu, bir sayfadaki diğer betiklerle çakışmaları önlemek açısından eklentiler için çok önemlidir.

(function() {
  var privateVar = "I'm private!";
  console.log(privateVar);
})();

// console.log(privateVar); // This would cause an error!

Standart Eklenti IIFE Kalıbı

jQuery eklentileri için önerilen kalıp, jQuery'yi bağımsız değişken olarak alan ve ona $ takma adını veren bir IIFE kullanır. Bu, başka bir kitaplık (örneğin Prototype.js) $ kullanıyor olsa bile eklentinizin içindeki $ ifadesinin her zaman jQuery'yi göstermesini sağlar.

(function($) {
  // Your plugin code goes here
  // $ now safely refers to jQuery

  $.fn.mySafePlugin = function() {
    return this.each(function() {
      $(this).text("Hello from safe plugin!");
    });
  };

})(jQuery); // Pass jQuery object to the IIFE

// Example usage after plugin definition:
// $('div').mySafePlugin();

İlk Kapsüllenmiş Eklentinizi Oluşturma

IIFE kalıbını kullanarak basit bir eklenti oluşturalım. Bu eklenti, seçilen öğelere belirli bir sınıf ekleyecek. IIFE içindeki tüm değişken ve işlevlerin yerel kapsamda olduğuna dikkat edin.

Bu örneği çalıştırmayı deneyin:

(function($) {
  $.fn.highlightText = function() {
    return this.each(function() {
      // 'this' refers to the DOM element in .each()
      // $(this) wraps it into a jQuery object
      $(this).addClass('highlighted');
    });
  };
})(jQuery);

// Assume we have some HTML like:
// <p>This is some text.</p>
// <p>Another paragraph.</p>

// Now, let's use our plugin:
$('p').highlightText();

// This would make paragraphs have a 'highlighted' class.

Eklentilerde 'this' İfadesini Anlama

Eklenti işlevinizin içinde (ör. $.fn.myPlugin = function() { ... }), this anahtar sözcüğü eklentiyi çağıran jQuery nesnesini belirtir.

Eşleşen kümedeki her bir DOM öğesiyle çalışmak için this.each(function() { ... }); kullanmalısınız. .each() geri çağırmasının içinde this, geçerli DOM öğesini belirtir.

(function($) {
  $.fn.showInfo = function() {
    console.log("Plugin called on: ", this.selector);
    return this.each(function() {
      // 'this' inside .each refers to the DOM element
      var elementTag = this.tagName;
      console.log("Processing element: ", elementTag);
      $(this).append(" <i>(processed)</i>");
    });
  };
})(jQuery);

// Example usage:
// Assume HTML: <p>Item 1</p><div>Item 2</div>
$('p, div').showInfo();

İç Değişkenler İçin Yerel Kapsam

Eklentinizin IIFE'si içinde yardımcı değişkenleri veya işlevleri var, let ya da const kullanarak tanımlayın. Bu, bunları kesin olarak eklentinizin yerelinde tutarak diğer betiklerle çakışmalarını önler.

Bu, temiz ve çakışmasız kod yazmak için iyi bir uygulamadır.

(function($) {
  // This helper function is only visible inside this IIFE
  function getFormattedTime() {
    var now = new Date();
    return now.toLocaleTimeString();
  }

  $.fn.addTimestamp = function() {
    return this.each(function() {
      var timestamp = getFormattedTime(); // Call local helper
      $(this).append('<small> - ' + timestamp + '</small>');
    });
  };
})(jQuery);

// Example usage:
// Assume HTML: <p>Last updated:</p>
$('p').addTimestamp();

Genel Değişken Sızıntılarını Önleme

IIFE olmadan, betikte doğrudan tanımlanan ( var, let veya const kullanılmadan tanımlanan) her değişken genel hâle gelir. Birden çok betik aynı ada sahip değişkenler tanımladığında bu durum beklenmedik davranışlara yol açabilir.

IIFE koruyucu bir sarmalayıcı görevi görerek eklentinizin iç yapısının özel kalmasını sağlar.

IIFE Avantajları Hakkında Hızlı Kontrol

Hemen Çağrılan İşlev İfadesi (IIFE) ve bunun jQuery eklentisi geliştirmedeki rolü hakkında bilgi edindiniz. Bu, sağlam ve çakışmasız eklentiler oluşturmak için temel bir kalıptır.

Bir jQuery eklentisini, özellikle (function($) { ... })(jQuery); kalıbını kullanarak bir IIFE içine almanın temel avantajı aşağıdakilerden hangisidir?

Tekrar: Eklenti Kalıpları ve Kapsam

Bu derste sağlam jQuery eklentileri oluşturmanın temel kavramlarını inceledik:

  • jQuery Eklentileri: Yeniden kullanılabilirlik için jQuery'nin işlevselliğini genişletir.
  • IIFE: Hemen Çağrılan İşlev İfadesi, özel bir kapsam oluşturur.
  • Standart Kalıp: (function($) { ... })(jQuery);, genel $ çakışmalarını önlemek ve kodunuzu kapsüllemek için hayati önem taşır.
  • this Anahtar Sözcüğü: jQuery nesnesini belirtir; tek tek öğeler için .each() kullanın.
  • Yerel Kapsam: Genel sızıntıları önlemek için iç değişkenleri (var, let, const) IIFE içinde tanımlayın.

Bu kalıplarda ustalaşmanız, eklentilerinizin modüler, bakımı kolay olmasını ve diğer betiklerle sorunsuz çalışmasını sağlar.

Sıkça Sorulan Sorular

“Eklenti Tasarım Kalıpları ve Kapsamlandırma” dersi ücretsiz mi?

Evet — “Eklenti Tasarım Kalıpları ve Kapsamlandırma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.

“Eklenti Tasarım Kalıpları ve Kapsamlandırma” dersinde ne öğreneceğim?

Çakışmaları önlemek için hemen çağrılan işlev ifadesi (IIFE) gibi yaygın eklenti tasarım kalıplarını ve değişken kapsamlandırma için en iyi uygulamaları anlayın. jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 1. dersidir.

“Eklenti Tasarım Kalıpları ve Kapsamlandırma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Eklenti Tasarım Kalıpları ve Kapsamlandırma
  2. Yapılandırılabilir ve Yeniden Kullanılabilir Eklentiler Oluşturma
  3. Genel Yöntemleri ve Geri Çağrıları Entegre Etme
← jQuery Academy Sayfasına Dön