Articles
Wprowadzenie do JavaScript
Moduły w JavaScript

Moduły w JavaScript

Ten artykuł wyjaśnia moduły w JavaScript.

YouTube Video

Moduły w JavaScript

Moduły w JavaScript to sposób na organizację kodu i podzielenie go na wielokrotne używalne komponenty. Dzięki stosowaniu modułów poprawia się czytelność i utrzymanie kodu, a te same funkcjonalności mogą być wykorzystywane w innych projektach. Tutaj wyjaśniamy różne systemy modułów, od koncepcji modułów po konkretne przykłady użycia.

Koncepcja modułów w JavaScript

JavaScript pierwotnie nie miał systemu modułów. Jednak w miarę jak aplikacje stawały się większe, modularizacja stała się ważna, aby dzielić kod na mniejsze jednostki do ponownego użycia. Moduł to fragment kodu z określoną funkcją, który może być zarządzany niezależnie od reszty kodu, co pozwala na podzielenie go na wiele plików.

Główne rodzaje modułów

W JavaScript istnieje kilka systemów modułów. Najczęściej używane to ES Modules (ESM) i CommonJS.

  • ES Modules to system modułów wprowadzony w ECMAScript 2015 (ES6), który definiuje moduły za pomocą słów kluczowych import oraz export. System ten jest szeroko stosowany zarówno po stronie klienta (przeglądarki), jak i po stronie serwera (Node.js).

  • CommonJS to system modułów używany głównie w Node.js. Moduły są definiowane za pomocą require i module.exports do importowania i eksportowania plików.

Szczegóły dotyczące ES Modules (ESM)

ES Modules to standardowy system modułów w JavaScript, który umożliwia łatwą wymianę funkcjonalności między modułami. W przeglądarkach i Node.js ten system jest używany do definiowania i importowania modułów.

export i import

export to słowo kluczowe umożliwiające udostępnianie funkcji modułu na zewnątrz. import służy do zastosowania funkcji zdefiniowanych w innych modułach.

Przykład: Eksport modułu

Moduły w ES Modules można eksportować w następujący sposób.

1// math.mjs
2export function add(a, b) {
3    return a + b;
4}
5export function subtract(a, b) {
6    return a - b;
7}

W tym module math.mjs funkcje add oraz subtract są eksportowane. Te funkcje mogą być importowane z innych modułów.

Tutaj .mjs to rozszerzenie pliku, które jednoznacznie wskazuje na plik JavaScript w formacie ES Modules. W Node.js rozszerzenie pliku decyduje o tym, czy jest to CommonJS, czy ES Modules. Jednak jeśli w pliku package.json określono type: "module", pliki z rozszerzeniem .js są domyślnie traktowane jako ES Modules.

Przykład: Import Modułu

Moduły można importować w ES Modules w następujący sposób.

1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3

W ten sposób, używając import, możesz łatwo korzystać z funkcji zdefiniowanych w innych plikach.

Eksport Domyślny i Eksport Nazwany

Istnieją dwie metody eksportu modułów. Jedną z nich jest eksport nazwany, a drugą eksport domyślny.

  • Eksport nazwany jest używany, gdy eksportujesz wiele funkcji lub zmiennych z modułu. Możesz wykonać wiele eksportów, a przy imporcie odbierać je używając określonych nazw.
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
  • Eksport domyślny jest stosowany, gdy z modułu eksportowana jest jedna funkcja lub klasa. Podczas importu może być odbierany pod dowolną nazwą.
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!"

Możliwy jest tylko jeden eksport domyślny, ale eksport nazwany może eksportować wiele elementów jednocześnie.

Przykład użycia po stronie klienta (przeglądarka).

Przykład: Eksport modułu

Moduły w ES Modules można eksportować w następujący sposób.

1// utils.js
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

W tym module utils.js funkcje sum oraz multiply są eksportowane.

Przykład: Import Modułu

Moduły po stronie klienta można importować w następujący sposób.

 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>
  • Ustawiając atrybut type tagu <script> na module, w HTML można używać składni ES modules, takiej jak import oraz export.
  • Instrukcja import ładuje zewnętrzny plik utils.js i wyświetla wynik.

Szczegóły CommonJS

CommonJS to system modułów głównie używany w Node.js. Moduły są eksportowane i importowane za pomocą module.exports i require.

require i module.exports

W CommonJS module.exports jest używany do eksportowania modułów. Również require jest używany do korzystania z modułów z innych plików.

Przykład: Eksport modułu

Moduły można eksportować w CommonJS w następujący sposób.

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};
Przykład: Import Modułu

Moduły można importować w CommonJS w następujący sposób.

1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7));      // 11
5console.log(math.subtract(9, 2)); // 7

W Node.js CommonJS jest używany jako domyślny system modułów, ale obsługiwane są także moduły ES.

Import Dynamiczny

W JavaScript moduły mogą być dynamicznie importowane za pomocą import(). Ta metoda wykorzystuje przetwarzanie asynchroniczne do ładowania modułów w razie potrzeby.

Dynamiczne importowanie można wykonać w następujący sposób.

1async function loadModule() {
2    const math = await import('./math.js');
3    console.log(math.add(5, 3)); // 8
4}
5
6loadModule();

Import dynamiczny jest jednym ze sposobów na poprawę wydajności aplikacji. Ponieważ możesz ładować moduły w razie potrzeby zamiast wszystkich podczas początkowego ładowania, poprawia to szybkość wyświetlania strony.

Zalety modułów

  • Ponowne użycie kodu

    • Zmodularyzowany kod może być używany ponownie w innych projektach. Tworząc moduły z wspólną funkcjonalnością i używając ich w wielu aplikacjach, efektywność rozwoju znacznie się poprawia.

  • Lepsza łatwość utrzymania

    • Dzieląc kod na moduły, łatwiej jest modyfikować konkretne funkcje lub części. Zarządzanie kodem w małych jednostkach ułatwia znajdowanie i naprawianie błędów.

  • Unikanie kolizji nazw przestrzeni

    • Definiowanie wielu zmiennych i funkcji w globalnym zakresie może prowadzić do kolizji nazw, ale modularyzacja temu zapobiega i pomaga utrzymać czystszy kod.

  • Zarządzanie zależnościami

    • Korzystanie z modułów umożliwia wyraźne zarządzanie zależnościami aplikacji. Staje się jasne, który moduł zależy od innych modułów, co ułatwia zrozumienie struktury kodu.

Podsumowanie

System modułów w JavaScripcie to potężne narzędzie do organizowania kodu i dzielenia go na komponenty wielokrotnego użytku. Zrozumienie różnic między modułami ES a CommonJS oraz wybór odpowiedniego systemu modułów w zależności od projektu pozwala zwiększyć czytelność i konserwowalność kodu. Co więcej, wykorzystując dynamiczne importy, można zoptymalizować wydajność aplikacji.

Wykorzystajmy system modułów, aby tworzyć bardziej skalowalne i wydajne aplikacje w JavaScript.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Dodatkowe funkcje klas w JavaScriptObsługa błędów w JavaScript