JQuery eklenti sözdizimini anlamak istiyorum

Question 1

JQuery sitesi, jQuery için temel eklenti sözdizimini şu şekilde listeler:

(function( $ ){    
  $.fn.myPlugin = function() {      
    // there's no need to do $(this) because
    // "this" is already a jquery object

    // $(this) would be the same as $($('#element'));

    this.fadeIn('normal', function(){    
      // the this keyword is a DOM element    
    });    
  };
})( jQuery );

Javascript'in bakış açısından orada neler olup bittiğini anlamak istiyorum, çünkü JS'nin daha önce yaptığını gördüğüm herhangi bir sözdizimini takip ediyor gibi görünmüyor. İşte soru listem:

($) ... işlevini bir değişkenle değiştirirseniz, "the_function" deyin, sözdizimi aşağıdaki gibi görünür:
```
 (the_function)( jQuery );
```
"(JQuery);" nedir yapıyor? İşlevin etrafındaki parantez gerçekten gerekli mi? Onlar niçin burada? Benzer olan başka bir kod parçası var mı?
($) Fonksiyonu ile başlar. Öyleyse, anlayabildiğim kadarıyla, zaten tanımlanmış olan $ parametresiyle asla çalıştırılmayacak bir işlev yaratıyor? Ne oluyor orada?

Yardım için teşekkürler!

Question 2

function(x){ 
    x...
}

sadece adı olmayan, bir bağımsız değişken, "x" alan ve x ile şeyler yapan bir işlevdir.

Yaygın bir değişken adı olan 'x' yerine, daha az yaygın bir değişken adı olan, ancak yine de yasal olan $ kullanabilirsiniz.

function($){ 
    $...
}

İfade olarak ayrıştırıldığından emin olmak için parantez içine koyacağım:

(function($){
    $....
})

Bir işlevi çağırmak için, argüman listesiyle birlikte () koyarsınız. Örneğin, bu fonksiyonun değeri için 3'e geçerek çağırmak isteseydik, şunu $yapardık:

(function($){
    $...
})(3);

Sadece tekmeler için, bu fonksiyonu çağıralım ve jQuery'yi değişken olarak geçirelim:

(function($){
     $....
})(jQuery);

Bu, bir bağımsız değişken alan ve ardından bu işlevi çağıran, değer olarak jQuery'yi ileten yeni bir işlev oluşturur.

NEDEN?

Çünkü jQuery ile her bir şey yapmak istediğinizde jQuery yazmak sıkıcıdır.

NEDEN SADECE YAZMAYIN $ = jQuery?

Çünkü başka biri, başka bir şey ifade etmek için $ tanımlamış olabilir. Bu, $ 'ın diğer anlamlarının bununla gölgelendiğini garanti eder.

Question 3

(function( $ ){

})( jQuery );

Bu, $argümanda kullanan, kendi kendini çalıştıran anonim işlevdir, böylece bu işlevin içinde kullanmak $yerine onu ( ) kullanabilirsiniz jQueryve diğer kitaplıklarla çelişme korkusu olmadan, çünkü diğer kitaplıklarda da$ özel bir anlama sahip . Bu kalıp, jQuery eklentileri yazarken özellikle kullanışlıdır.

Oraya da herhangi bir karakter yazabilirsiniz $:

(function(j){
  // can do something like 
  j.fn.function_name = function(x){};

})(jQuery);

Burada j, sonunda belirtilen jQuery'yi otomatik olarak yakalayacaktır (jQuery). Ya da argümanı tamamen dışarıda bırakabilirsiniz, ancak daha sonra çarpışma korkusu olmadan jQueryanahtar kelimeyi her yerde kullanmanız gerekecektir $. Yani $kısa el argümanına sarılır, böylece $yerine yazabilirsinizjQuery bu işlevin her yeri .

JQuery'nin kaynak koduna baksanız bile, her şeyin arasına sarıldığını göreceksiniz:

(function( window, undefined ) {
  // jQuery code
})(window);

Bu, görülebileceği gibi, bağımsız değişkenlere sahip kendi kendine çalışan anonim bir işlevdir. Bir window(ve undefined) bağımsız değişken oluşturulur ve windowaltta global nesne ile eşlenir (window). Bu, günümüzde popüler bir modeldir ve hız kazancı çok azdır çünkü burada window, windowaşağıda haritası çizilen global nesneden ziyade argümandan incelenecektir .

$.fnEğer yeni (aynı zamanda bir nesne) işlevini ya da öylesine jQuery onun içinde eklentinizi sarar o kendini eklentisi oluşturmak jQuery'nin nesnedir $.fnnesne ve kullanılabilir hale.

İlginç bir şekilde, benzer soruyu burada cevaplamıştım:

JavaScript / jQuery kapatma işlevi sözdizimi

Yazmış olduğum kendi kendine çalışan işlevler hakkında daha fazla bilgi edinmek için bu makaleye de göz atabilirsiniz:

Javascript Kendi Kendini Yürüten İşlevler

Question 4

Temel eklenti sözdizimi , kimliğinden bağımsız olarak eklentinizin gövdesine $atıfta bulunmanızı sağlar jQuery.$ , eklentinin yüklendiği andaki . Bu, başta Prototip olmak üzere diğer kitaplıklarla adlandırma çakışmalarını önler.

Sözdizimi, olarak bilinen bir parametreyi kabul eden bir işlevi tanımlar, $böylece ona $işlev gövdesinde olduğu gibi başvurabilirsiniz ve ardından jQueryargüman olarak koyarak hemen bu işlevi çağırır .

Bu aynı zamanda genel ad alanını (şimdiye ilan kirletmez yardımcı olur var myvar = 123;aniden tanımlamaz olacaktır eklenti vücutta window.myvar), ancak ana göstermelik amacı kullanmak için izin vermektir $nerede $yeniden olabilir çünkü.

Question 5

Orada kendi kendini çağıran anonim bir işlevle uğraşıyorsunuz. Bu, $işaretin jQuerynesneye bağlı olduğundan emin olmak için bir jQuery eklentisini böyle bir işlevin içine sarmak "en iyi uygulama" gibidir .

Misal:

(function(foo) {
    alert(foo);
}('BAR'));

Bu, BARbir <script>bloğa konulduğunda uyarı verir . Parametre BAR, kendisini çağıran işleve aktarılır.

Aynı ilke kodunuzda da gerçekleşir, jQuerynesne işleve aktarılır, bu nedenle $kesinlikle jQuery nesnesine başvurur.

Question 6

Sondaki jQuery kendisini (jQuery) işleve geçirir, böylece eklentiniz içinde $ sembolünü kullanabilirsiniz. Sen de yapabilirsin

(function(foo){

  foo.fn.myPlugin = function() {


    this.fadeIn('normal', function(){


    });

  };
})( jQuery );

Question 7

Bunun ve diğer modern javascript püf noktaları ve yaygın uygulamaların net bir açıklamasını bulmak için Javascript Garden'ı okumanızı tavsiye ederim.

http://bonsaiden.github.com/JavaScript-Garden/

Bu özellikle kullanışlıdır, çünkü bu kalıpların çoğu birçok kütüphanede yaygın olarak kullanılmaktadır ancak gerçekte açıklanmamıştır.

Question 8

Buradaki diğer cevaplar harika, ancak değinilmeyen önemli bir nokta var. Diyorsun:

Öyleyse, anlayabildiğim kadarıyla, zaten tanımlanmış olan $ parametresiyle asla çalıştırılmayacak bir işlev yaratıyor?

Global değişkenin $mevcut olduğunun garantisi yoktur . Varsayılan olarak, jQuery genel kapsamda iki değişken oluşturur: $ve jQuery(burada ikisi aynı nesnenin takma adlarıdır). Ancak jQuery noConflict modunda da çalıştırılabilir :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
</script>

Aradığınızda jQuery.noConflict(), genel değişken $jQuery kitaplığı eklenmeden önceki haline geri döner. Bu, jQuery'nin aynı zamanda kullanan diğer Javascript kitaplıklarıyla$ global bir değişken olarak .

$JQuery için takma ad olmaya dayanan bir eklenti yazdıysanız, eklentiniz noConflict modunda çalışan kullanıcılar için çalışmayacaktır.

Diğerlerinin daha önce açıkladığı gibi, gönderdiğiniz kod, hemen çağrılan anonim bir işlev oluşturur. Global değişken jQuerydaha sonra bu anonim işleve aktarılır ve bu işlev, işlev içinde yerel değişken olarak güvenli bir şekilde adlandırılır $.