Шпаргалка по импорту и экспорту ES6

От автора: в предлагаемой статье будут рассмотрены различные способы того, как импортировать и экспортировать файлы в ES6.

До того, как появился ES6, мы использовали несколько тегов скриптов в одном файле HTML для импорта разных файлов JavaScript, например:

Итак, если бы у нас была переменная с тем же именем в разных файлах JavaScript, это привело бы к конфликту имен, и ожидаемое вами значение не было бы фактическим значением, которое вы получили.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

ES6 исправил эту проблему с концепцией модулей. Каждый файл JavaScript, который мы пишем в ES6, называется модулем. Переменные и функции, которые мы объявляем в каждом файле, недоступны для других файлов, пока мы специально не экспортируем их из этого файла и не импортируем в другой файл.

Таким образом, функции и переменные, определенные в файле, являются приватными для каждого файла и не могут быть доступны вне файла, пока мы не экспортируем их. Есть два типа экспорта:

Именованный экспорт: в одном файле может быть несколько именованных экспортов.

Экспорт по умолчанию: в одном файле может быть только один экспорт по умолчанию.

Именованный экспорт в JavaScript

Чтобы экспортировать отдельное значение как именованный экспорт, мы экспортируем его следующим образом:

Если у нас есть несколько объектов для экспорта, мы можем написать оператор экспорта в отдельной строке, а не перед объявлением переменной. В фигурных скобках указываем, что нужно экспортировать.

Обратите внимание, что синтаксис экспорта не является синтаксисом объектного литерала. Итак, в ES6 для экспорта чего-либо мы не можем использовать такие пары ключ-значение:

Чтобы импортировать то, что мы экспортировали как именованный экспорт, мы используем следующий синтаксис:

Обратите внимание, что при импорте чего-либо из файла нам не нужно добавлять расширение .js к имени файла, поскольку оно считается по умолчанию.

Вот демонстрация Code Sandbox.

Следует отметить, что имя, используемое при экспорте, должно совпадать с именем, которое мы используем при импорте. Итак, если вы экспортируете как:

тогда при импорте вы должны использовать то же имя, что и при экспорте:

Вы не можете использовать другое имя:

Но если у вас уже есть переменная с тем же именем, что и у экспортируемой переменной, вы можете использовать синтаксис переименования при импорте следующим образом:

Здесь мы переименовали PI в PIValue, поэтому теперь мы не можем использовать имя переменной PI. Вместо этого мы должны использовать переменную PIValue, чтобы получить экспортированное значение PI. Мы также можем использовать синтаксис переименования во время экспорта:

то при импорте мы должны использовать PIValue:

Чтобы экспортировать что-либо как именованный экспорт, мы должны сначала его объявить.

Порядок, в котором мы импортируем несколько именованных экспортов, не важен. Взгляните на файл validations.js:

и в index.js мы используем эти функции, как показано ниже:

Вот демонстрация Code Sandbox.

Как видите, мы можем импортировать только необходимые экспортированные значения и в любом порядке, поэтому нам не нужно проверять, в каком порядке мы экспортировали в другой файл. В этом прелесть именованного экспорта.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Экспорт в JavaScript по умолчанию

Как я сказал ранее, в одном файле может быть не более одного экспорта по умолчанию. Однако вы можете объединить несколько именованных экспортов и один экспорт по умолчанию в одном файле.

Чтобы объявить экспорт по умолчанию, мы добавляем ключевое слово по умолчанию перед ключевым словом экспорта следующим образом:

Чтобы импортировать экспорт по умолчанию, мы не добавляем фигурные скобки, как это было в именованном экспорте, например:

Если у нас есть несколько именованных экспортов и один экспорт по умолчанию, например:

затем, чтобы импортировать все в одной строке, нам нужно использовать экспортируемую переменную по умолчанию только перед фигурной скобкой.

Одна из особенностей экспорта по умолчанию заключается в том, что мы можем изменить имя экспортируемой переменной во время импорта:

А в другом файле мы можем использовать другое имя при импорте

Здесь мы изменили имя экспортируемой переменной по умолчанию с AGE на myAge. Это работает, потому что по умолчанию может быть только один экспорт, поэтому вы можете называть его как хотите.

Еще одна вещь, на которую следует обратить внимание при экспорте по умолчанию, заключается в том, что ключевое слово export default не может предшествовать объявлению переменной:

поэтому мы должны использовать ключевое слово export default для экспорта в отдельной строке, например:

Однако мы можем экспортировать значение по умолчанию, не объявляя переменную следующим образом:

а в другом файле мы можем написать вот так:

Существует еще один способ импорта всех переменных, экспортированных в файл, с использованием следующего синтаксиса:

Здесь мы импортируем весь имеющийся у нас именованный экспорт и экспорт по умолчанию из constants.js и сохраняем его в переменной constants. Итак, constants теперь станет объектом.

А в другом файле мы используем его, как показано ниже:

Вот демонстрация Code Sandbox.

Если вы не хотите экспортировать в отдельные строки для экспорта по умолчанию и именованного экспорта, вы можете объединить его, как показано ниже:

Здесь мы экспортируем USER как экспорт по умолчанию, а другие как именованный экспорт. В другом файле вы можете использовать это так:

Вот демонстрация Code Sandbox.

Заключение

В ES6 данные, объявленные в одном файле, недоступны для другого файла, пока они не будут экспортированы из этого файла и импортированы в другой файл.

Если у нас есть один параметр в файле для экспорта, например, объявление класса, мы используем экспорт по умолчанию, в противном случае мы используем именованный экспорт. Мы также можем объединить экспорт по умолчанию и именованный экспорт в один файл.

Автор: Yogesh Chavan

Источник: blog.yogeshchavan.dev

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.