Pengenalan kepada Sistem Modul dalam JavaScript

Pengenalan kepada Sistem Modul dalam JavaScript

Konsep modul berasal daripada paradigma pengaturcaraan modular. Paradigma ini mencadangkan bahawa perisian harus terdiri daripada komponen berasingan yang boleh ditukar ganti yang dipanggil 'modul' dengan memecahkan fungsi program kepada fail berdiri sendiri yang boleh berfungsi secara berasingan atau digabungkan dalam aplikasi.





MAKEUSEOF VIDEO OF THE DAY

Modul ialah fail berdiri sendiri yang merangkum kod untuk melaksanakan fungsi tertentu dan menggalakkan kebolehgunaan semula dan organisasi.



Di sini anda akan merangkumi sistem modul yang digunakan dalam aplikasi JavaScript, termasuk corak modul, sistem modul CommonJS yang digunakan dalam kebanyakan aplikasi Node.js dan sistem Modul ES6.





Corak Modul

Sebelum pengenalan modul JavaScript asli, corak reka bentuk modul digunakan sebagai sistem modul untuk menskop pembolehubah dan fungsi kepada satu fail.

Ini telah dilaksanakan menggunakan ungkapan fungsi yang digunakan serta-merta, yang lebih dikenali sebagai IIFE. IIFE ialah fungsi yang tidak boleh digunakan semula yang berjalan sebaik sahaja ia dicipta.



Berikut ialah struktur asas IIFE:

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

Blok kod di atas menerangkan IIFE yang digunakan dalam tiga konteks berbeza.



IIFE digunakan kerana pembolehubah yang diisytiharkan di dalam fungsi diskop kepada fungsi, menjadikannya hanya boleh diakses di dalam fungsi dan kerana fungsi membenarkan anda memulangkan data (menjadikannya boleh diakses secara umum).

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 kod di atas ialah contoh cara modul dicipta sebelum pengenalan modul JavaScript asli.

Blok kod di atas mengandungi IIFE. IIFE mengandungi fungsi yang boleh diakses dengan mengembalikannya. Semua pembolehubah yang diisytiharkan dalam IIFE dilindungi daripada skop global. Oleh itu, kaedah ( sebutNama ) hanya boleh diakses melalui fungsi awam, callSayName .

Perhatikan bahawa IIFE disimpan ke pembolehubah, foo . Ini kerana, tanpa pembolehubah yang menunjuk ke lokasinya dalam ingatan, pembolehubah tidak akan dapat diakses selepas skrip berjalan. Corak ini mungkin disebabkan oleh penutupan JavaScript .

Sistem Modul CommonJS

Sistem modul CommonJS ialah format modul yang ditakrifkan oleh kumpulan CommonJS untuk menyelesaikan isu skop JavaScript dengan melaksanakan setiap modul dalam ruang namanya.

Sistem modul CommonJS berfungsi dengan memaksa modul mengeksport pembolehubah secara eksplisit yang ingin mereka dedahkan kepada modul lain.

Sistem modul ini dicipta untuk JavaScript sisi pelayan (Node.js) dan, oleh itu, tidak disokong secara lalai dalam penyemak imbas.

Untuk melaksanakan modul CommonJS dalam projek anda, anda perlu memulakan NPM terlebih dahulu dalam aplikasi anda dengan menjalankan:

npm init -y

Pembolehubah yang dieksport mengikut sistem modul CommonJS boleh diimport seperti:

//randomModule.js 
//installed package 
const installedImport = require("package-name"); 
//local module 
const localImport = require("/path-to-module");

Modul diimport dalam CommonJS menggunakan memerlukan pernyataan, yang membaca fail JavaScript, melaksanakan fail baca, dan mengembalikan fail eksport objek. The eksport objek mengandungi semua eksport yang tersedia dalam modul.

Anda boleh mengeksport pembolehubah mengikut sistem modul CommonJS menggunakan sama ada eksport bernama atau eksport lalai.

Dinamakan Eksport

Eksport bernama ialah eksport yang dikenal pasti dengan nama yang diberikan. Eksport bernama membenarkan berbilang eksport setiap modul, tidak seperti eksport lalai.

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

Dalam blok kod di atas, anda mengeksport dua fungsi bernama ( myExport dan satu lagiEksport ) dengan melampirkannya pada eksport objek.

tempat untuk membeli anjing berhampiran saya

Begitu juga, anda boleh mengeksport 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, 
};

Dalam blok kod di atas, anda tetapkan eksport membantah fungsi yang dinamakan. Anda hanya boleh menetapkan eksport membantah objek baru melalui modul objek.

Kod anda akan menimbulkan ralat jika anda cuba melakukannya dengan cara ini:

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

Terdapat dua cara anda boleh mengimport eksport bernama:

1. Import semua eksport sebagai satu objek dan aksesnya secara berasingan menggunakan notasi titik .

Sebagai contoh:

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

2. Nyahstruktur eksport daripada eksport objek.

Sebagai contoh:

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

Satu perkara biasa dalam semua kaedah pengimportan, ia mesti diimport menggunakan nama yang sama yang digunakan untuk mengeksport.

Eksport Lalai

Eksport lalai ialah eksport yang dikenal pasti dengan mana-mana nama pilihan anda. Anda hanya boleh mempunyai satu eksport lalai bagi setiap modul.

Sebagai contoh:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
module.exports = Foo;

Dalam blok kod di atas, anda mengeksport kelas ( Foo ) dengan menugaskan semula eksport membantahnya.

Mengimport eksport lalai adalah serupa dengan mengimport eksport bernama, kecuali anda boleh menggunakan mana-mana nama pilihan anda untuk mengimportnya.

Sebagai contoh:

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

Dalam blok kod di atas, eksport lalai telah dinamakan Bar , walaupun anda boleh menggunakan mana-mana nama pilihan anda.

Sistem Modul ES6

Sistem modul ECMAScript Harmony, lebih dikenali sebagai modul ES6, ialah sistem modul JavaScript rasmi.

Modul ES6 disokong oleh pelayar dan pelayan, walaupun anda memerlukan sedikit konfigurasi sebelum menggunakannya.

Dalam pelayar, anda perlu menentukan menaip sebagai modul dalam teg import skrip.

Seperti itu:

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

Dalam Node.js, anda perlu menetapkan menaip kepada modul dalam awak package.json fail.

Seperti itu:

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

Anda juga boleh mengeksport pembolehubah menggunakan sistem modul ES6 menggunakan sama ada eksport bernama atau eksport lalai.

Dinamakan Eksport

Sama seperti import yang dinamakan dalam modul CommonJS, ia dikenal pasti mengikut nama yang diberikan dan membenarkan berbilang eksport setiap 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, eksport bernama dieksport dengan memberi awalan pembolehubah dengan eksport kata kunci.

Eksport bernama boleh diimport ke dalam modul lain dalam ES6 dengan cara yang sama seperti CommonJS:

  • Menyahstruktur eksport yang diperlukan daripada eksport objek.
  • Mengimport semua eksport sebagai satu objek dan mengaksesnya secara berasingan menggunakan notasi titik.

Berikut ialah contoh penyahstrukturan:

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

Berikut ialah contoh mengimport keseluruhan objek:

import * as foo from './main.js' 
foo.myExport() 
foo.anotherExport()

Dalam blok kod di atas, asterisk ( * ) bermaksud “semua”. The sebagai kata kunci memberikan eksport membantah rentetan yang mengikutinya, dalam kes ini, foo .

Eksport Lalai

Sama seperti eksport lalai dalam CommonJS, ia dikenal pasti dengan mana-mana nama pilihan anda dan anda hanya boleh mempunyai satu eksport lalai bagi setiap modul.

Sebagai contoh:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo;

Eksport lalai dibuat dengan menambahkan lalai kata kunci selepas eksport kata kunci, diikuti dengan nama eksport.

Mengimport eksport lalai adalah serupa dengan mengimport eksport bernama, kecuali anda boleh menggunakan mana-mana nama pilihan anda untuk mengimportnya.

Sebagai contoh:

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

Eksport Campuran

Standard modul ES6 membolehkan anda mempunyai kedua-dua eksport lalai dan eksport 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;

Kepentingan Modul

Membahagikan kod anda kepada modul bukan sahaja menjadikannya lebih mudah dibaca tetapi ia menjadikannya lebih boleh digunakan semula dan juga boleh diselenggara. Modul dalam JavaScript juga menjadikan kod anda kurang terdedah kepada ralat, kerana semua modul dilaksanakan dalam mod ketat secara lalai.