โมดูลใน JavaScript
บทความนี้อธิบายเกี่ยวกับโมดูลใน JavaScript
YouTube Video
โมดูลใน JavaScript
โมดูลใน JavaScript เป็นวิธีการจัดระเบียบโค้ดและแบ่งโค้ดออกเป็นส่วนที่นำกลับมาใช้ซ้ำได้ การใช้โมดูลช่วยเพิ่มความสามารถในการอ่านและบำรุงรักษาโค้ด และสามารถนำฟังก์ชันเดิมกลับมาใช้ใหม่ในโปรเจกต์อื่น ๆ ได้ ที่นี่เราจะอธิบายระบบโมดูลต่าง ๆ ตั้งแต่แนวคิดของโมดูลไปจนถึงตัวอย่างการใช้งานเฉพาะ
แนวคิดของโมดูลใน JavaScript
JavaScript ในตอนแรกไม่ได้มีระบบโมดูล แต่อย่างไรก็ตาม เมื่อแอปพลิเคชันเติบโตขึ้น การทำให้โค้ดเป็นระบบโมดูลกลายเป็นสิ่งสำคัญในการแบ่งโค้ดออกเป็นส่วนเล็ก ๆ เพื่อนำกลับมาใช้ซ้ำได้ โมดูลเป็นส่วนย่อยของโค้ดที่มีฟังก์ชันเฉพาะ ซึ่งสามารถจัดการได้อย่างเป็นอิสระจากโค้ดส่วนอื่น ทำให้สามารถแบ่งออกเป็นไฟล์หลายไฟล์ได้
ประเภทหลักของโมดูล
มีระบบโมดูลหลายแบบใน JavaScript ระบบที่พบบ่อยที่สุดคือ ES Modules (ESM) และ CommonJS
-
ES Modules เป็นระบบโมดูลที่ถูกนำมาใช้ใน ECMAScript 2015 (ES6) ซึ่งกำหนดโมดูลโดยใช้คีย์เวิร์ด
importและexportระบบนี้ถูกใช้อย่างแพร่หลายทั้งในฝั่งไคลเอนต์ (เบราว์เซอร์) และในฝั่งเซิร์ฟเวอร์ (Node.js) -
CommonJS เป็นระบบโมดูลที่ใช้หลักใน Node.js โมดูลถูกกำหนดโดยใช้
requireและmodule.exportsสำหรับการนำเข้าและส่งออกไฟล์
รายละเอียดของ ES Modules (ESM)
ES Modules เป็นระบบโมดูลมาตรฐานใน JavaScript ที่ช่วยให้สามารถแลกเปลี่ยนฟังก์ชันระหว่างโมดูลได้อย่างง่ายดาย ในเบราว์เซอร์และ Node.js ระบบนี้ถูกใช้ในการกำหนดและนำเข้าโมดูล
export และ import
export เป็นคำสำคัญสำหรับเปิดเผยฟังก์ชันของโมดูลให้ใช้งานจากภายนอกได้ import ใช้เพื่อนำฟังก์ชันที่ถูกกำหนดในโมดูลอื่นมาใช้งาน
ตัวอย่าง: การส่งออกโมดูล
โมดูลสามารถส่งออกใน ES Modules ได้ดังนี้
1// math.mjs
2export function add(a, b) {
3 return a + b;
4}
5export function subtract(a, b) {
6 return a - b;
7}ในโมดูล math.mjs นี้ ฟังก์ชัน add และ subtract จะถูกส่งออก ฟังก์ชันเหล่านี้สามารถนำเข้าจากโมดูลอื่นๆ ได้
ที่นี่ .mjs คือส่วนขยายไฟล์ที่แสดงอย่างชัดเจนว่าเป็น ไฟล์ JavaScript ในรูปแบบ ES Modules ใน Node.js ส่วนขยายของไฟล์จะเป็นตัวกำหนดว่าเป็น CommonJS หรือว่าเป็น ES Modules อย่างไรก็ตาม หากระบุ type: "module" ใน package.json ไฟล์ที่มีส่วนขยาย .js จะถูกมองว่าเป็น ES Modules โดยอัตโนมัติ
ตัวอย่าง: การนำเข้าโมดูล
โมดูลสามารถนำเข้าใน ES Modules ได้ดังนี้
1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3
ด้วยวิธีนี้ การใช้ import คุณสามารถใช้งานฟังก์ชันที่กำหนดไว้ในไฟล์อื่นได้อย่างง่ายดาย
การส่งออกแบบดีฟอลต์และการส่งออกแบบตั้งชื่อ
มีวิธีส่งออกโมดูลสองแบบ หนึ่งคือ การส่งออกแบบตั้งชื่อ และอีกหนึ่งคือ การส่งออกแบบดีฟอลต์
- การส่งออกแบบตั้งชื่อ ใช้เมื่อส่งออกฟังก์ชันหรือตัวแปรหลายตัวจากโมดูล คุณสามารถส่งออกหลายฟังก์ชัน และเมื่อทำการนำเข้า คุณจะได้รับพวกมันด้วยชื่อที่กำหนดไว้
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
- การส่งออกแบบดีฟอลต์ ใช้เมื่อส่งออกฟังก์ชันหรือคลาสเพียงตัวเดียวจากโมดูล ในระหว่างการนำเข้า คุณสามารถกำหนดชื่อใดก็ได้
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!"
สามารถมีการส่งออกแบบดีฟอลต์ได้เพียงตัวเดียว แต่การส่งออกแบบตั้งชื่อสามารถส่งออกหลายองค์ประกอบได้พร้อมกัน
ตัวอย่างการใช้งานในฝั่งไคลเอนต์ (เบราว์เซอร์)
ตัวอย่าง: การส่งออกโมดูล
โมดูลสามารถส่งออกใน ES Modules ได้ดังนี้
1// utils.js
2export function sum(a, b) {
3 return a + b;
4}
5export function multiply(a, b) {
6 return a * b;
7}ในโมดูล utils.js นี้ ฟังก์ชัน sum และ multiply จะถูกส่งออก
ตัวอย่าง: การนำเข้าโมดูล
โมดูลสามารถนำเข้าฝั่งไคลเอนต์ได้ดังนี้
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>- โดยการตั้งค่าแอตทริบิวต์
typeของแท็ก<script>ให้เป็นmoduleจะสามารถใช้ ไวยากรณ์ของ ES module เช่นimportและexportภายใน HTML ได้ - คำสั่ง
importจะโหลดutils.jsภายนอกและแสดงผลลัพธ์
รายละเอียดของ CommonJS
CommonJS เป็นระบบโมดูลที่ใช้กันหลักใน Node.js โมดูลถูกส่งออกและนำเข้าโดยใช้ module.exports และ require
require และ module.exports
ใน CommonJS ใช้ module.exports ในการส่งออกโมดูล และ require ถูกใช้เพื่อนำโมดูลจากไฟล์อื่นมาใช้งาน
ตัวอย่าง: การส่งออกโมดูล
โมดูลสามารถส่งออกใน CommonJS ได้ดังนี้
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};ตัวอย่าง: การนำเข้าโมดูล
โมดูลสามารถนำเข้าใน CommonJS ได้ดังนี้
1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7)); // 11
5console.log(math.subtract(9, 2)); // 7
ใน Node.js ใช้ CommonJS เป็นระบบโมดูลเริ่มต้น แต่ยังรองรับ ES Modules ด้วย
การนำเข้าแบบไดนามิก
ใน JavaScript โมดูลสามารถนำเข้าแบบไดนามิกได้โดยใช้ import() วิธีนี้ใช้การประมวลผลแบบอะซิงโครนัสเพื่อตรวจสอบและโหลดโมดูลเฉพาะเมื่อจำเป็น
นำเข้าแบบไดนามิกสามารถทำได้ดังนี้
1async function loadModule() {
2 const math = await import('./math.js');
3 console.log(math.add(5, 3)); // 8
4}
5
6loadModule();การนำเข้าแบบไดนามิกเป็นวิธีหนึ่งที่ช่วยเพิ่มประสิทธิภาพของแอปพลิเคชัน เนื่องจากคุณสามารถโหลดโมดูลเฉพาะเมื่อจำเป็นแทนที่จะโหลดทั้งหมดตั้งแต่ต้น จึงช่วยเพิ่มความเร็วในการแสดงผลของหน้า
ข้อดีของโมดูล
-
การนำโค้ดกลับมาใช้ซ้ำ
- โค้ดที่แยกเป็นโมดูลสามารถนำไปใช้ซ้ำในโปรเจกต์อื่น ๆ ได้ การสร้างโมดูลที่มีฟังก์ชันการทำงานทั่วไปและใช้งานในหลายแอปพลิเคชันจะช่วยเพิ่มประสิทธิภาพในการพัฒนาอย่างมาก
-
การดูแลรักษาที่ดีขึ้น
- โดยการแยกโค้ดออกเป็นโมดูล จะทำให้ง่ายต่อการแก้ไขฟีเจอร์หรือส่วนต่าง ๆ เฉพาะเจาะจง การจัดการโค้ดในหน่วยขนาดเล็กช่วยให้ค้นหาและแก้ไขข้อผิดพลาดได้ง่ายขึ้น
-
หลีกเลี่ยงการชนกันของชื่อในเนมสเปซ
- การกำหนดตัวแปรและฟังก์ชันหลายตัวในขอบเขตโกลบอลอาจทำให้ชื่อซ้ำกันได้ แต่การแยกโมดูลจะช่วยป้องกันปัญหานี้และช่วยให้โค้ดมีความเป็นระเบียบมากขึ้น
-
การจัดการการพึ่งพา
- การใช้โมดูลจะช่วยให้คุณจัดการการพึ่งพาของแอปพลิเคชันได้อย่างชัดเจน ทำให้เห็นได้ชัดเจนว่าโมดูลใดพึ่งพาโมดูลอื่น ซึ่งช่วยให้โครงสร้างโค้ดเข้าใจได้ง่ายขึ้น
สรุป
ระบบโมดูลของ JavaScript เป็นวิธีที่ทรงพลังในการจัดระเบียบโค้ดและแบ่งออกเป็นส่วนประกอบที่สามารถนำกลับมาใช้ซ้ำได้ โดยการทำความเข้าใจความแตกต่างระหว่าง ES Modules และ CommonJS และเลือกระบบโมดูลที่เหมาะสมตามโปรเจ็กต์ จะช่วยเพิ่มความสามารถในการอ่านและการบำรุงรักษาโค้ด นอกจากนี้ โดยการใช้ dynamic imports คุณสามารถเพิ่มประสิทธิภาพการทำงานของแอปพลิเคชันได้
มาทำให้แอปพลิเคชัน JavaScript มีความสามารถในการขยายตัวและมีประสิทธิภาพมากขึ้นโดยใช้ระบบโมดูล
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย