Прежде всего, эта история основана на Стивене Кертисе -33 Основы, которые должен знать каждый разработчик Javascript, и вы можете прочитать ее здесь. Поэтому я решил изучить и объяснить эти концепции одну за другой.
№8. IIFE и модуль
IIFE
Если вы хотите создать переменную, к которой нельзя получить глобальный доступ, вы можете объявить переменную в локальной области видимости. Однако как сделать так, чтобы наша функция также не была доступна? Вот где на помощь приходит IIFE!!
IIFE (Immediately Invoked Function Expression) относится к функции, которая выполняется, как только она объявлена. IIFE состоит из двух частей: первая скобка, которая включает анонимную функцию, не имеющую имени функции, и вторая скобка, которая немедленно вызывает анонимную функцию.
Основной синтаксис показан ниже.
// IIFE defined with regular function syntax (function () { statements })(); // IIFE defined with arrow function syntax (()=>{ statements })();
Поскольку функция вызывается только один раз, нам больше не нужно давать ей имя.
Модуль
Если мы не используем модульную систему, переменные используются глобально. Давайте посмотрим, что я имею в виду на примере ниже.
<script defer src=”app.js”></script> <script defer src=”app2.js”></script>
Сначала мы импортируем app.js и app2.js в html-файл.
// app.js const age = 20;
В app.js мы объявляем age
и назначаем 20
// app2.js console.log(age);
В app2.js напишите одну строку кода, которая выводит age
на консоль.
Что будет регистрироваться на консоли???
Хотя age
был объявлен из файла app.js
, его можно прочитать внутри файла app2.js
, поскольку в этом случае все глобальные переменные являются общими.
Это не проблема, если вы достаточно сообразительны, чтобы помнить все переменные, объявленные глобально, и обладаете отличными навыками именования, чтобы каждая глобальная переменная имела другое имя. Но у большинства людей, включая меня, нет этих удивительных навыков. Вот тут-то и появляется модульная система ES6.
Модуль — это просто кусок кода, записанный в файле. Переменные и функции в модуле нельзя использовать из других модулей, если только файлы модуля не экспортированы.
<script type=’module’ defer src=”app.js”></script> <script type=’module’ defer src=”app2.js”></script>
Написав type= «module», мы можем просто использовать модульную систему. И это приведет к другому результату на консоли.
Чтобы использовать переменные, объявленные в другом модуле, мы должны их экспортировать. Но я не буду писать об этом здесь. Если вы хотите узнать больше нажмите здесь
Вывод
Честно говоря, я никогда не использовал IIFE в своих проектах. Мысль, что просто хорошо знать концепцию. Однако модуль — это то, что большинство из нас использует для создания больших проектов, не тратя время на размышления об уникальных именах переменных.
Я хочу, чтобы этот пост был полезен для вас, ребята. Если это было полезно, оставьте несколько ответов хлопков!!!
ссылка: средний