Kes Penggunaan IIFE: Segera menggunakan ekspresi fungsi dalam tindakan

Ungkapan fungsi yang dipanggil serta-merta (IIFE), juga dikenali sebagai fungsi laksana sendiri, ialah blok kod yang ditakrifkan dan dilaksanakan sebaik selepas penciptaan. Fungsi dalaman boleh menggunakan kata kunci function (cara tradisional) atau fungsi anak panah. Sama ada cara, keseluruhan fungsi disertakan dalam sepasang kurungan, diikuti oleh sepasang kurungan yang lain. Pasangan kedua kurungan ini ialah operator panggilan, yang membolehkan fungsi tersebut dilaksanakan dengan segera.

Gunakan sintaks tradisional untuk pengisytiharan fungsi:

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

Sintaks fungsi anak panah:

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

Sekarang kita tahu apa itu IIFE, soalan seterusnya ialah mengapa ia berguna? Berikut ialah beberapa kes penggunaan:

• Elakkan mencemarkan ruang nama global dengan mencipta skop baharu
• Buat penutupan dengan pembolehubah persendirian
• Digunakan untuk melaksanakan fungsi tak segerak dan menunggu
• Penciptaan modul

Malah, sebahagian besar kerja harian saya menggunakan Puppeteer untuk melakukan ujian automatik. Skrip Puppeteer ini ialah IIFE yang besar (selalunya beribu-ribu baris panjang) yang menjalankan kod yang menguji antara muka pengguna (UI) aplikasi. Apa-apa pun, mari kita beralih kepada kes penggunaan kita.

Elakkan mencemarkan ruang nama global

Apakah maksudnya? Ia pada asasnya bermakna mengelakkan konflik nama antara pembolehubah global dan tempatan dengan nama yang sama. Ini menjadi lebih jelas dalam aplikasi perusahaan besar, di mana kemungkinan untuk menggunakan semula nama pembolehubah meningkat, terutamanya apabila berbilang pembangun mengusahakan aplikasi yang sama. Contoh di bawah menggambarkan ini.

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

Selepas melaksanakan kod ini, output adalah seperti berikut:

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

Buat penutupan dengan pembolehubah persendirian

Ingat bahawa penutupan ialah fungsi dalaman yang mempunyai akses kepada pembolehubah dalam skop fungsi luar. Contoh IIFE pengiraan luas bulatan menggambarkan perkara ini. Tambahan pula, pembolehubah dalam fungsi luaran adalah peribadi kerana ia tidak boleh diakses di luar fungsi.

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

Output:

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

Digunakan untuk melaksanakan fungsi tak segerak dan menunggu

IIFE juga boleh digunakan untuk melakukan operasi tak segerak, seperti panggilan rangkaian. Contoh berikut mendapat senarai tugasan daripada pelayan olok-olok.

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

Penciptaan modul

Ini ialah modul yang melaksanakan operasi menggunakan persamaan fizik asas. Ia boleh dieksport dan digunakan oleh program lain. Saya akan membincangkan perkara ini dengan lebih lanjut dalam artikel lain, "Membina Aplikasi Pengkomputeran Fizik Baris Perintah Menggunakan Corak Modul IIFE." Sila ambil perhatian penggunaan pembolehubah persendirian dan penutupan.

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

Seperti yang anda lihat, IIFE mempunyai banyak kes penggunaan. Ia boleh meningkatkan keselamatan data dengan merangkum data dan menambah modulariti pada aplikasi.

Atas ialah kandungan terperinci Kes Penggunaan IIFE: Segera menggunakan ekspresi fungsi dalam tindakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!