Ich habe in letzter Zeit viel Javascript gelesen und festgestellt, dass die gesamte Datei wie folgt in die zu importierenden .js-Dateien eingeschlossen ist.

(function() {
    ... 
    code
    ...
})();

Was ist der Grund dafür und nicht ein einfacher Satz von Konstruktorfunktionen?

Es dient normalerweise zum Namespace (siehe später) und zur Steuerung der Sichtbarkeit von Elementfunktionen und / oder Variablen. Stellen Sie es sich wie eine Objektdefinition vor. Der technische Name dafür ist ein sofort aufgerufener Funktionsausdruck (IIFE). jQuery-Plugins werden normalerweise so geschrieben.

In Javascript können Sie Funktionen verschachteln. Folgendes ist also legal:

function outerFunction() {
   function innerFunction() {
      // code
   }
}

Jetzt können Sie anrufen outerFunction(), aber die Sichtbarkeit von innerFunction()ist auf den Umfang von beschränkt outerFunction(), was bedeutet, dass es privat ist outerFunction(). Es folgt im Wesentlichen dem gleichen Prinzip wie Variablen in Javascript:

var globalVariable;

function someFunction() {
   var localVariable;
}

Entsprechend:

function globalFunction() {

   var localFunction1 = function() {
       //I'm anonymous! But localFunction1 is a reference to me!
   };

   function localFunction2() {
      //I'm named!
   }
}

Im obigen Szenario können Sie globalFunction()von überall aus anrufen , aber nicht localFunction1oder localFunction2.

Wenn Sie schreiben (function() { ... })(), machen Sie den Code in den ersten Klammern zu einem Funktionsliteral (was bedeutet, dass das gesamte "Objekt" tatsächlich eine Funktion ist). Danach rufen ()Sie die gerade definierte Funktion (die letzte ) selbst auf . Der Hauptvorteil davon ist, wie ich bereits erwähnt habe, dass Sie private Methoden / Funktionen und Eigenschaften haben können:

(function() {
   var private_var;

   function private_function() {
     //code
   }
})();

Im ersten Beispiel würden Sie explizit globalFunctionnach Namen aufrufen , um es auszuführen. Das heißt, Sie würden es einfach tun globalFunction(), um es auszuführen. Im obigen Beispiel definieren Sie jedoch nicht nur eine Funktion. Sie definieren und rufen es auf einmal auf. Dies bedeutet, dass Ihre JavaScript-Datei beim Laden sofort ausgeführt wird. Natürlich können Sie Folgendes tun:

function globalFunction() {
    // code
}
globalFunction();

Das Verhalten wäre bis auf einen wesentlichen Unterschied weitgehend dasselbe: Sie vermeiden es, den globalen Bereich zu verschmutzen, wenn Sie ein IIFE verwenden (infolgedessen bedeutet dies auch, dass Sie die Funktion nicht mehrmals aufrufen können, da sie keinen Namen hat, sondern seitdem Diese Funktion soll nur ausgeführt werden, wenn sie wirklich kein Problem darstellt.

Das Schöne an IIFEs ist, dass Sie auch Dinge innerhalb definieren und nur die Teile, die Sie möchten, der Außenwelt aussetzen können (ein Beispiel für Namespace, damit Sie im Grunde Ihre eigene Bibliothek / Ihr eigenes Plugin erstellen können):

var myPlugin = (function() {
 var private_var;

 function private_function() {
 }

 return {
    public_function1: function() {
    },
    public_function2: function() {
    }
 }
})()

Jetzt können Sie anrufen myPlugin.public_function1(), aber Sie können nicht zugreifen private_function()! Also ziemlich ähnlich einer Klassendefinition. Um dies besser zu verstehen, empfehle ich die folgenden Links zur weiteren Lektüre:

• Namespacing Ihres Javascript
• Private Mitglieder in Javascript (von Douglas Crockford)

BEARBEITEN

Ich vergaß zu erwähnen. In diesem Finale ()können Sie alles übergeben, was Sie wollen. Wenn Sie beispielsweise jQuery-Plugins erstellen, übergeben Sie Folgendes jQueryoder möchten Folgendes $:

(function(jQ) { ... code ... })(jQuery) 

Sie definieren hier also eine Funktion, die einen Parameter akzeptiert (genannt jQ, eine lokale Variable, die nur dieser Funktion bekannt ist). Dann rufen Sie die Funktion selbst auf und übergeben einen Parameter (auch aufgerufen jQuery, aber dieser stammt aus der Außenwelt und verweist auf die eigentliche jQuery selbst). Es besteht keine dringende Notwendigkeit, dies zu tun, aber es gibt einige Vorteile:

• Sie können einen globalen Parameter neu definieren und ihm einen Namen geben, der im lokalen Bereich sinnvoll ist.
• Es gibt einen leichten Leistungsvorteil, da es schneller ist, Dinge im lokalen Bereich nachzuschlagen, als die Bereichskette in den globalen Bereich zu verschieben.
• Es gibt Vorteile für die Komprimierung (Minimierung).

Früher habe ich beschrieben, wie diese Funktionen beim Start automatisch ausgeführt werden. Wenn sie jedoch automatisch ausgeführt werden, wer übergibt die Argumente? Bei dieser Technik wird davon ausgegangen, dass alle von Ihnen benötigten Parameter bereits als globale Variablen definiert sind. Wenn jQuery nicht bereits als globale Variable definiert wäre, würde dieses Beispiel nicht funktionieren. Wie Sie vielleicht erraten haben, definiert jquery.js während der Initialisierung eine globale Variable 'jQuery' sowie die bekanntere globale Variable '$', mit der dieser Code nach dem Einfügen von jQuery funktioniert.

Zusamenfassend

Zusammenfassung

In ihrer einfachsten Form zielt diese Technik darauf ab, Code in einen Funktionsbereich einzubinden .

Es hilft, die Chancen zu verringern von:

• Kollision mit anderen Anwendungen / Bibliotheken
• Verschmutzung überlegener (weltweit wahrscheinlichster) Anwendungsbereich

Es ist nicht festzustellen , wann das Dokument fertig ist - es ist nicht irgendeine Art von document.onloadnochwindow.onload

Es ist allgemein als Immediately Invoked Function Expression (IIFE)oder bekannt Self Executing Anonymous Function.

Code erklärt

var someFunction = function(){ console.log('wagwan!'); };

(function() {                   /* function scope starts here */
  console.log('start of IIFE');

  var myNumber = 4;             /* number variable declaration */
  var myFunction = function(){  /* function variable declaration */
    console.log('formidable!'); 
  };
  var myObject = {              /* object variable declaration */
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
})();                           /* function scope ends */

someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

Im obigen Beispiel ist jede in der Funktion definierte Variable (dh deklariert mit var) "privat" und NUR innerhalb des Funktionsumfangs zugänglich (wie Vivin Paliath es ausdrückt). Mit anderen Worten, diese Variablen sind außerhalb der Funktion nicht sichtbar / erreichbar. Siehe Live-Demo .

Javascript hat Funktionsumfang. "In einer Funktion definierte Parameter und Variablen sind außerhalb der Funktion nicht sichtbar, und eine an einer beliebigen Stelle innerhalb einer Funktion definierte Variable ist überall in der Funktion sichtbar." (aus "Javascript: The Good Parts").

Mehr Details

Alternativer Code

Am Ende könnte der zuvor veröffentlichte Code auch wie folgt ausgeführt werden:

var someFunction = function(){ console.log('wagwan!'); };

var myMainFunction = function() {
  console.log('start of IIFE');

  var myNumber = 4;
  var myFunction = function(){ console.log('formidable!'); };
  var myObject = { 
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
};

myMainFunction();          // I CALL "myMainFunction" FUNCTION HERE
someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

Siehe Live-Demo .

Die Wurzeln

Iteration 1

Eines Tages dachte wahrscheinlich jemand: "Es muss eine Möglichkeit geben, die Benennung von 'myMainFunction' zu vermeiden, da wir sie nur sofort ausführen möchten."

Wenn Sie zu den Grundlagen zurückkehren, stellen Sie Folgendes fest:

• expression: etwas, das einen Wert ergibt. dh3+11/x
• statement: Codezeile (n), die etwas tun, ABER es wird kein Wert ausgewertet. dhif(){}

In ähnlicher Weise werden Funktionsausdrücke zu einem Wert ausgewertet. Und eine Konsequenz (nehme ich an?) Ist, dass sie sofort aufgerufen werden können:

 var italianSayinSomething = function(){ console.log('mamamia!'); }();

So wird unser komplexeres Beispiel:

var someFunction = function(){ console.log('wagwan!'); };

var myMainFunction = function() {
  console.log('start of IIFE');

  var myNumber = 4;
  var myFunction = function(){ console.log('formidable!'); };
  var myObject = { 
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
}();

someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

Siehe Live-Demo .

Iteration 2

Der nächste Schritt ist der Gedanke "Warum haben, var myMainFunction =wenn wir es nicht einmal benutzen!?".

Die Antwort ist einfach: Versuchen Sie, dies zu entfernen, wie unten:

 function(){ console.log('mamamia!'); }();

Siehe Live-Demo .

Es wird nicht funktionieren, weil "Funktionsdeklarationen nicht aufrufbar sind" .

Der Trick besteht darin, dass var myMainFunction =wir durch Entfernen den Funktionsausdruck in eine Funktionsdeklaration umgewandelt haben . Weitere Informationen hierzu finden Sie unter den Links unter "Ressourcen".

Die nächste Frage lautet: "Warum kann ich es nicht als Funktionsausdruck mit etwas anderem als behalten var myMainFunction =?

Die Antwort lautet "Sie können", und es gibt tatsächlich viele Möglichkeiten, wie Sie dies tun können: Hinzufügen von a +, a !, a -oder vielleicht in Klammern setzen (wie es jetzt durch Konvention geschieht), und mehr, glaube ich. Zum Beispiel:

 (function(){ console.log('mamamia!'); })(); // live demo: jsbin.com/zokuwodoco/1/edit?js,console.

oder

 +function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wuwipiyazi/1/edit?js,console

oder

 -function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wejupaheva/1/edit?js,console

• Was macht das Ausrufezeichen vor der Funktion?
• JavaScript-Pluszeichen vor Funktionsname

Sobald die relevante Änderung zu unserem früheren "alternativen Code" hinzugefügt wurde, kehren wir zu genau demselben Code zurück, der im Beispiel "Code Explained" verwendet wurde

var someFunction = function(){ console.log('wagwan!'); };

(function() {
  console.log('start of IIFE');

  var myNumber = 4;
  var myFunction = function(){ console.log('formidable!'); };
  var myObject = { 
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
})();

someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

Lesen Sie mehr über Expressions vs Statements:

• developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators
• developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions#Function_constructor_vs._function_declaration_vs._function_expression
• Javascript: Unterschied zwischen einer Aussage und einem Ausdruck?
• Ausdruck versus Aussage

Bereiche entmystifizieren

Eine Sache, die man sich fragen könnte, ist: "Was passiert, wenn Sie die Variable NICHT 'richtig' innerhalb der Funktion definieren - dh stattdessen eine einfache Zuweisung vornehmen?"

(function() {
  var myNumber = 4;             /* number variable declaration */
  var myFunction = function(){  /* function variable declaration */
    console.log('formidable!'); 
  };
  var myObject = {              /* object variable declaration */
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  myOtherFunction = function(){  /* oops, an assignment instead of a declaration */
    console.log('haha. got ya!');
  };
})();
myOtherFunction();         // reachable, hence works: see in the console
window.myOtherFunction();  // works in the browser, myOtherFunction is then in the global scope
myFunction();              // unreachable, will throw an error, see in the console

Siehe Live-Demo .

Wenn einer Variablen, die nicht in ihrem aktuellen Bereich deklariert wurde, ein Wert zugewiesen wird, wird "die Bereichskette nachgeschlagen, bis sie die Variable findet oder den globalen Bereich erreicht (an welchem ​​Punkt sie erstellt wird)".

In einer Browserumgebung (im Vergleich zu einer Serverumgebung wie nodejs) wird der globale Bereich durch das windowObjekt definiert . Daher können wir tun window.myOtherFunction().

Mein "Good Practices" -Tipp zu diesem Thema lautet: Verwenden Sie immer, varwenn Sie etwas definieren : ob es sich um eine Zahl, ein Objekt oder eine Funktion handelt, und selbst wenn Sie sich im globalen Bereich befinden. Dies macht den Code viel einfacher.

Hinweis:

• Javascript ist nicht hat block scope(Update: Block Umfang lokale in dem Nachspiel Variablen ES6 .)
• Javascript hat nur function scope& global scope( windowGültigkeitsbereich in einer Browser-Umgebung)

Lesen Sie mehr über Javascript Scopes:

• Was ist der Zweck des Schlüsselworts var und wann wird es verwendet (oder weggelassen)?
• Was ist der Umfang von Variablen in JavaScript?

Ressourcen

• youtu.be/i_qE1iAmjFg?t=2m15s - Paul Irish präsentiert das IIFE um 2:15 Uhr, sehen Sie sich das an!
• developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions
• Buch: Javascript, die guten Teile - sehr zu empfehlen
• youtu.be/i_qE1iAmjFg?t=4m36s - Paul Irish präsentiert das Modulmuster um 4:36 Uhr

Nächste Schritte

Sobald Sie dieses IIFEKonzept erhalten haben, führt es zu dem module pattern, was üblicherweise durch Nutzung dieses IIFE-Musters erfolgt. Habe Spaß :)

Javascript in einem Browser hat wirklich nur ein paar effektive Bereiche: Funktionsumfang und globaler Bereich.

Wenn sich eine Variable nicht im Funktionsbereich befindet, befindet sie sich im globalen Bereich. Und globale Variablen sind im Allgemeinen schlecht, daher ist dies ein Konstrukt, um die Variablen einer Bibliothek für sich zu behalten.

Das nennt man eine Schließung. Grundsätzlich wird der Code innerhalb der Funktion versiegelt, damit andere Bibliotheken ihn nicht stören. Es ähnelt dem Erstellen eines Namespace in kompilierten Sprachen.

Beispiel. Angenommen, ich schreibe:

(function() {

    var x = 2;

    // do stuff with x

})();

Jetzt können andere Bibliotheken nicht auf die Variable zugreifen, die xich zur Verwendung in meiner Bibliothek erstellt habe.

Sie können Funktionsabschlüsse auch als Daten in größeren Ausdrücken verwenden, wie bei dieser Methode zum Bestimmen der Browserunterstützung für einige der HTML5-Objekte.

   navigator.html5={
     canvas: (function(){
      var dc= document.createElement('canvas');
      if(!dc.getContext) return 0;
      var c= dc.getContext('2d');
      return typeof c.fillText== 'function'? 2: 1;
     })(),
     localStorage: (function(){
      return !!window.localStorage;
     })(),
     webworkers: (function(){
      return !!window.Worker;
     })(),
     offline: (function(){
      return !!window.applicationCache;
     })()
    }

Wenn Sie eine Bibliothek mit einer globalen Variablen schreiben, können Sie nicht nur die Variablen lokal halten, sondern auch einen kürzeren Variablennamen für die Bibliothek verwenden. Es wird häufig beim Schreiben von jQuery-Plugins verwendet, da Sie mit jQuery die auf jQuery verweisende Variable $ mit jQuery.noConflict () deaktivieren können. Falls es deaktiviert ist, kann Ihr Code weiterhin $ verwenden und nicht brechen, wenn Sie nur Folgendes tun:

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

1. Um Konflikte mit anderen Methoden / Bibliotheken im selben Fenster zu vermeiden,
2. Vermeiden Sie den globalen Bereich, machen Sie ihn zum lokalen Bereich.
3. Um das Debuggen zu beschleunigen (lokaler Bereich),
4. JavaScript hat nur Funktionsumfang, daher hilft es auch beim Kompilieren von Codes.

Wir sollten auch 'use strict' in der Scope-Funktion verwenden, um sicherzustellen, dass der Code im "strict mode" ausgeführt wird. Beispielcode unten gezeigt

(function() {
    'use strict';

    //Your code from here
})();