Как использовать оператор экспорта и импорта

В прошлом разработчики JavaScript хотели разделить свой код на модули. Существует ряд библиотек и фреймворков JavaScript, которые позволяют использовать модули, которые им приходилось использовать AMD, CommonJS, UMD и другие.

Модули

В JavaScript один скрипт — это один модуль. Модуль — это не что иное, как файл JavaScript.

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

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

Операторы Import и Export — это две замечательные функции, представленные в ES6 (ES2015). Эти два утверждения позволяют вам экспортировать и импортировать свой код и использовать его, когда вам это нужно.

заявление об экспорте

Если вы хотите экспортировать какую-либо переменную, функцию или класс, вы должны поместить ключевое слово export перед ним.

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

Существует два вида экспорта:

  1. Именованные экспорты: когда дело доходит до именованных экспортов, вы можете создать их столько, сколько захотите. Нет предела
  2. Экспорт по умолчанию (один на модуль)

Давайте разберемся с этим на простом примере

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

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

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

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

экспортировать «как»

Мы также можем использовать as для экспорта под разными именами.

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

Например, давайте экспортируем sum в локальную переменную как aadd и экспортируем square как sq.

заявление об импорте

Если вы хотите импортировать некоторый код, вы должны использовать оператор import. Помните, что это будет работать только с кодом, который вы экспортировали с помощью инструкции export. Вы не можете импортировать то, что не экспортировали.

Пример синтаксиса импорта

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

Именованный импорт

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

Пример 1:-

Пример 2:-

Импорт по умолчанию

Если вы экспортировали некоторые модули как default, вы можете выбрать любое имя для импорта этого модуля. И не заключайте имя модуля в фигурные скобки, если хотите импортировать экспорт по умолчанию. В противном случае JavaScript выдаст ошибку. Одна важная вещь. Когда вы импортируете что-то вроде default, вы не используете ключевое слово variable.

Импортировать «как»

Мы также можем использовать as для импорта под разными именами.

Оператор import также позволяет вам переименовывать импортируемые файлы. Это может быть удобно, когда вы хотите импортировать какой-либо модуль, но хотите использовать его под другим именем. Синтаксис аналогичен синтаксису переименования экспортов. Единственное отличие состоит в том, что вы замените оператор export на import.

Например, давайте импортируем sum в локальную переменную как aadd и импортируем square как sq.

Краткое содержание

Заключение:

Как видите, модульный JavaScript позволяет импортировать и экспортировать код JavaScript. Ваш код разбивается на более мелкие файлы, что экономит время и упрощает понимание кода. Операторы импорта и экспорта — это две функции, которые могут быть очень удобными. Они могут помочь вам сделать ваш код более понятным и простым в управлении и сопровождении.

Вот и все для этой статьи, я надеюсь, что вы узнали что-то новое сегодня.