Сегодня JavaScript играет огромную роль в разработке веб-сайтов. Front-end разработчики используют JavaScript для создания интерактивных веб-приложений. В результате увеличился спрос на разработчиков JavaScript.
Конечно, JavaScript развивался с годами. ES6 привнес в язык множество новых функций. Одним из них является способ легкого обмена кодами между файлами JavaScript.
Импорт и экспорт функций для JavaScript — это новые функции, которые сделают вас лучшим разработчиком. Вот как работают эти функции.
Что такое модуль JavaScript?
Модуль JavaScript — это файл JavaScript, содержащий набор кода, который вы можете использовать. Модули обычно записываются в отдельные файлы и импортируются с помощью Импортировать ключевое слово. Это экономит время и усилия, потому что вы можете повторно использовать его позже.
Например, если у вас есть функция с именем вычислитьсумму(), вы можете включить его в другой файл и сделать доступным в любом месте вашего проекта, используя экспорт и Импортировать JavaScript работает без суеты.
Одним из преимуществ использования модулей является то, что они помогают поддерживать порядок в коде. Это также делает ваш код более управляемым и легким для отладки.
Чтобы использовать файл JavaScript в качестве модуля, вам необходимо создать скрипт в HTML-документе с тип = "модуль".
<тип скрипта="модуль" источник="имя_файла.js"></script>
Существует два типа модулей:
- Модули ECMAScript: стандартные модули JavaScript, поддерживаемые всеми основными браузерами.
- Модули CommonJS: устарели и широко не поддерживаются.
Здесь мы сосредоточимся на модулях ECMAScript. При необходимости смотрите нашу введение в JavaScript освежить в памяти основы.
Как экспортировать функции в JavaScript
В JavaScript функции — это первоклассные объекты, которые могут быть переданы в качестве аргументов, а также использоваться сами по себе. Экспорт функций — хороший способ перенести их в другие программы. Он также используется, когда вы хотите создавать повторно используемые библиотеки.
Экспорт функций в JavaScript выполняется с помощью экспорт функция. экспорт function экспортирует данную функцию для использования другим файлом или сценарием. Экспорт наши собственные функции, мы можем свободно использовать их в других файлах или сценариях, не беспокоясь о проблемах с лицензией.
Существует два способа использования экспорт эффективно функционировать. Мы рассмотрим их с примерами кода.
Предположим, у вас есть файл получить личную информацию.js который имеет функцию, которая возвращает полное имя пользователя после быстрого ввода. Функция выглядит следующим образом:
функцияполучить полное имя(полное имя){
полное имя = подсказка ('Как тебя зовут');
консоль.log (полное имя);
}
- Вы можете экспортировать эту функцию, просто используя экспорт ключевое слово, за которым следует имя функции в фигурных скобках. Это выглядит так:
экспорт {получить полное имя}; - Второй способ заключается в добавлении экспорт ключевое слово непосредственно перед объявлением функции.
экспортфункцияполучить полное имя (полное имя){...}
Вы можете экспортировать несколько функций, используя первый метод. Это делается путем включения имен нужных функций в фигурные скобки. Функции разделяются запятой.
Например: Предположим, у вас есть три функции в нашем получить личную информацию.js файл - получитьПолноеИмя(),получить электронную почту (), получить Доб(). Вы можете экспортировать функции, добавив следующую строку кода:
экспорт {getFullName, getEmail, getDob};
Как импортировать функции в JavaScript
Чтобы использовать модуль, сначала необходимо его импортировать. Любую функцию можно импортировать, используя ссылку полного пути.
Импортировать функции довольно просто. В JavaScript есть встроенная функция для импорта собственных функций из других файлов. Если вы хотите получить доступ к этим функциям из других модулей, рекомендуется включить объявление функции для каждой из ваших утилит.
Импортируемая функция уже экспортирована в исходный файл.
Вы можете импортировать функции из другого файла, используя Импортировать функциональность ключевых слов. Импортировать позволяет выбрать, какую часть файла или модуля загрузить.
Вот как вы импортируете наши получить полное имя функция от получить личную информацию.js:
Импортировать {получить полное имя} от './getPersonalDetails.js'Это сделает эту функцию доступной для использования в нашем текущем файле.
Чтобы импортировать несколько функций, импортируемые функции заключаются в фигурные скобки. Каждый разделяется запятой (,).
Импортировать {getFullName, getEmail, getDob} от './getPersonalDetails.js'Есть еще один способ использования Импортировать функциональность. Это позволяет нам импортировать все экспорты в определенный файл. Это делается с помощью импортировать * как синтаксис.
Вы можете импортировать весь экспорт в нашем получить личную информацию.js добавив следующую строку кода:
Импортировать * как личныедеталиМодуль от './getPersonalDetails.js'Вышеприведенное создаст объект с именем Персональные сведенияМодуль.
Это просто имя переменной, вы можете назвать его как угодно.
Этот объект содержит все экспорты в нашем getPersonalDetails.js. Функции хранятся в этом объекте, и к ним можно обращаться так же, как к любому свойству объекта.
Например, мы можем получить доступ к получить полное имя функцию, добавив следующую строку кода
личныедеталиМодуль.getFullName();Что такое экспорт по умолчанию?
Экспорт по умолчанию исключительная функциональность экспорта. Это используется, если из файла экспортируется только одна переменная. Он также используется для создания резервного значения для файла или модуля.
Ниже приведен пример, где мы использовали получить полное имя функция по умолчанию:
экспортпо умолчаниюфункцияполучить полное имя (полное имя){...}Вы не можете иметь более одного значения по умолчанию в каждом модуле или файле.
Функция, используемая по умолчанию, импортируется по-разному. Вот как импортировать наш получить полное имя функция, используемая по умолчанию:
Импортировать полное имя от './getPersonalDetails.js'Вот отличия:
- Вокруг импортируемого значения нет фигурных скобок, полное имя.
- полное имя здесь просто имя переменной. Он хранит значение любой функции по умолчанию.
Усовершенствуйте свои функции JavaScript
Модули JavaScript — это фрагменты кода, которые можно повторно использовать в других частях вашего кода с помощью функций импорта и экспорта JavaScript. Обычно они записываются в отдельные файлы и импортируются с использованием ключевого слова import. Одним из преимуществ использования модулей является то, что они помогают поддерживать порядок в коде. Это также делает ваш код более управляемым и легким для отладки.
