Get best of the week

Warum ist es an der Zeit, JavaScript IIFE nicht mehr zu verwenden?

Die IIFE-Funktion (Immediated Invoked Function Expression) in JavaScript ist ein Konstrukt, mit dem Sie eine Funktion unmittelbar nach ihrer Definition aufrufen können.

Bild

In diesem Artikel werden wir verstehen, warum es sich lohnt, die Verwendung von IIFE trotz seiner früheren Vorzüge aufzugeben.

Wir können Variablen in autonomen Blöcken deklarieren


Seit der Einführung des ES6-Standards können wir Variablen und Konstanten innerhalb eines Blocks mit let und const deklarieren. Zusammen mit diesem Standard wurde es auch möglich, Variablen und Konstanten in autonomen Blöcken zuzuordnen, auf die von außen nicht zugegriffen werden kann.

Zum Beispiel:

{
 let x = 1;
}

Dann ist x nicht extern zugänglich. Das ist eindeutig besser als:

(()=>{
 let x = 1;
})();

Da ES6 von fast allen modernen Browsern unterstützt wird, müssen wir IIFE nicht mehr verwenden, um Variablen von der Außenwelt zu trennen. Eine andere Möglichkeit, Variablen zu isolieren, besteht in Modulen, die jetzt auch keine Probleme mehr haben, sie zu unterstützen. Bis wir sie exportieren, sind sie für andere Module nicht verfügbar.

Wir können fast alle Verschlüsse loswerden


Das Schließen ist ein Mechanismus, mit dem sich eine Funktion ihre externen Variablen merkt und auf diese zugreifen kann. Wenn wir innerhalb der Funktion eine andere erstellen und diese zurückgeben, kann die zurückgegebene Funktion auf externe Variablen zugreifen, die für die externe Funktion intern sind.

Zum Beispiel können wir hier einige Nebenwirkungen bekommen:

const id = (() => {
 let count = 0;
 return () => {
   ++count;
   return `id_${count}`;
 };
})();

Auch hier macht es keinen Sinn, diesen ganzen Garten einzäunen, da wir autonome Blöcke und Module zur Datenisolierung haben. Wir können dies alles einfach in unser eigenes Modul einfügen, dann müssen wir uns nicht um den Datenzugriff kümmern.

Verschlüsse verursachen Nebenwirkungen, die nicht sehr gut sind, da Best Practices und gesunder Menschenverstand uns anweisen, sie nach Möglichkeit zu vermeiden. Sie machen es schwierig, Funktionen zu testen, die in diesem Fall nicht sauber sind.

Außerdem sollten Sie keine verschachtelten Funktionen erstellen, wenn dies vermieden werden kann: Mit ihnen wird der Code verwirrender als ohne sie.
Die beste Alternative besteht darin, sie durch Module zu ersetzen:

let count = 0;
export const id = () => {
 ++this.count;
 return `id_${count}`
}

Im obigen Code haben wir dieselbe Deklaration für die Zählvariable und exportieren die Funktion id (), damit sie anderen Modulen zur Verfügung steht. Also verstecken wir count und öffnen id (), wie wir wollten, nur ohne IIFE. Infolgedessen erhalten wir weniger Verschachtelung und müssen nicht mehr eine andere Funktion definieren und ausführen.

Wir können Aliase für Variablen unterschiedlich erstellen.


Wir könnten das schreiben:

window.$ = function foo() {
 // ...
};(function($) {
 // ...
})(jQuery);

Jetzt muss IIFE nicht mehr zum Erstellen von Aliasen verwendet werden. Mithilfe von Modulen können wir einfach eine Variable unter einem anderen Namen importieren und dadurch einen Alias ​​dafür erstellen.

Und dann schreibe einfach:

import { $ as jQuery } from "jquery";
const $ = () => {};

Darüber hinaus sollten Sie dem Fensterobjekt keine neuen Eigenschaften hinzufügen, da dies den globalen Bereich verschmutzt.

Wir können leicht ein globales Objekt bekommen.


Mit dem Aufkommen von globalThis müssen wir uns nicht mehr um den Namen des globalen Objekts in verschiedenen Umgebungen kümmern, da es zum Standard wird.

Wir könnten IIFE verwenden, um ein globales Objekt zu erfassen:

(function(global) {
 // ...
})(this);

Aber jetzt ist das nicht nötig. Ja, und bevor es möglich war, darauf zu verzichten, schreiben Sie einfach die folgende Zeile:

const globalObj = self || window || global;

Genauer gesagt können Sie Folgendes schreiben:

const getGlobal = () => {
 if (typeof self !== 'undefined') { return self; }
 if (typeof window !== 'undefined') { return window; }
 if (typeof global !== 'undefined') { return global; }
 throw new Error('unable to locate global object');
};

Und dann können Sie keinen zusätzlichen Funktionsaufruf und keine Verschachtelung hinzufügen, die bei Verwendung von IIFE angezeigt werden.

Wir können die Minimierung erleichtern


Mit JavaScript-Modulen müssen wir den Rest des Codes nicht mehr von IIFE trennen, um unsere Dateien ordnungsgemäß zu minimieren.

Webpack, Browserify, Parcel, Rollup usw. können ordnungsgemäß mit Modulen arbeiten. Daher müssen wir sie verwenden, um saubereren Code zu erstellen.

Fazit


Es ist Zeit, die Verwendung von IIFE in unserem Code einzustellen. Dies fügt zusätzliche Funktionalität und redundante Verschachtelung hinzu.

Außerdem ist dies jetzt ein Anachronismus: IIFE wurde bereits vor dem Aufkommen und der weit verbreiteten Verwendung von Modulen in JavaScript verwendet. Im Jahr 2020 müssen wir Module und autonome Blöcke verwenden, um den Code zu trennen.

Um den externen Zugriff auf Variablen innerhalb des Moduls zu verhindern, können wir Blockbereiche verwenden.

More articles:


All Articles