Welchen Zweck erfüllt das? IIFE Zuordnung zu var in Snap.svg.js

Question

Meine selbständige Javascript-Studie hat mich schließlich zum Lesen von Bibliotheken geführt, wo ich das folgende Snippet fand (abgeschnitten für die Kürze). Ich benutze Firefox mit Firebug auf einem Windows Apache Server (XAMPP).

Ich dachte, das Snippet unten würde genügen, aber wenn jemand es braucht, kann die gesamte Bibliothek finden Sie hier: snap.svg.js on github

var Snap = (function(root) { 
 
Snap.version = "0.4.0"; 
 

 
function Snap(w, h) {   \t // can be either width, height OR 
 
\t if (w) { 
 
\t \t if (w.nodeType) {      // deterimines if parameter is a dom element 
 
\t \t \t return wrap(w); 
 
\t \t } 
 
\t \t if (is(w, "array") && Snap.set) {  // deterimines if parameter is an array 
 
\t \t \t return Snap.set.apply(Snap, w); 
 
\t \t } 
 
\t \t if (w instanceof Element) {    // deterimines if parameter is a Snap.Element 
 
\t \t \t return w; 
 
\t \t } 
 
\t \t if (h == null) {       // by elimination determines if parameter is a dom element id. 
 
\t \t \t w = glob.doc.querySelector(String(w)); 
 
\t \t \t return wrap(w); 
 
\t \t } 
 
\t } 
 

 
<numerous public and private properties and methods> \t 
 
. 
 
. 
 
. 
 
glob.win.Snap = Snap; 
 
return Snap; 
 
}(window || this));

Firebug zeigt das Snap-Objekt im Fenster Kontext vor Instanziieren beliebige Benutzerobjekte. Ich habe mich gefragt, welcher Mechanismus das Snap-Objekt in das DOM injiziert hat. Da fiel mir der "var Snap" auf. Anfangs dachte ich, das war es. Aber da es die App nicht kaputt machte, als ich den Variablennamen änderte oder sogar löschte, wurde ich verwirrt.

Weitere Untersuchungen führten zu der Entdeckung am Ende des Lebens ... speziell "glob.win.Snap = Snap". Da "Fenster" in das Leben übertragen wird, scheint es das zu sein, was tatsächlich das Snap-Objekt in dem Fenster erzeugt. Das Ändern des Namens in glob.win.Snappy hat dies bestätigt.

Ich lerne immer noch so bitte korrigieren Sie mich, wenn ich falsch liege. Ich versuche zu verstehen, was mit dieser Bibliothek passiert. Es scheint, dass die Funktion Snap() in den Fensterkontext über die glob.win.Snap-Zuweisung eingefügt wird. Ich sehe nicht, dass die "var Snap" an der Spitze oder die "Return Snap" nichts tun. In der Tat kann ich sie ausgliedern und alles scheint gut zu funktionieren. Also, meine erste Frage: Haben diese beiden Linien eine Funktion, die ich nicht sehe?

Eine zweite Frage ist: Worauf bezieht sich der "this" Fallback-Parameter? Mein begrenztes Verständnis von Snap ist, dass es immer innerhalb des Fenster-Namespace verwendet wird, also wäre "das" nicht immer das Fenster?

Gerade wenn ich denke, dass ich den Paradigmenwechsel von der klassischen zur prototypischen Sprache beginne, stoße ich auf Code wie diesen und er setzt mich zurück. Ich würde wirklich eine Einsicht schätzen.

Answer 1

hatte ich einen Blick auf den Quellcode verwiesen, hier eine verkürzte Version:

var Snap = (function(root) { 
    Snap.version = "0.4.0"; 

    function Snap(w, h) {} 

    var glob = { 
     win: root.window, 
     doc: root.window.document 
    }; 

    ... 

    glob.win.Snap = Snap; 
    return Snap; 
}(window || this)); 

Snap.plugin(...); 

Es scheint, dass die Funktion Schnapp() an das Fenster injiziert wird Kontext über die glob.win .Snap-Zuweisung. Ich sehe nicht, dass die "var Snap" an der Spitze oder die "Return Snap" nichts tun.

Sie richtig sind, ist die Erklärung von var Snap = ...; und Zuordnung über return Snap; überflüssig, denn das variable Leben im globalen Bereich (dh das Window-Objekt) und wird bereits erklärt von glob.win.Snap = Snap;

Ich nehme sie nur keept dass var Erklärung, da es ziemlich Standard, wenn die Klassenmuster mit:

var MyClass = (function() { 
    function MyClass(n) {} 
    return MyClass; 
})(); 

Eine zweite Frage ist: Was bedeutet die „dieses“ Rückfall par Ameter beziehen sich auf? Mein begrenztes Verständnis von Snap ist, dass es immer innerhalb des Fenster-Namespace verwendet wird, also wäre "das" nicht immer das Fenster?

In einigen JavaScript-Umgebungen wird das Wurzelobjekt nicht window (z.B. global in node.js) genannt. window || this wird zum Wurzelobjekt ausgewertet, egal wie es heißt.

Solche Abhängigkeitsinjektionen werden häufig in JavaScript-Modulen angezeigt. Siehe https://carldanley.com/js-module-pattern/ für mehr.

Es scheint jedoch, dass diese Bibliothek nicht ausgeführt wird, wenn kein window Objekt aufgrund der var glob = { win: root.window, ... } Zuweisung verfügbar ist. Sie könnten nur die this da drin behalten haben, weil es Teil eines Standardmodulmusters ist.