Что такое ИИФЭ?
Немедленно вызываемое функциональное выражение работает именно так, как оно звучит — это функция, которая запускается сразу после ее объявления.
Синтаксис выглядит следующим образом:
(() => { console.log("Hello, I am a self-invoking arrow function!"); })();
Запуск файла, содержащего IIFE, показывает, что традиционный синтаксис, обычно необходимый для вызова функции, не используется. Функция просто запускается там, где она была объявлена:
Хорошо, но когда я должен использовать это?
Есть несколько причин, по которым вам как разработчику Javascript необходимо знать о IIFE. Вот первая четверка:
1.Создание частной области: когда вы определяете переменные внутри IIFE, они недоступны вне функции. Это помогает предотвратить конфликты имен с другими переменными в вашем коде. Это полезно, когда вы хотите создать модуль или библиотеку, которые можно использовать в разных частях вашего приложения, не беспокоясь о конфликтах переменных. Вот пример частной области в IIFE, сохраняющей значение, защищенное в пределах области действия функции:
const myModule = (() => { const privateValue = 'secret'; const publicMethod = () => { console.log(`The private value is ${privateValue}`); }; return { publicMethod: publicMethod }; })(); myModule.publicMethod(); // Output: The private value is secret console.log(myModule.privateValue); // Output: undefined
2. Избегайте глобальных переменных. Доступ к глобальным переменным можно получить из любого места кода, что может привести к конфликтам имен и неожиданному поведению. Помещая свой код в IIFE, вы можете сохранить свои переменные и функции локальными для IIFE и избежать загрязнения глобального пространства имен.
3. Немедленный запуск кода. Иногда у вас может быть блок кода, который необходимо выполнить сразу после загрузки вашего скрипта. Помещая этот код в IIFE, вы можете гарантировать, что он запустится немедленно, без необходимости вызывать отдельную функцию.
4. Кэширование значений. Если у вас есть значение, которое дорого вычислить или получить, вы можете использовать IIFE для кэширования значения и использовать его несколько раз без повторного вычисления или извлечения.
Вот пример IIFE, реализующего простой механизм кэширования с использованием замыкания:
const getData = (() => { let cache = {}; const getDataFromServer = async (url) => { // Make an AJAX request to the server to get the data const response = await fetch(url); const data = await response.json(); // Cache the data for future requests cache[url] = data; return data; }; return async (url) => { if (cache[url]) { // If the data is already in the cache, return it console.log("Returning cached data"); return Promise.resolve(cache[url]); } else { // If the data is not in the cache, get it from the server and cache it console.log("Fetching data from server"); return getDataFromServer(url); } }; })(); // Use the getData function to fetch data from a URL getData("https://jsonplaceholder.typicode.com/posts/1") .then(data => console.log(data)); // The second time we call the function with the same URL, it will return the cached data getData("https://jsonplaceholder.typicode.com/posts/1") .then(data => console.log(data));
В этом примере мы используем IIFE для создания функции с именем getData
, которая реализует простой механизм кэширования для получения данных с сервера. Функция использует замыкание для хранения закрытого объекта cache
, который используется для кэширования данных для будущих запросов.
Когда функция getData
вызывается с URL-адресом, она проверяет, находятся ли данные уже в кеше. Если это так, он немедленно возвращает кэшированные данные. Если нет, он делает AJAX-запрос к серверу для получения данных, а затем кэширует их для будущих запросов.
Используя IIFE для создания функции getData
, мы можем гарантировать, что объект cache
доступен только внутри функции и не может быть изменен или доступен для внешнего кода. Это может помочь повысить надежность и производительность нашего приложения, избегая ненужных запросов к серверу и уменьшая сетевой трафик.
Что мне нужно знать о IIFE с ES6?
IIFE были частью JavaScript с самого начала и могут использоваться во всех версиях языка.
Тем не менее, ES6 представил новый способ создания блоков кода с их собственной областью действия, называемый «область видимости блока». Область видимости блока может быть достигнута с помощью ключевых слов let
и const
, которые позволяют вам определять переменные с областью действия блока, а не области действия функции.
Таким образом, хотя самовызывающиеся функции не являются специфическими для ES6, концепция создания локальных областей была улучшена в ES6 с добавлением области видимости блока.
Этот метод часто используется для создания локальной области видимости переменных и функций, поскольку переменные и функции, определенные внутри IIFE, недоступны за ее пределами.
Нашли ли вы инновационный вариант использования IIFE? Если это так, я хотел бы услышать об этом!