jQuery $ (function() {}) vs (function() {}) ($)

Question

Ich verstehe, dass die folgende ist eine Abkürzung für $(document).ready():

$(function() { 
    console.log("ready!"); 
}); 

ich auch verstehen, was eine anonyme JS-Funktion ist, Aber macht jQuery etwas Besonderes, wenn es mit einem aufgerufen wird. D.h .:

(function() { 
    console.log("ready!"); 
})($); 

Ist letzteres nur eine normale anonyme JS-Funktion, die jQuery verwendet (dh. Es wird nicht eine Abkürzung für $(document).ready() in Betracht gezogen werden und wird so sofort ausführen)?

Ich denke, das muss schon mal gefragt worden sein, aber ich kann es nicht finden, wenn es so ist.

Answer 1

Wie Sie erwähnt haben, die erstere ist in der Tat eine Abkürzung für $(document).ready(). Was letzteres betrifft, ist dies nur ein sofort aufgerufener Funktionsausdruck.

(function ($) { 
    console.log('ready'); 
})(jQuery); 

Diese Funktion ist einfach eine anonyme Funktion, die einen Parameter $ Namen erhält. Die Funktion wird sofort aufgerufen mit einem Wert (in diesem Fall jQuery) als Parameter.

IIFEs kann auch auf isolieren Bereiche und globale Variablen vermeiden in Web-Anwendungen verwendet werden, die mehrere JavaScript-Dateien enthalten. In diesem Fall wird ein parameterlos IIFE verwendet werden könnte:

(function() { 
    // x is only accessible within this IIFE 
    var x; 
    // do something... 
})(); 

Weitere Informationen zu sofort aufgerufen Funktion Expression finden Sie diese Frage: What is the purpose of a self executing function in javascript?

Answer 2

Ist letzteres nur eine normale anonyme JS-Funktion, die jQuery (dh. NICHT Kürzel für $ (document) .ready() verwendet und so sofort ausgeführt wird)?

Yup, genau, es ist nur ein normaler IIFE, die die $ globale Variable als Argument

(function(dollarSignArgument) { 
    console.log("not really ready!"); 
})($) 

nimmt es sofort

ausgeführt werden

Answer 3

Die erste ist in der Tat ein abgekürztes für $(document).ready(), wie gezeigt here.

Aber die zweite ist sofort-aufgerufenen Funktionsausdruck (IIFE), eine anonyme Funktion, die deklariert und sofort aufgerufen wird.

In der Tat, die korrekte Syntax (das Argument in Ihrem Beispiel fehlt) ist:

(function($) { 
    //my $ object is local now 
})(jQuery); 

In diesem Fall sind Sie die anonyme Funktion mit einem Argument aufgerufen wird.

Der Hauptvorteil dieses Musters (IIFE) ist: isolieren Code (Sie so viele Variablen erstellen können, wie Sie wollen, und es wird Umfang, wenn Sie etwas zurück in Ihre anonyme Funktion eingeschränkt werden). Dieses Muster wird verwendet, um "private" und "public" Methoden zu definieren. Wie folgt aus:

var myModule = (function() { 

    function privateFunction() { console.log("I can't be accessed from outside :("; } 

    var privateVar = "me too :("; 

    function publicFunction() { console.log("Hey! I'm here!"; } 

    /* expose what you want */ 
    return { 
     publicFunction: publicFunction 
    } 

})(); 

myModule.publicFunction(); //Hey! I'm here! 
myModule.privateFunction(); //undefined; 

Sie können nennen es auch Modul Muster.

In Ihrem zweiten Beispiel rufen Sie die kürzlich erstellte anonyme Funktion mit einem Argument auf, und Ihre anonyme Funktion erhält dieses Argument. Dies ist ein Weg Abhängigkeit Injektion.

Auf diese Weise bearbeiten Sie Ihre globale Variable innerhalb der Funktion als lokal. Beachten Sie, dass wir im ersten Beispiel ein Objekt jQuery übergeben und es in Ihrer Funktion als $ manipulieren. Es ist schwieriger, jemanden das jQuery-Objekt zu überschreiben, aber einige Skripts können das globale Dollar-Symbol neu zuweisen, besonders wenn Sie nicht die volle Kontrolle über Ihre App haben.Auf diese Weise passieren Sie immer das Objekt jQuery und manipulieren es als $.

Am Ende, lassen Sie mich packte einige andere Vorteile Liste Parameter auf einen IIFE der Weitergabe von here:

• es schneller: JavaScript erste Lookup in den lokalen Bereich (vor klettern). Es kann die Leistung ein wenig verbessern.

• hilft minification: minifier kann nun Variablen in Ihrem Umfang zu einem Ein-Buchstaben-Wort benennen, wodurch die Codegröße.