Modul JavaScript

Dalam tutorial ini, anda akan belajar tentang modul dalam JavaScript dengan bantuan contoh.

Oleh kerana program kami semakin besar, program ini mungkin mengandungi banyak baris kod. Daripada meletakkan semuanya dalam satu fail, anda boleh menggunakan modul untuk memisahkan kod dalam fail yang berasingan mengikut fungsinya. Ini menjadikan kod kami teratur dan lebih senang dijaga.

Modul adalah fail yang mengandungi kod untuk melakukan tugas tertentu. Modul mungkin mengandungi pemboleh ubah, fungsi, kelas dan lain-lain. Mari kita lihat contohnya,

Andaikan, fail bernama salam.js mengandungi kod berikut:

 // exporting a function export function greetPerson(name) ( return `Hello $(name)`; )

Sekarang, untuk menggunakan kod salam.js dalam fail lain, anda boleh menggunakan kod berikut:

 // importing greetPerson from greet.js file import ( greetPerson ) from './greet.js'; // using greetPerson() defined in greet.js let displayName = greetPerson('Jack'); console.log(displayName); // Hello Jack

Di sini,

  • Yang greetPerson()berfungsi dalam greet.js dieksport menggunakan exportkata kunci 
     export function greetPerson(name) (… )
  • Kemudian, kami mengimport greetPerson()dalam fail lain menggunakan importkata kunci. Untuk mengimport fungsi, objek, dan lain-lain, anda perlu membungkusnya ( ). 
     import ( greet ) from '/.greet.js';

Catatan : Anda hanya dapat mengakses fungsi, objek, dll yang dieksport dari modul. Anda perlu menggunakan exportkata kunci untuk fungsi, objek, dan lain-lain untuk mengimportnya dan menggunakannya dalam fail lain.

Eksport Pelbagai Objek

Anda juga boleh mengeksport pelbagai objek dari modul. Sebagai contoh,

Dalam modul fail.js

 // exporting the variable export const name = 'JavaScript Program'; // exporting the function export function sum(x, y) ( return x + y; )

Dalam fail utama,

 import ( name, sum ) from './module.js'; console.log(name); let add = sum(4, 9); console.log(add); // 13

Di sini,

 import ( name, sum ) from './module.js';

Ini mengimport pemboleh ubah nama dan sum()fungsi dari fail modul.js .

Menamakan semula import dan eksport

Sekiranya objek (pemboleh ubah, fungsi dll) yang ingin anda import sudah ada di dalam fail utama anda, program ini mungkin tidak berperilaku seperti yang anda mahukan. Dalam kes ini, program mengambil nilai dari fail utama dan bukannya fail yang diimport.

Untuk mengelakkan konflik penamaan, anda boleh mengubah nama fungsi, objek, dan lain-lain semasa eksport atau semasa pengimportan.

1. Namakan semula dalam modul (fail eksport)

 // renaming import inside module.js export ( function1 as newName1, function2 as newName2 ); // when you want to use the module // import in the main file import ( newName1, newName2 ) from './module.js';

Di sini, semasa mengeksport fungsi dari fail modul.js , nama baru (di sini, nama baru & nama baru2) diberikan kepada fungsi tersebut. Oleh itu, semasa mengimport fungsi itu, nama baru digunakan untuk merujuk fungsi tersebut.

2. Namakan semula dalam fail import

 // inside module.js export ( function1, function2 ); // when you want to use the module // import in the required file with different name import ( function1 as newName1, function2 as newName2 ) from './module.js';

Di sini, semasa mengimport fungsi, nama baru (di sini, newName1 & newName2) digunakan untuk nama fungsi. Sekarang anda menggunakan nama baru untuk merujuk fungsi ini.

Eksport Lalai

Anda juga boleh melakukan eksport lalai modul. Sebagai contoh,

Dalam fail salam.js :

 // default export export default function greet(name) ( return `Hello $(name)`; ) export const age = 23;

Kemudian semasa mengimport, anda boleh menggunakan:

 import random_name from './greet.js';

Semasa melakukan eksport lalai,

  • random_name diimport dari greet.js. Oleh kerana, random_nametidak masuk greet.js, eksport lalai ( greet()dalam kes ini) dieksport sebagai random_name.
  • Anda boleh menggunakan eksport lalai secara langsung tanpa melampirkan tanda kurung ().

Catatan : Fail boleh mengandungi banyak eksport. Walau bagaimanapun, anda hanya boleh mempunyai satu eksport lalai dalam fail.

Modul Sentiasa menggunakan Mod Ketat

Secara lalai, modul berada dalam mod ketat. Sebagai contoh,

 // in greet.js function greet() ( // strict by default ) export greet();

Faedah Menggunakan Modul

  • Pangkalan kod lebih senang dijaga kerana kod yang berbeza yang mempunyai fungsi yang berbeza terdapat dalam fail yang berbeza.
  • Menjadikan kod boleh digunakan semula. Anda boleh menentukan modul dan menggunakannya berkali-kali mengikut keperluan anda.

Penggunaan import / eksport mungkin tidak disokong di beberapa penyemak imbas. Untuk mengetahui lebih lanjut, kunjungi Sokongan import / eksport JavaScript.

Artikel menarik...