Sådan bruges ECMAScript-moduler til at opbygge modulære komponenter i JavaScript

JavaScript-moduler understøttes nu af browseren. Dette betyder, at du kan bruge denne fantastiske tilføjelse i JavaScript, der blev introduceret af ECMAScript 2015, i browseren. Tidligere var du nødt til at bruge en bundler såsom en webpack for at bruge moduler. Men ikke mere. Hvor cool er det ikke!

Så i denne artikel vil vi gå gennem JavaScript-moduler og undersøge, hvordan vi kan bruge dem i vores webapplikation.

Hvad er JavaScript-moduler, og hvorfor skal du bruge dem i stedet for et klassisk script?

JavaScript-moduler tillader os grundlæggende at importere en fil til en anden fil ved hjælp af import- og eksportmetoder. De giver os også mulighed for at bygge modulære komponenter, der kan genbruges.

Hvorfor bruge JavaScript-moduler?

Der er mange fordele, der følger med at bruge JavaScript-moduler i din app i stedet for et klassisk script:

  • Opdeling af din app i moduler: At opbygge din app med moduler gør den mere effektiv og øger effektiviteten af ​​din kode. Ved at bruge disse moduler kan du dovne indlæse din kode, og du kan kun bruge den kode, du har brug for, og undgå ubrugt kode.
  • Brug af streng tilstand som standard: Ja, streng tilstand er som standard aktiveret i JavaScript-moduler.
  • Udskydningsmetoden bruges som standard
  • Dette betyder, at din HTML-kode indlæses parallelt med JavaScript. Så du behøver ikke at tilføje deferattribute til dit script-tag, når du bruger ECMAScript.
  • Det importerer dine moduler dynamisk
  • Med JavaScript-moduler kan du tilpasse indlæsningen af ​​dine moduler ved at køre en dynamisk funktion, der importerer et modul, hvis du har brug for det. Dette antager, at når en bruger besøger dit websted, skal du kun indlæse det modul, der håndterer profilen, i tilfælde af, at brugeren er logget ind. Dette forklares tydeligt i eksemplet herunder:

usermodule.js

profile.js

Sådan bruges moduler

I denne del skal vi nu undersøge måderne at bruge JavaScript-moduler på. Du kan nemt bruge et JavaScript-modul ved at specificere attributtypen til modulet i script-tagget, der implementerer din vigtigste JavaScript-fil. Nu kan du bruge import- og eksportmetoden til at importere dine moduler.

Og inde i din main.js kan du importere og eksportere dine moduler:

Brug af eksportmetoden i profile.js:

Som vist i ovenstående eksempel er det let at bruge ECMAScript-moduler - der er ingen kompleks kode i dette tilfælde.

Når du indstiller typen i modulet, registrerer browseren automatisk, at filen er et modul og behandler det som et JavaScript-modul.

På en anden måde kan du indstille .mjs-udvidelsen til filen, så browseren kan identificere modulet. Men dette gør ikke store ændringer, hvis du indstiller typeattributten som et modul til script-tagget.

Browserstøtte

Det ser ud til, at kun de moderne browsere understøtter JavaScript-moduler. Men det er okay, hvis du bruger fantastiske browsere som Chrome, Edge og Firefox.

Jeg har ikke brug for at bruge bundlere mere?

Addy Osmani og Mathias Bynens forklarer i denne artikel, at du sandsynligvis ikke har brug for en webbundler såsom webpack, hvis du udvikler en webapp med mindre end 100 moduler. Du kan tjekke artiklen, hvor de har udsat for bedste praksis og god brug af ECMAScript-moduler her.

Find koden i GitHub-arkivet her.

Afslutter

JavaScript-moduler er en fantastisk måde at øge ydeevnen for din app. De giver dig mulighed for at gøre mange ting, der gør din app mere performant som en dynamisk belastning af dine moduler, doven indlæsning og mere. Desuden er den gode ting, at den understøtter browseren. Så tøv ikke med at drage fordel af dem, hvis du ikke bruger en filbundter.

Oprindeligt offentliggjort på Zeolearn

Deltag i Min klasse for at lære Bootstrap om Skill Share

Tidligere artikler:

  • JavaScript ES6 - Skriv mindre, gør mere
  • Lær Bootstrap 4 på 30 minutter ved at opbygge et landing et websted
  • Vinkel 6 og det er nye funktioner, alt sammen forklaret på tre minutter
  • Sådan bruges routing i Vue.js til at skabe en bedre brugeroplevelse
  • Her er de mest populære måder at fremsætte en HTTP-anmodning i JavaScript
  • Lær hvordan du opretter din første kantede app på 20 minutter