Pengantar Sistem Modul dalam JavaScript

Pengantar Sistem Modul dalam JavaScript

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 suatu aplikasi.





VIDEO MAKEUSEOF HARI INI

Modul adalah file yang berdiri sendiri yang merangkum 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 mencakup variabel dan fungsi ke satu file.

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



Inilah struktur dasar IIFE:

(function () { 
  //code here 
})(); 
   
(() => { 
  //code here 
})(); 
   
(async () => { 
  //code here 
})();

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



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

Sebagai contoh:



const foo = (function () { 
  const sayName = (name) => { 
    console.log(`Hey, my name is ${name}`); 
  }; 
  //Exposing the variables 
  return { 
    callSayName: (name) => sayName(name), 
  }; 
})(); 
//Accessing exposed methods 
foo.callSayName("Bar");

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 ( katakan Nama ) hanya dapat diakses melalui fungsi publik, panggilSayName .

dapatkah Anda melihat siapa yang melihat linkedin Anda?

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 mereka ekspos 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 dalam 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:

//randomModule.js 
//installed package 
const installedImport = require("package-name"); 
//local module 
const localImport = require("/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 berdasarkan nama yang ditetapkan. Ekspor bernama memungkinkan beberapa ekspor per modul, tidak seperti ekspor default.

Sebagai contoh:

//main.js 
exports.myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
exports.anotherExport = function () { 
  console.log("This is another example of a named export"); 
};

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

Demikian pula, Anda dapat mengekspor fungsi seperti:

const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
const anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 
module.exports = { 
  myExport, 
  anotherExport, 
};

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:

//wrong way 
exports = { 
  myExport, 
  anotherExport, 
};

Ada dua cara Anda dapat mengimpor ekspor bernama:

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

Sebagai contoh:

//otherModule.js 
const foo = require("./main"); 
foo.myExport(); 
foo.anotherExport();

2. De-struktur ekspor dari ekspor obyek.

Sebagai contoh:

//otherModule.js 
const { myExport, anotherExport } = require("./main"); 
myExport(); 
anotherExport();

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 pilihan Anda. Anda hanya dapat memiliki satu ekspor default per modul.

Sebagai contoh:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
module.exports = 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.

dapatkah Anda berbagi bermain ps5 ke ps4?

Sebagai contoh:

//otherModule.js 
const Bar = require("./main"); 
const object = new Bar(); 
object.bar();

Di blok kode di atas, ekspor default bernama 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 Tipe sebagai modul dalam tag impor skrip.

Seperti:

//index.html 
<script src="./app.js" type="module"></script>

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

Seperti:

//package.json 
"type":"module"

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.

Sebagai contoh:

//main.js 
export const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
export const anotherExport = function () { 
  console.log("This is another example of a named export"); 
};

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:

  • De-strukturisasi ekspor yang diperlukan dari ekspor obyek.
  • Mengimpor semua ekspor sebagai objek tunggal dan mengaksesnya secara terpisah menggunakan notasi titik.

Berikut ini contoh de-strukturisasi:

//otherModule.js 
import { myExport, anotherExport } from "./main.js"; 
myExport() 
anotherExport()

Berikut ini contoh mengimpor seluruh objek:

import * as foo from './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.

Sebagai contoh:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default 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.

Sebagai contoh:

//otherModule.js 
import Bar from "./main.js";

Ekspor Campuran

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

Sebagai contoh:

//main.js 
export const myExport = function () { 
  console.log("This is another example of a named export"); 
}; 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default 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 rawan kesalahan, karena semua modul dijalankan dalam mode ketat secara default.