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