Cas d'utilisation iife: les expressions de fonction immédiatement invoquées en action

L'expression fonctionnelle (iife) immédiatement appelée, également connue sous le nom de fonction d'auto-exécution, est un bloc de code défini et exécuté immédiatement après la création. Les fonctions internes peuvent utiliser des mots clés (méthodes traditionnelles) ou des fonctions fléchées. De toute façon, la fonction entière est incluse dans une paire de supports, puis avec une paire de supports. Cette deuxième paire de supports consiste à appeler l'opérateur, ce qui permet à la fonction de s'exécuter immédiatement.

function Grammaire traditionnelle qui utilise la déclaration de fonction:

Syntaxe de la fonction de flèche:

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

Maintenant, nous savons ce qui est iife, et la question suivante est pourquoi elle est utile? Voici quelques cas:

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

En créant une nouvelle portée pour éviter la pollution, l'espace de dénomination mondial

Créer des fermetures avec des variables privées
utilisé pour effectuer des fonctions asynchrones et d'attente
La création du module
• En fait, une grande partie de mon travail quotidien est d'utiliser des marionnettistes pour effectuer des tests automatisés. Ces scripts de marionnettiste sont énormes (généralement des milliers de présidents), qui exécutent le code de l'interface utilisateur d'application de test (UI). Dans tous les cas, continuons à discuter de nos cas d'utilisation.

Évitez l'espace de dénomination global de la pollution

Qu'est-ce que cela signifie? Cela signifie essentiellement un conflit entre le nom entre les variables globales et la variable locale du même nom. Cela devient plus évident dans les grandes applications d'entreprise. L'exemple suivant l'illustre.

Après avoir exécuté ce code, la sortie est la suivante:

<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>

Créer des fermetures avec des variables privées

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

En regardant en arrière, la fermeture est une fonction interne qui peut accéder aux variables dans la portée de la fonction externe. Cet exemple iife de cette zone circulaire de calcul l'illustre. De plus, les variables des fonctions externes sont privées car elles ne sont pas accessibles en dehors de la fonction.

Sortie:

<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>

utilisé pour effectuer des fonctions asynchrones et d'attente

iife peut également être utilisé pour effectuer des opérations asynchrones, telles que les appels de réseau. Les exemples suivants obtiennent la liste des éléments à obtenir à partir du serveur analogique.

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

La création du module

Il s'agit d'un module utilisant des équations physiques de base. Il peut être exporté et utilisé par d'autres programmes. Je vais en discuter davantage dans un autre article "en utilisant le mode du module iife pour créer une application de calcul physique de ligne de commande". Veuillez faire attention à l'utilisation de variables privées et de fermetures.

<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>

On peut voir que l'IIFE a d'innombrables cas d'utilisation. Il peut améliorer la sécurité des données en emballant les données et en ajoutant la modularisation aux applications.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!