Welchen Sinn hat es, ganze Javascript-Dateien in anonyme Funktionen wie "(function(){ })()" zu verpacken?

Question

Ich habe in letzter Zeit viel über Javascript gelesen und mir ist aufgefallen, dass die gesamte Datei wie folgt in die zu importierenden .js-Dateien eingepackt ist.

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

Was ist der Grund dafür, dies zu tun und nicht einfach eine Reihe von Konstruktorfunktionen zu verwenden?

Answer 1

Neben der Möglichkeit, die Variablen lokal zu halten, ist es auch sehr praktisch, wenn man eine Bibliothek schreibt, die eine globale Variable verwendet, der man einen kürzeren Variablennamen geben kann, um sie innerhalb der Bibliothek zu verwenden. Dies wird oft beim Schreiben von jQuery-Plugins verwendet, da jQuery es erlaubt, die $-Variable, die auf jQuery zeigt, mit jQuery.noConflict() zu deaktivieren. Falls sie deaktiviert ist, kann Ihr Code immer noch $ verwenden und bricht nicht ab, wenn Sie es einfach tun:

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

Answer 2

1. Um Überschneidungen mit anderen Methoden/Bibliotheken im selben Fenster zu vermeiden,
2. Vermeiden Sie den globalen Geltungsbereich, machen Sie ihn zum lokalen Geltungsbereich,
3. Um die Fehlersuche zu beschleunigen (lokaler Bereich),
4. JavaScript hat nur einen Funktionsumfang, so dass es auch bei der Kompilierung von Codes helfen wird.

Answer 3

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

(function() {
    'use strict';

    //Your code from here
})();

Answer 4

Geben Sie ein Beispiel für die akzeptierte Antwort, von https://requirejs.org/docs/whyamd.html :

(function () {
    var $ = this.jQuery;

    this.myExample = function () {};
}());

Der Code zeigt, dass wir das können:

1. Verwendung globaler Variablen innerhalb des Geltungsbereichs
2. Export von Funktionen, Variablen usw. durch Bindung an this das ist die window Objekt wie bei Browsern.