Šiandien JavaScript vaidina didžiulį vaidmenį kuriant svetaines. „Front-end“ kūrėjai naudoja „JavaScript“ interaktyvioms žiniatinklio programoms kurti. Dėl to išaugo „JavaScript“ kūrėjų paklausa.
Žinoma, „JavaScript“ bėgant metams vystėsi. ES6 kalboje pristatė daug naujų funkcijų. Vienas iš jų yra būdas lengvai bendrinti kodus tarp „JavaScript“ failų.
„JavaScript“ funkcijų importavimas ir eksportavimas yra naujos funkcijos, kurios padės jums tapti geresniu kūrėju. Štai kaip veikia šios funkcijos.
Kas yra „JavaScript“ modulis?
„JavaScript“ modulis yra „JavaScript“ failas, kuriame yra kodo rinkinys, kurį galite naudoti. Moduliai paprastai įrašomi į atskirus failus ir importuojami naudojant importuoti raktažodį. Tai sutaupo laiko ir pastangų, nes vėliau galėsite pakartotinai panaudoti.
Pavyzdžiui, jei turite funkciją, vadinamą apskaičiuotiSuma(), galite įtraukti jį į kitą failą ir padaryti jį prieinamą bet kurioje projekto vietoje naudodami eksportuoti ir importuoti JavaScript veikia be jokių rūpesčių.
Vienas iš modulių naudojimo pranašumų yra tai, kad tai padeda tvarkyti kodą. Taip pat jūsų kodas tampa lengviau valdomas ir lengviau derinamas.
Norėdami naudoti „JavaScript“ failą kaip modulį, savo HTML dokumente turite sukurti scenarijų su a type="modulis".
<scenarijaus tipas ="modulis" src="failoName.js"></script>
Yra dviejų tipų moduliai:
- ECMAScript moduliai: standartiniai JavaScript moduliai ir palaikomi visose pagrindinėse naršyklėse.
- CommonJS moduliai: yra senesni ir nėra plačiai palaikomi.
Čia daugiausia dėmesio skirsime ECMAScript moduliams. Jei reikia, apsilankykite mūsų įvadas į JavaScript kad sugrąžintumėte pagrindus.
Kaip eksportuoti funkcijas į „JavaScript“.
„JavaScript“ programoje funkcijos yra pirmos klasės objektai, kurie gali būti perduodami kaip argumentai, be to, jie naudojami atskirai. Funkcijų eksportavimas yra geras būdas jas perkelti į kitas programas. Jis taip pat naudojamas, kai norite sukurti daugkartinio naudojimo bibliotekas.
„JavaScript“ funkcijos eksportuojamos naudojant eksportuoti funkcija. The eksportuoti funkcija eksportuoja nurodytą funkciją, kad ją naudotų kitas failas arba scenarijus. Eksportuojant mūsų pačių funkcijos, galime juos laisvai naudoti kituose failuose ar scenarijuose, nesijaudindami dėl licencijavimo problemų.
Yra du būdai naudoti eksportuoti efektyviai funkcionuoti. Apžvelgsime juos pateikdami kodų pavyzdžius.
Tarkime, kad turite failą gauti PersonalDetails.js kuri turi funkciją, kuri grąžina visą vartotojo vardą po raginimo įvesties. Funkcija atrodo taip:
funkcijagautiFullName(pilnas vardas){
fullName = prompt('Koks tavo pirmas vardas');
konsolė.log (fullName);
}
- Galite eksportuoti šią funkciją tiesiog naudodami eksportuoti raktinis žodis, po kurio glaustuose skliaustuose nurodomas funkcijos pavadinimas. Tai atrodo taip:
eksportuoti {getFullName}; - Antrasis būdas yra pridėti eksportuoti raktinį žodį prieš pat deklaruodami funkciją.
eksportuotifunkcijagautiFullName (pilnas vardas){...}
Galite eksportuoti kelias funkcijas naudodami pirmąjį metodą. Tai atliekama įtraukiant norimų funkcijų pavadinimus į garbanotąjį skliaustą. Funkcijos atskiriamos kableliais.
Pavyzdžiui: Tarkime, kad turite tris mūsų funkcijas gauti PersonalDetails.js failą - gautiFullName(),getEmail (), getDob (). Galite eksportuoti funkcijas pridėdami šią kodo eilutę:
eksportuoti {getFullName, getEmail, getDob};
Kaip importuoti „JavaScript“ funkcijas
Norėdami naudoti modulį, pirmiausia turite jį importuoti. Bet kurią funkciją galima importuoti naudojant viso kelio nuorodą.
Funkcijų importavimas yra gana paprastas. „JavaScript“ turi integruotą funkciją, leidžiančią importuoti savo funkcijas iš kitų failų. Jei norite pasiekti tas funkcijas iš kitų modulių, pravartu įtraukti funkcijų deklaraciją kiekvienai savo paslaugų programai.
Importuotina funkcija jau eksportuota į pradinį failą.
Galite importuoti funkcijas iš kito failo naudodami importuoti raktinio žodžio funkcionalumas. Importuoti leidžia pasirinkti, kurią failo ar modulio dalį įkelti.
Štai kaip jūs importuojate mūsų gautiFullName funkcija nuo gauti PersonalDetails.js:
importuoti {getFullName} iš „./getPersonalDetails.js“Taip šią funkciją bus galima naudoti dabartiniame faile.
Norint importuoti kelias funkcijas, importuojamos funkcijos įtraukiamos į riestinius skliaustus. Kiekvienas atskiriamas kableliu (,).
importuoti {getFullName, getEmail, getDob} iš „./getPersonalDetails.js“Yra ir kitas būdas naudoti importuoti funkcionalumą. Tai leidžia importuoti visus eksportuotus duomenis į tam tikrą failą. Tai atliekama naudojant importuoti * kaip sintaksė.
Galite importuoti visą mūsų eksportą gauti PersonalDetails.js pridedant šią kodo eilutę:
importuoti * kaip asmeninių detalių modulis iš „./getPersonalDetails.js“Aukščiau bus sukurtas objektas, vadinamas asmeninių detalių modulis.
Tai tik kintamasis pavadinimas, kurį galite pavadinti bet kuo.
Šiame objekte yra visi mūsų eksportuojami produktai getPersonalDetails.js. Funkcijos saugomos šiame objekte ir jas galima pasiekti taip, kaip pasiekiate bet kurią objekto nuosavybę.
Pavyzdžiui, mes galime pasiekti gautiFullName funkcija pridedant šią kodo eilutę
asmeninių detalių modulis.getFullName();Kas yra numatytasis eksportavimas?
Eksportuoti pagal numatytuosius nustatymus yra išskirtinė eksporto funkcija. Tai naudojama, jei iš failo eksportuojamas tik vienas kintamasis. Jis taip pat naudojamas norint sukurti atsarginę failo ar modulio vertę.
Žemiau pateikiamas pavyzdys, kai naudojome gautiFullName veikia kaip numatytoji:
eksportuotinumatytasfunkcijagautiFullName (pilnas vardas){...}Kiekviename modulyje ar faile negalite turėti daugiau nei vienos numatytosios reikšmės.
Funkcija, naudojama kaip numatytoji, importuojama kitaip. Štai kaip importuoti mūsų gautiFullName funkcija naudojama kaip numatytoji:
importuoti pilnas vardas iš „./getPersonalDetails.js“Štai skirtumai:
- Aplink importuotą vertę nėra garbanotų petnešų, pilnas vardas.
- pilnas vardas čia tik kintamojo pavadinimas. Jis išsaugo bet kokios numatytosios funkcijos reikšmę.
Papildykite savo „JavaScript“ funkcijas
„JavaScript“ moduliai yra kodo dalys, kurias galima pakartotinai naudoti kitose kodo dalyse, naudojant „JavaScript“ importavimo ir eksportavimo funkcijas. Paprastai jie rašomi atskirais failais ir importuojami naudojant importavimo raktinį žodį. Vienas iš modulių naudojimo pranašumų yra tai, kad tai padeda tvarkyti kodą. Taip pat jūsų kodas tampa lengviau valdomas ir lengviau derinamas.
