Maison > interface Web > js tutoriel > Cas d'utilisation iife: les expressions de fonction immédiatement invoquées en action

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

Mary-Kate Olsen
Libérer: 2025-01-27 10:31:09
original
655 Les gens l'ont consulté

IIFE Use Cases: Immediately Invoked Function Expressions In 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:
(
    function () {
        console.log('IIFE called');
    }
)();
Copier après la connexion

Maintenant, nous savons ce qui est iife, et la question suivante est pourquoi elle est utile? Voici quelques cas: <用>
(
    () => console.log('IIFE with arrow function called')
)();
Copier après la connexion

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:

// 全局作用域
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);
    }
)();
Copier après la connexion

Créer des fermetures avec des variables privées

<code>现在位于全局作用域
此变量位于全局作用域中,名为 'value'。
*********************************************************
现在位于 IIFE 的函数作用域
此变量位于函数作用域中,即使重用了变量名 'value',也避免了全局污染</code>
Copier après la connexion
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: <<>

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
Copier après la connexion
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>
Copier après la connexion

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.
(
    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);
    }
)();
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal