Konsep modul berasal dari paradigma pemrograman modular. Paradigma ini mengusulkan bahwa perangkat lunak harus terdiri dari komponen yang terpisah dan dapat dipertukarkan yang disebut "modul" dengan memecah fungsi program menjadi file yang berdiri sendiri yang dapat bekerja secara terpisah atau digabungkan dalam sebuah aplikasi.

Modul adalah file yang berdiri sendiri yang mengenkapsulasi kode untuk mengimplementasikan fungsionalitas tertentu dan mempromosikan penggunaan kembali dan organisasi.

Di sini Anda akan membahas sistem modul yang digunakan dalam aplikasi JavaScript, termasuk pola modul, sistem modul CommonJS yang digunakan di sebagian besar aplikasi Node.js, dan sistem Modul ES6.

Pola Modul

Sebelum pengenalan modul JavaScript asli, pola desain modul digunakan sebagai sistem modul untuk membatasi variabel dan fungsi ke satu file.

Ini diimplementasikan menggunakan ekspresi fungsi yang langsung dipanggil, yang dikenal sebagai IIFE. IIFE adalah fungsi yang tidak dapat digunakan kembali yang berjalan segera setelah dibuat.

instagram viewer

Inilah struktur dasar IIFE:

(fungsi () {
// kode di sini
})();
(() => {
// kode di sini
})();
(asinkron () => {
// kode di sini
})();

Blok kode di atas menjelaskan IIFE yang digunakan dalam tiga konteks berbeda.

IIFE digunakan karena variabel yang dideklarasikan di dalam suatu fungsi dicakup ke dalam fungsi, membuatnya hanya dapat diakses di dalam fungsi, dan karena fungsi memungkinkan Anda mengembalikan data (menjadikannya publik dapat diakses).

Misalnya:

const foo = (fungsi () {
const sayName = (nama) => {
menghibur.catatan(`Hei, namaku ${nama}`);
 };
// Mengekspos variabel
kembali {
 callSayName: (nama) => sayName (nama),
 };
})();
// Mengakses metode terbuka
foo.callSayName("Batang");

Blok kode di atas adalah contoh bagaimana modul dibuat sebelum pengenalan modul JavaScript asli.

Blok kode di atas berisi IIFE. IIFE berisi fungsi yang membuatnya dapat diakses dengan mengembalikannya. Semua variabel yang dideklarasikan dalam IIFE dilindungi dari lingkup global. Jadi, metode (sayName) hanya dapat diakses melalui fungsi publik, panggilSayName.

Perhatikan bahwa IIFE disimpan ke variabel, foo. Ini karena, tanpa variabel yang menunjuk ke lokasinya di memori, variabel tidak akan dapat diakses setelah skrip dijalankan. Pola ini dimungkinkan karena Penutupan JavaScript.

Sistem Modul CommonJS

Sistem modul CommonJS adalah format modul yang ditentukan oleh grup CommonJS untuk menyelesaikan masalah cakupan JavaScript dengan mengeksekusi setiap modul di namespace-nya.

Sistem modul CommonJS bekerja dengan memaksa modul untuk secara eksplisit mengekspor variabel yang ingin diekspos ke modul lain.

Sistem modul ini dibuat untuk JavaScript sisi server (Node.js) dan, dengan demikian, tidak didukung secara default di browser.

Untuk mengimplementasikan modul CommonJS di proyek Anda, Anda harus terlebih dahulu menginisialisasi NPM di aplikasi Anda dengan menjalankan:

npm init -y

Variabel yang diekspor mengikuti sistem modul CommonJS dapat diimpor seperti ini:

//randomModule.js
//paket yang diinstal
const diinstalImport = memerlukan("nama paket");
// modul lokal
const impor lokal = memerlukan("/path-to-module");

Modul diimpor di CommonJS menggunakan memerlukan pernyataan, yang membaca file JavaScript, mengeksekusi file baca, dan mengembalikan ekspor obyek. Itu ekspor objek berisi semua ekspor yang tersedia dalam modul.

Anda dapat mengekspor variabel mengikuti sistem modul CommonJS menggunakan ekspor bernama atau ekspor default.

Ekspor Bernama

Ekspor bernama adalah ekspor yang diidentifikasi dengan nama yang ditetapkan. Ekspor bernama memungkinkan beberapa ekspor per modul, tidak seperti ekspor default.

Misalnya:

//main.js
ekspor.myExport = fungsi () {
menghibur.log("Ini adalah sebuah contoh dari sebuah nama ekspor");
};
export.anotherExport = fungsi () {
menghibur.log("Ini adalah contoh lain dari sebuah nama ekspor");
};

Di blok kode di atas, Anda mengekspor dua fungsi bernama (myExport Dan ekspor lain) dengan melampirkannya ke ekspor obyek.

Demikian pula, Anda dapat mengekspor fungsi seperti:

const ekspor saya = fungsi () {
menghibur.log("Ini adalah sebuah contoh dari sebuah nama ekspor");
};
const Ekspor lain = fungsi () {
menghibur.log("Ini adalah contoh lain dari sebuah nama ekspor");
};
modul.ekspor = {
 ekspor saya,
 Ekspor lain,
};

Di blok kode di atas, Anda mengatur ekspor objek ke fungsi bernama. Anda hanya dapat menetapkan ekspor objek ke objek baru melalui modul obyek.

Kode Anda akan menimbulkan kesalahan jika Anda mencoba melakukannya dengan cara ini:

//cara yang salah
ekspor = {
 ekspor saya,
 Ekspor lain,
};

Ada dua cara untuk mengimpor ekspor bernama:

1. Impor semua ekspor sebagai objek tunggal dan akses secara terpisah menggunakan notasi titik.

Misalnya:

//otherModule.js
const foo = memerlukan("./utama");
foo.myExport();
foo.anotherExport();

2. De-struktur ekspor dari ekspor obyek.

Misalnya:

//otherModule.js
const { ekspor saya, ekspor lain } = memerlukan("./utama");
ekspor saya();
ekspor lain();

Satu hal yang umum dalam semua metode impor, mereka harus diimpor menggunakan nama yang sama dengan yang mereka ekspor.

Ekspor Bawaan

Ekspor default adalah ekspor yang diidentifikasi dengan nama apa pun pilihan Anda. Anda hanya dapat memiliki satu ekspor default per modul.

Misalnya:

//main.js
kelasFoo{
 batang() {
menghibur.log("Ini adalah sebuah contoh dari A bawaanekspor");
 }
}
modul.ekspor = Foo;

Di blok kode di atas, Anda mengekspor kelas (Foo) dengan menugaskan kembali ekspor keberatan untuk itu.

Mengimpor ekspor default mirip dengan mengimpor ekspor bernama, kecuali bahwa Anda dapat menggunakan nama pilihan Anda untuk mengimpornya.

Misalnya:

//otherModule.js
const Bilah = memerlukan("./utama");
const objek = baru Batang();
obyek.batang();

Di blok kode di atas, ekspor default diberi nama Batang, meskipun Anda dapat menggunakan nama apa pun pilihan Anda.

Sistem Modul ES6

Sistem modul ECMAScript Harmony, yang dikenal sebagai modul ES6, adalah sistem modul JavaScript resmi.

Modul ES6 didukung oleh browser dan server, meskipun Anda memerlukan sedikit konfigurasi sebelum menggunakannya.

Di browser, Anda harus menentukan jenis sebagai modul dalam tag impor skrip.

Seperti itu:

//index.html
<skrip src="./app.js" jenis="modul"></script>

Di Node.js, Anda harus mengatur jenis ke modul di Anda package.json mengajukan.

Seperti itu:

//package.json
"jenis":"modul"

Anda juga dapat mengekspor variabel menggunakan sistem modul ES6 menggunakan ekspor bernama atau ekspor default.

Ekspor Bernama

Mirip dengan impor bernama dalam modul CommonJS, mereka diidentifikasi dengan nama yang ditetapkan dan memungkinkan beberapa ekspor per modul.

Misalnya:

//main.js
eksporconst ekspor saya = fungsi () {
menghibur.log("Ini adalah sebuah contoh dari sebuah nama ekspor");
};
eksporconst Ekspor lain = fungsi () {
menghibur.log("Ini adalah contoh lain dari sebuah nama ekspor");
};

Dalam sistem modul ES6, ekspor bernama diekspor dengan mengawali variabel dengan ekspor kata kunci.

Ekspor bernama dapat diimpor ke modul lain di ES6 dengan cara yang sama seperti CommonJS:

  • Mendestrukturisasi ekspor yang dibutuhkan dari ekspor obyek.
  • Mengimpor semua ekspor sebagai objek tunggal dan mengaksesnya secara terpisah menggunakan notasi titik.

Berikut adalah contoh destrukturisasi:

//otherModule.js
impor { ekspor saya, ekspor lain } dari "./main.js";
ekspor saya()
ekspor lain()

Berikut adalah contoh mengimpor seluruh objek:

impor * sebagai foo dari './main.js'
foo.myExport()
foo.anotherExport()

Pada blok kode di atas, tanda bintang (*) berarti “semua”. Itu sebagai kata kunci menetapkan ekspor objek ke string yang mengikutinya, dalam hal ini, foo.

Ekspor Bawaan

Mirip dengan ekspor default di CommonJS, mereka diidentifikasi dengan nama pilihan Anda, dan Anda hanya dapat memiliki satu ekspor default per modul.

Misalnya:

//main.js
kelasFoo{
 batang() {
menghibur.log("Ini adalah sebuah contoh dari A bawaanekspor");
 }
}
eksporbawaan Foo;

Ekspor default dibuat dengan menambahkan bawaan kata kunci setelah ekspor kata kunci, diikuti dengan nama ekspor.

Mengimpor ekspor default mirip dengan mengimpor ekspor bernama, kecuali bahwa Anda dapat menggunakan nama pilihan Anda untuk mengimpornya.

Misalnya:

//otherModule.js
impor Batang dari "./main.js";

Ekspor Campuran

Standar modul ES6 memungkinkan Anda memiliki ekspor default dan ekspor bernama dalam satu modul, tidak seperti CommonJS.

Misalnya:

//main.js
eksporconst ekspor saya = fungsi () {
menghibur.log("Ini adalah contoh lain dari sebuah nama ekspor");
};
kelasFoo{
 batang() {
menghibur.log("Ini adalah sebuah contoh dari A bawaanekspor");
 }
}
eksporbawaan Foo;

Pentingnya Modul

Membagi kode Anda ke dalam modul tidak hanya membuatnya lebih mudah dibaca tetapi juga membuatnya lebih dapat digunakan kembali dan juga dapat dipelihara. Modul dalam JavaScript juga membuat kode Anda tidak terlalu rawan kesalahan, karena semua modul dijalankan dalam mode ketat secara default.