2012-10-12 11 views
7

Vor kurzem wurde ich von jemand anderem Code zu lesen, und kam über diese:

// Semicolon (;) to ensure closing of earlier scripting 
// Encapsulation 
// $ is assigned to jQuery 
;(function($) { 

    // DOM Ready 
    $(function() { 
     ... 
    }); 

})(jQuery); 

ich den Punkt der führenden verstehen,, Und ich verstehe, dass $ (function() {ist das gleiche wie Dokument bereit, aber was ist der Punkt des Hinzufügens von Funktion ($)?

Ich verstehe, es ist eine Schließung, aber da dies immer auf globaler Ebene aufgerufen wird, scheint es, als ob Sie nicht ' t muss sich damit beschäftigen Das $ (function() {wird das selbe globale Objekt benutzen, nein?

Ist es gegen etwas zu schützen, oder ist es aus einem anderen Grund eine Best Practice?

Antwort

12

Es ist eine gemeinsame Struktur für ein jQuery-Plugin. Es schützt gegen die $ Kennung, die überschrieben und für etwas anderes benutzt worden ist. Innerhalb der anonymen Funktion wird sich $ immer auf jQuery beziehen.

Beispiel:

$ = "oh no"; 
$(function() { //Big problem! 
    //DOM ready 
}); 

durch einen neuen Rahmen der Einführung können Sie sicherstellen, dass $ bezieht sich auf das, was Sie es erwarten:

$ = "oh no"; 
(function($) { //New scope, $ is redeclared and jQuery is assigned to it 

    $(function() { //No problem! 
     //DOM ready 
    }); 

}(jQuery)); 

Der Haupt Überlegung dahinter ist, dass zahlreiche andere JavaScript-Bibliotheken Verwenden Sie $ als eine Kennung (z. B. PrototypeJS). Wenn Sie sowohl Prototype als auch jQuery verwenden möchten, müssen Sie Prototype mit der $-Kennung versehen lassen, aber wahrscheinlich nicht jedes Mal, wenn Sie eine jQuery-Methode aufrufen möchten, jQuery ausschreiben. Indem Sie einen neuen Bereich einführen, erlauben Sie jQuery, seine $ wieder in diesem Ausführungskontext zu haben.

1

Die Codebeispiel Sie zur Verfügung gestellt haben, ist ein Beispiel für eine Selbst Aufrufe Funktion:

(function(){ 
// some code… 
})(); 

Der erste Satz von Klammern eine Funktion definiert: (eine anonyme Funktion in Klammern eingewickelt)

(function() {}) 

Das definiert die anonyme Funktion. Alleine macht es nichts. Wenn Sie jedoch nach der Definition einen Satz Klammern () hinzufügen, entspricht dies den Klammern, die zum Aufrufen einer Funktion verwendet werden. Probieren Sie dies aus:

(function(message) { 
    alert(message); 
})("Hello World"); 

, die eine Funktion erstellt, die einen Parameter akzeptiert, und zeigt eine Warnung der bereitgestellten Wert. Dann ruft es diese Funktion sofort mit einem Parameter von "Hello World" auf.


In Ihrem Beispiel ist eine selbstaufrufende Funktion definiert. Es akzeptiert einen Parameter mit dem Namen $. Dann wird die Funktion sofort aufgerufen, wobei als Argument ein Verweis auf jQuery übergeben wird.

Dies ist üblich, wenn Sie möchten, dass jQuery im Modus noConflict() arbeitet (wodurch der globale Verweis auf $ entfernt wird).

In noConflict()-Modus können Sie immer noch Zugriff auf jQuery über die jQuery globale Variable, aber die meisten Leute würden eher $ verwenden, so dass dieser Selbst Aufruf Funktion übernimmt das globale jQuery Variable als Parameter $ im Rahmen der Funktion mit dem Namen, Dadurch können Sie die Verknüpfung $ innerhalb der selbstaufrufenden Funktion verwenden, während jQuery im Modus noConflict() ausgeführt wird, um Konflikte mit anderen Bibliotheken zu vermeiden, die $ im globalen Gültigkeitsbereich verwenden.

Hoffe das beantwortet Ihre Frage!

+0

Vielen Dank für diese Erklärung! – nycynik

Verwandte Themen