IIFE -Anwendungsfälle: Sofort auf Funktionsausdrücke in Aktion aufgerufen

Ein sofort aufgerufener Funktionsausdruck (IIFE), auch als selbstausführende Funktion bekannt, ist ein Codeblock, der unmittelbar nach der Erstellung definiert und ausgeführt wird. Innere Funktionen können das Schlüsselwort function (herkömmlich) oder Pfeilfunktionen verwenden. In jedem Fall wird die gesamte Funktion in ein Klammerpaar eingeschlossen, gefolgt von einem weiteren Klammerpaar. Dieses zweite Klammerpaar ist der Aufrufoperator, der die sofortige Ausführung der Funktion ermöglicht.

Verwenden Sie die traditionelle Syntax für Funktionsdeklarationen:

<code class="language-javascript">(
    function () {
        console.log('IIFE called');
    }
)();</code>

Syntax der Pfeilfunktion:

<code class="language-javascript">(
    () => console.log('IIFE with arrow function called')
)();</code>

Da wir nun wissen, was IIFE ist, stellt sich als nächstes die Frage: Warum ist es nützlich? Hier sind einige Anwendungsfälle:

• Vermeiden Sie die Verschmutzung des globalen Namespace durch die Erstellung neuer Bereiche
• Erstellen Sie einen Abschluss mit privaten Variablen
• Wird zum Ausführen asynchroner und Wartefunktionen verwendet
• Erstellung von Modulen

Tatsächlich besteht ein großer Teil meiner täglichen Arbeit darin, Puppeteer zur Durchführung automatisierter Tests zu verwenden. Diese Puppeteer-Skripte sind riesige IIFEs (oft Tausende von Zeilen lang), die Code ausführen, der die Benutzeroberfläche (UI) der Anwendung testet. Wie auch immer, kommen wir zu unserem Anwendungsfall.

Vermeiden Sie die Verschmutzung des globalen Namensraums

Was bedeutet das? Im Wesentlichen bedeutet dies, Namenskonflikte zwischen globalen und lokalen Variablen mit demselben Namen zu vermeiden. Dies wird bei großen Unternehmensanwendungen noch deutlicher, wo die Wahrscheinlichkeit der Wiederverwendung von Variablennamen steigt, insbesondere wenn mehrere Entwickler an derselben Anwendung arbeiten. Das folgende Beispiel veranschaulicht dies.

<code class="language-javascript">// 全局作用域
const value = "此变量位于全局作用域中，名为 'value'。";
const stateLocation = () => console.log("现在位于全局作用域");

stateLocation();
console.log(value);
console.log("*********************************************************");

(
    function () {
        // 函数作用域
        const value = "此变量位于函数作用域中，即使重用了变量名 'value'，也避免了全局污染";
        const stateLocation = () => console.log("现在位于 IIFE 的函数作用域");

        stateLocation();
        console.log(value);
    }
)();</code>

Nach der Ausführung dieses Codes sieht die Ausgabe wie folgt aus:

<code>现在位于全局作用域
此变量位于全局作用域中，名为 'value'。
*********************************************************
现在位于 IIFE 的函数作用域
此变量位于函数作用域中，即使重用了变量名 'value'，也避免了全局污染</code>

Erstellen Sie einen Abschluss mit privaten Variablen

Denken Sie daran, dass ein Abschluss eine innere Funktion ist, die Zugriff auf Variablen im Bereich der äußeren Funktion hat. Dieses IIFE-Beispiel zur Berechnung der Fläche eines Kreises veranschaulicht diesen Punkt. Darüber hinaus ist eine Variable in einer externen Funktion privat, da außerhalb der Funktion nicht auf sie zugegriffen werden kann.

<code class="language-javascript">const areaOfCircle = (
    function () {
        const pi = Math.PI; // 私有变量
        return function (radius) { // 具有访问外部作用域私有变量的闭包
            return pi * (radius ** 2);
        };
    }
)();

const areaWithRadius2 = areaOfCircle(10);
console.log('半径为 10 的圆的面积是', areaWithRadius2);
// console.log('PI = ', pi); // ReferenceError: pi is not defined</code>

Ausgabe:

<code>半径为 10 的圆的面积是 314.1592653589793</code>

Wird zum Ausführen asynchroner und Wartefunktionen verwendet

IIFE kann auch zur Durchführung asynchroner Vorgänge wie Netzwerkaufrufe verwendet werden. Das folgende Beispiel ruft eine Aufgabenliste von einem Scheinserver ab.

<code class="language-javascript">(
    async function () {
        const response = await fetch('https://dummyjson.com/todos');
        const todosObject = await response.json();
        const todoList = todosObject.todos.map(todo => todo.todo);
        console.log(todoList);
    }
)();</code>

Erstellung von Modulen

Dies ist ein Modul, das Operationen mithilfe grundlegender physikalischer Gleichungen ausführt. Es kann exportiert und von anderen Programmen verwendet werden. Ich werde dies in einem anderen Artikel näher erläutern: „Erstellen von Befehlszeilen-Physik-Computing-Anwendungen mithilfe des IIFE-Modulmusters“. Bitte beachten Sie die Verwendung privater Variablen und Abschlüsse.

<code class="language-javascript">export const physicsCalculations = (
    function () {

        // 下面的常量是私有变量
        const g = 9.80665; // 以米/秒平方为单位的重力常数
        const c = 299792458; // 以米/秒为单位的光速

        // 将作为此模块中的方法返回的函数
        const velocity = (distance, time) => distance / time;
        const acceleration = (speed, time) => speed / time;
        const potentialEnergy = (mass, height) => mass * g * height;
        const momentum = (mass, speed) => mass * speed;
        const energy = (mass) => mass * (c ** 2);
        const force = (mass, acc) => mass * acc;
        const kineticEnergy = (mass, speed) => 0.5 * mass * (speed ** 2);

        // 包含命名方法的对象，包括两个 getter 方法
        return {
            velocity,
            acceleration,
            potentialEnergy,
            momentum,
            energy,
            force,
            kineticEnergy,
            getSpeedOfLight: () => c,
            getGravityConstant: () => g
        };
    }
)();</code>

Wie Sie sehen, gibt es für IIFE unzählige Anwendungsfälle. Es kann die Datensicherheit verbessern, indem es Daten kapselt und Anwendungen modularer macht.

Das obige ist der detaillierte Inhalt vonIIFE -Anwendungsfälle: Sofort auf Funktionsausdrücke in Aktion aufgerufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!