JavaScript moduļi – imports/eksports REACT

Izpētīsim nedaudz vairāk par moduļiem.

Moduļi var palīdzēt saglabāt kodu un piekļūt tam strukturētāk, un šajā rakstā jūs uzzināsiet par dažiem pamata jēdzieniem darbā ar JavaScript moduļiem.

Šīs zināšanas ir ļoti svarīgas, lai izprastu sintaksi un loģiku, React lietotnes ir saliktas kopā.

Šajā rakstā tiks aplūkoti trīs galvenie jēdzieni:

  • JavaScript moduļi
  • Moduļu eksports
  • Moduļu imports

JavaScript moduļi

JavaScript programmā modulis ir vienkārši fails.

Moduļa mērķis ir vairāk modulāra koda, kurā varat strādāt ar mazākiem failiem, kā arī importēt un eksportēt tos, lai jūsu izveidotās lietotnes būtu vairāk pielāgojamas un tām būtu vairāk saliekamo daļu.

Modulis var būt tikpat vienkāršs kā viena funkcija atsevišķā failā.

Aplūkojiet šādu funkciju deklarāciju:

function addTwo(a, b) {
    console.log(a + b);
}

Pieņemsim, ka jums ir fails ar nosaukumu addTwo.js, kurā ir tikai iepriekš minētais kods.

Kā padarīt šo failu par JavaScript moduli?

Viss, kas jums jādara, lai padarītu to par JavaScript moduli, ir izmantot eksportēšanas sintaksi.

Moduļu eksports

Ir vairāk nekā viens veids, kā eksportēt moduli JavaScript.

Lai gan visas dažādās sintaktiskās atšķirības nav uzskaitītas, šeit ir daži piemēri, kas aptvers visus veidus, kā parasti tiek veikta JavaScript moduļu importēšana un eksportēšana.

Kopumā ir divi veidi, kā eksportēt moduļus JavaScript:

  • Izmantojot noklusējuma eksportu
  • Izmantojot nosaukto eksportu

Noklusējuma eksportēšana

Katram JavaScript modulim var būt viens noklusējuma eksports.

Izmantojot iepriekš minēto failu addTwo.js kā piemēru, šeit ir divi veidi, kā veikt noklusējuma eksportēšanu.

export default function addTwo(a, b) {
    console.log(a + b);
}

Tātad iepriekš minētajā piemērā jūs pievienojat eksportēšanas noklusējuma atslēgvārdus pirms funkcijas addTwo deklarācijas.

Šeit ir alternatīva sintakse:

function addTwo(a, b) {
    console.log(a + b);
}


export default addTwo;

Nosauktie Eksporti

Eksportēšana ar nosaukumu ir veids, kā eksportēt tikai noteiktas attiecīgā JavaScript faila daļas.

Atšķirībā no noklusējuma eksportēšanas, no jebkura JavaScript faila varat eksportēt tik daudz vienumu, cik vēlaties.

Citiem vārdiem sakot, var būt tikai viens noklusējuma eksports, bet tik daudz nosaukto eksportēšanas vienumu, cik vēlaties.

Piemēram:

function addTwo(a, b) {
    console.log(a + b);
}


function addThree(a + b + c) {
    console.log(a + b + c);
}

Ja vēlaties eksportēt gan addTwo, gan addThree funkcijas kā nosauktus eksportus, viens no veidiem, kā to izdarīt, būtu šāds:

export function addTwo(a, b) {
    console.log(a + b);
}


export function addThree(a + b + c) {
    console.log(a + b + c);
}
Šeit ir vēl viens veids, kā to izdarīt:

function addTwo(a, b) {
    console.log(a + b);
}


function addThree(a + b + c) {
    console.log(a + b + c);
}


export { addTwo, addThree };

Moduļu importēšana

Tāpat kā eksportējot moduļus JavaScript, ir vairāki veidi, kā tos importēt.

Precīza sintakse ir atkarīga no tā, kā modulis tika eksportēts.

Pieņemsim, ka mapē ir divi moduļi.

Pirmais modulis ir addTwo.js, bet otrais modulis ir mathOperations.js.

Jūs vēlaties importēt moduli addTwo.js mathOperations.js modulī.

Moduļa importēšana, kas tika eksportēts kā noklusējuma
Apsveriet iepriekšējo piemēru, kā eksportēt funkciju addTwo kā noklusējuma moduli:

// addTwo.js module:
function addTwo(a, b) {
    console.log(a + b);
}


export default addTwo;

Lai to importētu mathOperations.js modulī, varat izmantot šādu sintaksi:

import addTwo from "./addTwo";


// pārējais mathOperations.js kods tiek rakstīts šeit

Tātad, lai jūs varētu sākt šo importēšanu jāsāk ar:

  1. importēšanas atslēgvārdu,
  2. pēc tam ar nosaukumu, ar kuru izmantosit šo importēto kodu mathOperations.js failā.
  3. Pēc tam ievadiet atslēgvārdu no…
  4. un visbeidzot faila atrašanās vietu bez paplašinājuma .js.

Salīdziniet iepriekšminēto noklusējuma addTwo eksporta importēšanu ar atšķirīgu importēšanas sintaksi, ja funkcija addTwo bija nosaukta eksportēšana:

import { addTwo } from "./addTwo";


// pārējais mathOperations.js tiek likts šeit

Secinājums

Šajā rakstā jūs uzzinājāt par JavaScript moduļu pamatiem, kāpēc tie tiek izmantoti un kā tie tiek eksportēti un importēti.

Šeit redzamie piemēri ir pamatā tam, kā jūs nodarbosieties ar dažādu moduļu importēšanu un eksportēšanu izmantojot React lietotņu piemērā.

Tomēr, lūdzu, ņemiet vērā, ka darbam ar JavaScript moduļiem ir daudz vairāk brīdinājumu un noteikumu. Šajā rakstā sniegtie piemēri ir paredzēti, lai būtu vieglāk saprast, kas notiek React lietotnēs, kuras veidosiet nākotnē. Šī raksta mērķis bija tikai iepazīstināt jūs ar visbiežāk izmantoto sintaksi, nevis kā visaptverošu JavaScript moduļu pārskatu.

Loading

Noderīgs raksts? Dalies ar citiem:
Dalīties: