Modul dalam JavaScript

Artikel ini menjelaskan modul dalam JavaScript.

YouTube Video

Modul dalam JavaScript

Modul dalam JavaScript ialah cara untuk mengatur kod dan membahagikannya kepada komponen yang boleh digunakan semula. Dengan menggunakan modul, kebolehbacaan dan penyelenggaraan kod dipertingkatkan, dan fungsi yang sama boleh digunakan semula dalam projek lain. Di sini kami menjelaskan pelbagai sistem modul, dari konsep modul hingga contoh penggunaan tertentu.

Konsep Modul JavaScript

JavaScript pada asalnya tidak mempunyai sistem modular. Namun, apabila aplikasi menjadi lebih besar, pemodularan menjadi penting untuk membahagi kod kepada unit yang lebih kecil untuk digunakan semula. Modul ialah bahagian kod dengan fungsi tertentu yang boleh diurus secara bebas daripada kod lain, membolehkan ia dibahagi kepada beberapa fail.

Jenis Utama Modul

Terdapat beberapa sistem modul dalam JavaScript. Yang paling biasa digunakan ialah ES Modules (ESM) dan CommonJS.

• ES Modules ialah sistem modul yang diperkenalkan dalam ECMAScript 2015 (ES6), yang mentakrifkan modul menggunakan kata kunci import dan export. Sistem ini banyak digunakan di sisi klien (penyemak imbas) dan sisi pelayan (Node.js).

• CommonJS ialah sistem modul yang digunakan terutamanya dalam Node.js. Modul didefinisikan menggunakan require dan module.exports untuk mengimport dan mengeksport fail.

Butiran Modul ES (ESM)

ES Modules ialah sistem modul standard dalam JavaScript, membolehkan pertukaran fungsi antara modul dengan mudah. Dalam penyemak imbas dan Node.js, sistem ini digunakan untuk mentakrif dan mengimport modul.

export dan import

export ialah kata kunci untuk mendedahkan fungsi daripada modul ke luar. import digunakan untuk memasukkan fungsi yang ditakrifkan dalam modul lain.

Contoh: Eksport Modul

Modul boleh dieksport dalam ES Modules seperti berikut.

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

Dalam modul math.mjs ini, fungsi add dan subtract dieksport. Fungsi-fungsi ini boleh diimport daripada modul-modul lain.

Di sini, .mjs ialah sambungan fail yang secara jelas menunjukkan fail JavaScript format ES Modules. Dalam Node.js, sambungan fail menentukan sama ada ia adalah CommonJS atau ES Modules. Namun, jika type: "module" dinyatakan dalam package.json, fail dengan sambungan .js akan dilayan sebagai ES Modules secara lalai.

Contoh: Import Modul

Modul boleh diimport dalam ES Modules seperti berikut.

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

Dengan cara ini, menggunakan import, anda boleh dengan mudah memanfaatkan fungsi yang ditakrifkan dalam fail lain.

Eksport Lalai dan Eksport Bernama

Terdapat dua kaedah eksport untuk modul-modul. Satu ialah eksport bernama, dan satu lagi ialah eksport lalai.

• Eksport bernama digunakan apabila anda mengeksport pelbagai fungsi atau pembolehubah daripada modul. Anda boleh melakukan eksport pelbagai, dan semasa import, anda menerima mereka dengan nama-nama yang ditentukan.

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 lalai digunakan apabila anda mengeksport satu fungsi atau kelas daripada modul. Semasa import, ia boleh diterima dengan apa-apa nama.

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!"

Hanya satu eksport lalai dibenarkan, tetapi eksport bernama boleh mengeksport pelbagai elemen secara serentak.

Contoh penggunaan di bahagian klien (pelayar).

Contoh: Eksport Modul

Modul boleh dieksport dalam ES Modules seperti berikut.

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

Dalam modul utils.js ini, fungsi sum dan multiply dieksport.

Contoh: Import Modul

Modul boleh diimport di bahagian klien seperti berikut.

 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>

• Dengan menetapkan atribut type pada tag <script> kepada module, sintaks modul ES seperti import dan export boleh digunakan dalam HTML.
• Penyataan import akan memuatkan utils.js luaran dan memaparkan hasilnya.

Butiran tentang CommonJS

CommonJS ialah sistem modul yang digunakan terutamanya dalam Node.js. Modul-modul dieksport dan diimport menggunakan module.exports dan require.

require dan module.exports

Dalam CommonJS, module.exports digunakan untuk mengeksport modul. Selain itu, require digunakan untuk memanfaatkan modul daripada fail lain.

Contoh: Eksport Modul

Modul boleh dieksport dalam CommonJS seperti berikut.

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};

Contoh: Import Modul

Modul boleh diimport dalam CommonJS seperti berikut.

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

Dalam Node.js, CommonJS digunakan sebagai sistem modul lalai, tetapi Modul ES juga disokong.

Import Dinamik

Dalam JavaScript, modul boleh diimport secara dinamik menggunakan import(). Kaedah ini menggunakan pemprosesan asynchronous untuk memuat modul apabila diperlukan.

Import dinamik boleh dilakukan seperti berikut.

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

Import dinamik adalah salah satu cara untuk meningkatkan prestasi aplikasi. Oleh kerana anda boleh memuatkan modul mengikut keperluan dan bukannya memuatkan semua semasa muatan awal, ia meningkatkan kelajuan paparan halaman.

Kelebihan Modul

• Kebolehgunaan Semula Kod

  • Kod yang dimodul boleh digunakan semula dalam projek lain. Dengan mencipta modul dengan fungsi yang sama dan menggunakannya merentasi pelbagai aplikasi, kecekapan pembangunan dapat ditingkatkan dengan ketara.

• Penyelenggaraan yang Lebih Baik

  • Dengan membahagikan kod kepada modul, adalah lebih mudah untuk mengubah ciri atau bahagian tertentu. Menguruskan kod dalam unit kecil menjadikannya lebih mudah untuk mencari dan membetulkan pepijat.

• Mengelakkan Perlanggaran Ruang Nama

  • Menetapkan banyak pembolehubah dan fungsi dalam skop global boleh menyebabkan perlanggaran nama, tetapi pemodulan mengelakkan perkara ini dan membantu mengekalkan kod yang lebih teratur.

• Pengurusan Kebergantungan

  • Penggunaan modul membolehkan anda mengurus kebergantungan aplikasi dengan jelas. Ia menjadi lebih jelas modul mana yang bergantung kepada modul lain, menjadikan struktur kod lebih mudah difahami.

Ringkasan

Sistem modul JavaScript adalah cara yang berkuasa untuk mengatur kod dan membahagikannya kepada komponen yang boleh digunakan semula. Dengan memahami perbezaan antara Modul ES dan CommonJS serta memilih sistem modul yang sesuai berdasarkan projek, anda boleh meningkatkan kebolehbacaan dan penyelenggaraan kod. Selain itu, dengan menggunakan import dinamik, anda boleh mengoptimumkan prestasi aplikasi.

Mari kita memanfaatkan sistem modul untuk membangunkan aplikasi JavaScript yang lebih skala dan cekap.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video