Moduler i JavaScript
Den här artikeln förklarar moduler i JavaScript.
YouTube Video
Moduler i JavaScript
Moduler i JavaScript är ett sätt att organisera kod och dela upp den i återanvändbara komponenter. Genom att använda moduler förbättras kodens läsbarhet och underhållbarhet, och samma funktionalitet kan återanvändas i andra projekt. Här förklarar vi olika modulsystem, från modulkonceptet till specifika användningsexempel.
Konceptet med JavaScript-moduler
JavaScript hade ursprungligen inget modulsystem. Men när applikationer blev större blev modularisering viktigt för att dela upp koden i mindre enheter för återanvändning. En modul är en kodbit med en specifik funktion som kan hanteras oberoende av annan kod, vilket möjliggör uppdelning i flera filer.
Huvudtyper av moduler
Det finns flera modulsystem i JavaScript. De vanligaste är ES-moduler (ESM) och CommonJS.
-
ES-moduler är ett modulsystem som introducerades i ECMAScript 2015 (ES6), vilket definierar moduler med hjälp av nyckelorden
importochexport. Detta system används i stor utsträckning både på klientsidan (webbläsare) och serversidan (Node.js). -
CommonJS är ett modulsystem som främst används i Node.js. Moduler definieras med hjälp av
requireochmodule.exportsför att importera och exportera filer.
Detaljer om ES-moduler (ESM)
ES-moduler är det standardiserade modulsystemet i JavaScript och möjliggör enkel utväxling av funktioner mellan moduler. I webbläsare och Node.js används detta system för att definiera och importera moduler.
export och import
export är ett nyckelord för att exponera funktioner från en modul till omvärlden. import används för att införliva funktioner som definierats i andra moduler.
Exempel: Modul-export
Moduler kan exporteras i ES-moduler på följande sätt.
1// math.mjs
2export function add(a, b) {
3 return a + b;
4}
5export function subtract(a, b) {
6 return a - b;
7}I denna math.mjs-modul exporteras funktionerna add och subtract. Dessa funktioner kan importeras från andra moduler.
Här är .mjs en filändelse som tydligt anger en JavaScript-fil i ES-modulformat. I Node.js avgör filändelsen om det är CommonJS eller ES-moduler. Men om type: "module" anges i package.json behandlas filer med .js-ändelsen som ES-moduler som standard.
Exempel: Modulimport
Moduler kan importeras i ES-moduler på följande sätt.
1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3
På detta sätt kan du enkelt använda funktioner som definieras i andra filer genom att använda import.
Standardexport och Namngiven Export
Det finns två exportmetoder för moduler. Den ena är namngiven export, och den andra är standardexport.
- Namngivna exporter används när man exporterar flera funktioner eller variabler från en modul. Du kan göra flera exporter, och vid import tar du emot dem med angivna namn.
1// utils.mjs
2export function sum(a, b) {
3 return a + b;
4}
5export function multiply(a, b) {
6 return a * b;
7}1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6)); // 10
5console.log(multiply(3, 5)); // 15
- Standardexport används när man exporterar en enda funktion eller klass från en modul. Vid import kan den tas emot med valfritt namn.
1// greet.mjs
2export default function greet() {
3 return "Hello, World!";
4}1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"
Endast en standardexport är möjlig, men namngivna exporter kan exportera flera element samtidigt.
Exempel på användning på klientsidan (webbläsare).
Exempel: Modul-export
Moduler kan exporteras i ES-moduler på följande sätt.
1// utils.js
2export function sum(a, b) {
3 return a + b;
4}
5export function multiply(a, b) {
6 return a * b;
7}I denna utils.js-modul exporteras funktionerna sum och multiply.
Exempel: Modulimport
Moduler kan importeras på klientsidan på följande sätt.
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <title>ES Modules Sample in HTML</title>
6</head>
7<body>
8 <h1>ES Modules Sample</h1>
9 <div id="result"></div>
10
11 <script type="module">
12 import { sum, multiply } from './utils.js';
13
14 const result = `
15 <p>sum(3, 5) = ${sum(3, 5)}</p>
16 <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17 `;
18
19 document.getElementById('result').innerHTML = result;
20 console.log(sum(3, 5)); // 8
21 console.log(multiply(10, 7)); // 70
22 </script>
23</body>
24</html>- Genom att ange
type-attributet för<script>-taggen tillmodulekan ES-modulsyntax somimportochexportanvändas inom HTML. import-satsen laddar in externautils.jsoch visar resultatet.
Detaljer om CommonJS
CommonJS är ett modulsystem som huvudsakligen används i Node.js. Moduler exporteras och importeras med hjälp av module.exports och require.
require och module.exports
I CommonJS används module.exports för att exportera moduler. Dessutom används require för att använda moduler från andra filer.
Exempel: Modul-export
Moduler kan exporteras i CommonJS på följande sätt.
1// math.js
2module.exports = {
3 add: function(a, b) {
4 return a + b;
5 },
6 subtract: function(a, b) {
7 return a - b;
8 }
9};Exempel: Modulimport
Moduler kan importeras i CommonJS på följande sätt.
1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7)); // 11
5console.log(math.subtract(9, 2)); // 7
I Node.js används CommonJS som standardmodulsystem, men ES-moduler stöds också.
Dynamisk Import
I JavaScript kan moduler importeras dynamiskt med hjälp av import(). Denna metod använder asynkron bearbetning för att ladda moduler vid behov.
Dynamiska importer kan göras på följande sätt.
1async function loadModule() {
2 const math = await import('./math.js');
3 console.log(math.add(5, 3)); // 8
4}
5
6loadModule();Dynamisk import är ett sätt att förbättra applikationens prestanda. Eftersom du kan ladda moduler vid behov istället för att ladda alla vid den initiala inladdningen, förbättras sidans visningshastighet.
Fördelar med moduler
-
Återanvändning av kod
- Modulariserad kod kan återanvändas i andra projekt. Genom att skapa moduler med gemensam funktionalitet och använda dem i flera applikationer förbättras utvecklingseffektiviteten avsevärt.
-
Förbättrad underhållbarhet
- Genom att dela upp koden i moduler blir det enklare att ändra specifika funktioner eller delar. Att hantera kod i små enheter gör det lättare att hitta och åtgärda buggar.
-
Undvika namnrymdskollisioner
- Att definiera många variabler och funktioner i det globala omfånget kan leda till namnkonflikter, men modularisering förhindrar detta och hjälper till att hålla kodbasen renare.
-
Hantering av beroenden
- Genom att använda moduler kan du explicit hantera en applikations beroenden. Det blir tydligt vilken modul som är beroende av andra moduler, vilket gör kodstrukturen lättare att förstå.
Sammanfattning
JavaScripts modulsystem är ett kraftfullt sätt att organisera kod och dela upp den i återanvändbara komponenter. Genom att förstå skillnaderna mellan ES-moduler och CommonJS och välja det lämpliga modulsystemet baserat på projektet kan du förbättra kodens läsbarhet och underhållbarhet. Dessutom kan du genom att använda dynamiska importer optimera applikationens prestanda.
Låt oss dra nytta av modulsystemet för att bygga mer skalbara och effektiva JavaScript-applikationer.
Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.