2011-01-07 21 views
15

Olası Çoğalt:
What does (function($) {})(jQuery); mean?Parantez içindeki kod bloğu JavaScript/jQuery'de ne anlama geliyor?

Ben sözdizimi aşağıdaki tür jQuery kod çok gördüm, ama gerçekten ne anlama geldiğini anlamıyorum. Kod organizasyonu hakkında bir soruda this answer ve this answer gösterilmektedir. Her ikisi de ad boşluğu hakkında konuşuyor, yani tahmin ettiğim şey budur.

var foo = (function() { 
    var someVar; 

    function someFunc() { 
     return true; 
    } 
})(); 

Bu ad adlandırma için mi ve nasıl çalışır? Bazen parantezin son kümesinde bazen isim (isim alanı) bulunur. İkisi arasındaki fark nedir?

+1

Ayrıca http://stackoverflow.com/questions/4531110/jquerys-function-jquery-syntax/4531124#4531124 –

+1

Bu, tam kopyası değil - bunun bir analogu. – Orbling

+1

@Orbling Evet, ancak her iki sorudaki cevaplar jQuery özgü değil. –

cevap

14

İşlevi sarmalayan (), anonim işlev bildirimini, ifadeyi izleyen () ile hemen çağrılan bir işlev ifadesine dönüştürür.

Bu durumda var foo = ifadesi bir dışa dönüştürebileceği için dış () gerçekten gerekli değildir. Ayrıca, işlev çağrısı hiçbir şey döndürmediğinden foo değeri undefined olacaktır.

Bir işlev, javascript'te bunu gerçekleştirmenin tek yolu olduğundan, yeni bir değişken kapsamı oluşturmak için kullanılabilir. (Javascript'in blok kapsamı yoktur.)

Yani someVar değişkeninin dış kapsamı kullanılamaz. Kontrollü bir şekilde erişilebilir hale getirilmesi arzu edilen zamanlar olabilir. Bunu yapmak için, someVar referansını içeren bu kapsamdan bir işlev iletebilirsiniz. Daha sonra işlev çağırma işleminden sonra, yürütme içeriği bozulmadan kalır ve ilettiğiniz işlev ne olursa olsun someVar kullanılabilir olacaktır.

Buna, closure oluşturma denir.

Çağırmaya bir değer aktardığınızı ve someVar numaralı telefona atadığınızı varsayalım. return öğesinin foo değişkenine çağıran bir işlev olabilir. Bu işlev someVar referanslarını döndürdüğünüzde, o değeri almak için bu işlevi kullanabilirsiniz.

var foo = (function (str) { 
    var someVar = str; 
/* 
    function someFunc() { 
     return true; 
    } 
*/ 
    return function() { 
     alert(someVar); 
    }; 
})('somevalue'); 

foo(); // alerts 'somevalue' 

Gördüğünüz gibi, şimdi yine someVar erişebilir foo tarafından referans işlevi.

foo'a döndürülen işlev, myVar değerini güncelleştirecek bir bağımsız değişkeni kabul edecek şekilde değiştirdiğinizi varsayalım. onun değerini değiştirmek ve daha önce ayarlanmış olduğunu yeni değeri başvurmak mümkün olduğu gibi

var foo = (function (str) { 
    var someVar = str; 
/* 
    function someFunc() { 
     return true; 
    } 
*/ 
    return function(n) { 
     if(n) { 
      someVar = n; 
     } else { 
      alert(someVar); 
     } 
    }; 
})('somevalue'); 

foo(); // alerts 'somevalue' 

foo('newvalue'); // give it a new value 

foo(); // alerts 'newvalue' 

Şimdi, foo işlevi gerçekten bu değişkene erişme yaptığı görebilirsiniz. daha genel durumda değil, spesifik jQuery durum sorar olarak

7

Parantezler, parametreleri sonradan ekleyerek doğrudan çağrılabilen bir değişken yapmak için anonim bir işlev etrafında sarılır.

(function(param) { 
    // do stuff 
})(param); 

Sondaki bit bir ad alanı değil, yalnızca bir parametre. Ne yapar jQuery anonim işlevi kapsamında yer nesne $ değişken hale işlevine de jQuery nesnesi geçmesi olduğunu

(function($) { 
    $('.something').addClass('.other'); 
})(jQuery); 

: Muhtemelen bu kadar jQuery için kullanılan gördük. İnsanlar, shorthand $'u kullanmayı sever, ancak diğer kütüphanelerle çakışmaya neden olabilir. Bu teknik, tam işlevli jQuery nesnesini $ değişkeninin içine girip üzerine yazarak bir çakışma olasılığını ortadan kaldırır, böylece kısayol kullanılabilir.