Концепт модула потиче из парадигме модуларног програмирања. Ова парадигма предлаже да софтвер треба да буде састављен од засебних, заменљивих компоненти тзв „модули“ разбијањем програмских функција у самосталне датотеке које могу да раде одвојено или повезане у апликација.
Модул је самостална датотека која инкапсулира код за имплементацију одређене функционалности и промовисање поновне употребе и организације.
Овде ћете покрити системе модула који се користе у ЈаваСцрипт апликацијама, укључујући образац модула, систем модула ЦоммонЈС који се користи у већини Ноде.јс апликација и ЕС6 Модуле систем.
Образац модула
Пре увођења изворних ЈаваСцрипт модула, образац дизајна модула је коришћен као систем модула за опсег променљивих и функција у једну датотеку.
Ово је имплементирано коришћењем израза функције који се одмах позивају, популарно познатих као ИИФЕ. ИИФЕ је функција за вишекратну употребу која се покреће чим се креира.
Ево основне структуре ИИФЕ:
(функција () {
//код овде
})();(() => {
//код овде
})();
(асинц () => {
//код овде
})();
Блок кода изнад описује ИИФЕ-ове који се користе у три различита контекста.
ИИФЕ-ови су коришћени зато што су променљиве декларисане унутар функције ограничене на функцију, што их чини само доступно унутар функције и зато што вам функције омогућавају да вратите податке (чините их јавним приступачан).
На пример:
конст фоо = (функција () {
конст рециНаме = (име) => {
конзола.Пријава(`Хеј, зовем се ${наме}`);
};
//Излагање променљивих
повратак {
цаллСаиНаме: (име) => рециИме (име),
};
})();
//Приступ изложеним методама
фоо.цаллСаиНаме("Бар");
Блок кода изнад је пример како су модули креирани пре увођења изворних ЈаваСцрипт модула.
Блок кода изнад садржи ИИФЕ. ИИФЕ садржи функцију коју чини приступачном тако што је враћа. Све варијабле декларисане у ИИФЕ су заштићене од глобалног опсега. Дакле, метод (саиНаме) је доступан само преко јавне функције, цаллСаиНаме.
Приметите да је ИИФЕ сачуван у променљивој, фоо. То је зато што, без променљиве која указује на њену локацију у меморији, променљиве ће бити недоступне након што се скрипта покрене. Овај образац је могућ због ЈаваСцрипт затварања.
Систем модула ЦоммонЈС
Систем модула ЦоммонЈС је формат модула који је дефинисала ЦоммонЈС група за решавање проблема са опсегом ЈаваСцрипта извршавањем сваког модула у његовом именском простору.
Систем модула ЦоммонЈС функционише тако што приморава модуле да експлицитно извозе променљиве које желе да изложе другим модулима.
Овај систем модула је креиран за ЈаваСцрипт на страни сервера (Ноде.јс) и, као такав, није подржан подразумевано у претраживачима.
Да бисте имплементирали ЦоммонЈС модуле у свој пројекат, прво морате да иницијализујете НПМ у својој апликацији тако што ћете покренути:
нпм инит -и
Променљиве извезене по систему ЦоммонЈС модула могу се увести на следећи начин:
//randomModule.js
//инсталирани пакет
конст ИнсталлИмпорт = захтевају("Назив пакета");
//локални модул
конст лоцалИмпорт = захтевају("/path-to-module");
Модули се увозе у ЦоммонЈС помоћу захтевају наредба, која чита ЈаваСцрипт датотеку, извршава прочитану датотеку и враћа извоза објекат. Тхе извоза објекат садржи све доступне извозе у модулу.
Можете да извезете променљиву пратећи систем модула ЦоммонЈС користећи или именоване извозе или подразумеване извозе.
Именовани извози
Именовани извози су извози идентификовани према називима којима су додељени. Именовани извози дозвољавају вишеструки извоз по модулу, за разлику од подразумеваних извоза.
На пример:
//main.js
екпортс.миЕкпорт = функција () {
конзола.лог("Ово је пример оф а именовани извоз");
};
екпортс.анотхерЕкпорт = функција () {
конзола.лог("Ово је још један пример оф а именовани извоз");
};
У блок кода изнад, извозите две именоване функције (миЕкпорт и анотхерЕкпорт) тако што ћете их причврстити за извоза објекат.
Слично томе, можете извести функције на следећи начин:
конст миЕкпорт = функција () {
конзола.лог("Ово је пример оф а именовани извоз");
};
конст анотхерЕкпорт = функција () {
конзола.лог("Ово је још један пример оф а именовани извоз");
};
модул.извоза = {
миЕкпорт,
други извоз,
};
У блоку кода изнад, постављате извоза објект на именоване функције. Можете доделити само извоза објекат на нови објекат кроз модул објекат.
Ваш код би избацио грешку ако бисте то покушали да урадите на овај начин:
//погрешан начин
извоза = {
миЕкпорт,
други извоз,
};
Постоје два начина на које можете да увезете именоване извозе:
1. Увезите све извозе као један објекат и приступите им засебно користећи ознака тачке.
На пример:
//otherModule.js
конст фоо = захтевају("./главни");
фоо.миЕкпорт();
фоо.анотхерЕкпорт();2. Деструктурирати извоз из извоза објекат.
На пример:
//otherModule.js
конст { миЕкпорт, анотхерЕкпорт } = захтевају("./главни");
миЕкпорт();
анотхерЕкпорт();
Једна ствар је заједничка у свим методама увоза, они морају бити увезени користећи иста имена са којима су извезени.
Подразумевани извози
Подразумевани извоз је извоз идентификован било којим именом по вашем избору. Можете имати само један подразумевани извоз по модулу.
На пример:
//main.js
класаФоо{
бар() {
конзола.лог("Ово је пример оф а Уобичајеноизвоз");
}
}
модул.извоза = Фоо;
У блоку кода изнад, извозите класу (Фоо) поновним додељивањем извоза приговорити томе.
Увоз подразумеваних извоза је сличан увозу именованих извоза, осим што можете да користите било које име по свом избору да бисте их увезли.
На пример:
//otherModule.js
конст Бар = захтевају("./главни");
конст објекат = Нова Бар();
објекат.бар();
У блоку кода изнад, подразумевани извоз је именован Бар, иако можете користити било које име по вашем избору.
Систем модула ЕС6
Систем модула ЕЦМАСцрипт Хармони, популарно познат као ЕС6 модули, је званични систем ЈаваСцрипт модула.
ЕС6 модуле подржавају претраживачи и сервери, иако вам је потребно мало конфигурације пре него што их користите.
У претраживачима морате навести тип као модул у ознаци за увоз скрипте.
Овако:
//index.html
<скрипт срц="./апп.јс" типе="модул"></script>
У Ноде.јс морате подесити тип до модул у вашем пацкаге.јсон фајл.
Овако:
//package.json
"тип":"модул"
Такође можете извести променљиве користећи систем модула ЕС6 користећи или именоване извозе или подразумеване извозе.
Именовани извози
Слично именованим увозима у ЦоммонЈС модулима, они се идентификују по именима која су им додељена и дозвољавају вишеструки извоз по модулу.
На пример:
//main.js
извозконст миЕкпорт = функција () {
конзола.лог("Ово је пример оф а именовани извоз");
};
извозконст анотхерЕкпорт = функција () {
конзола.лог("Ово је још један пример оф а именовани извоз");
};
У систему ЕС6 модула, именовани извози се извозе тако што се променљивој ставља префикс са извоз кључна реч.
Именовани извози се могу увести у други модул у ЕС6 на исте начине као ЦоммонЈС:
- Деструктурирање потребног извоза из извоза објекат.
- Увоз свих експортова као једног објекта и приступ им одвојено помоћу нотације тачке.
Ево примера деструктурирања:
//otherModule.js
увоз { миЕкпорт, анотхерЕкпорт } из "./маин.јс";
миЕкпорт()
анотхерЕкпорт()
Ево примера увоза целог објекта:
увоз * као фоо из './маин.јс'
фоо.миЕкпорт()
фоо.анотхерЕкпорт()
У блоку кода изнад, звездица (*) значи „све“. Тхе као кључна реч додељује извоза објекат на стринг који га прати, у овом случају, фоо.
Подразумевани извози
Слично подразумеваним извозима у ЦоммонЈС-у, они се идентификују било којим именом по вашем избору и можете имати само један подразумевани извоз по модулу.
На пример:
//main.js
класаФоо{
бар() {
конзола.лог("Ово је пример оф а Уобичајеноизвоз");
}
}
извозУобичајено Фоо;
Подразумевани извози се креирају додавањем Уобичајено кључна реч после извоз кључна реч, праћена именом извоза.
Увоз подразумеваних извоза је сличан увозу именованих извоза, осим што можете да користите било које име по свом избору да бисте их увезли.
На пример:
//otherModule.js
увоз Бар из "./маин.јс";
Микед Екпортс
Стандард ЕС6 модула вам омогућава да у једном модулу имате и подразумеване извозе и извозе по имену, за разлику од ЦоммонЈС-а.
На пример:
//main.js
извозконст миЕкпорт = функција () {
конзола.лог("Ово је још један пример оф а именовани извоз");
};
класаФоо{
бар() {
конзола.лог("Ово је пример оф а Уобичајеноизвоз");
}
}
извозУобичајено Фоо;
Важност модула
Подела вашег кода на модуле не само да их чини лакшим за читање, већ га чини више употребљивим и одржаваним. Модули у ЈаваСцрипт-у такође чине ваш код мање склоним грешкама, пошто се сви модули подразумевано извршавају у строгом режиму.
