การใช้งาน Modules ใน JavaScript

การใช้งาน Modules ใน JavaScript

ในบทก่อนหน้านี้ เราได้เรียนรู้เกี่ยวกับการจัดการ Error ใน JavaScript เพื่อให้โปรแกรมของเรามีความเสถียรและสามารถรับมือกับสถานการณ์ที่ไม่คาดฝันได้ ในบทนี้ เราจะมาเรียนรู้เกี่ยวกับ Modules ซึ่งเป็นเครื่องมือสำคัญในการจัดระเบียบโค้ดของเราให้เป็นสัดส่วน ทำให้ง่ายต่อการดูแลรักษาและนำกลับมาใช้ใหม่

ทำไมต้องใช้ Modules?

ลองจินตนาการว่าคุณกำลังสร้างโปรแกรมขนาดใหญ่ที่มีโค้ดหลายพันบรรทัด หากโค้ดทั้งหมดถูกเขียนอยู่ในไฟล์เดียว มันจะกลายเป็นเรื่องยากที่จะอ่าน ทำความเข้าใจ และแก้ไข การใช้ Modules ช่วยแบ่งโค้ดออกเป็นส่วนๆ ที่มีความรับผิดชอบเฉพาะ ทำให้โค้ดของเรา:

• เป็นระเบียบ: โค้ดถูกจัดกลุ่มตามหน้าที่การทำงาน
• นำกลับมาใช้ใหม่ได้: Modules สามารถนำไปใช้ในโปรเจกต์อื่นๆ ได้
• ดูแลรักษาง่าย: การเปลี่ยนแปลงใน Module หนึ่งจะไม่ส่งผลกระทบต่อ Module อื่นๆ (ถ้าออกแบบมาดี)
• หลีกเลี่ยงการชนกันของชื่อตัวแปร: Modules สร้าง scope ของตัวเอง ทำให้ตัวแปรใน Module หนึ่งไม่ชนกับตัวแปรใน Module อื่น

การ Export และ Import Modules

หัวใจสำคัญของการใช้งาน Modules คือการ export (ส่งออก) สิ่งที่เราต้องการให้ Module อื่นๆ สามารถเข้าถึงได้ และการ import (นำเข้า) สิ่งที่เราต้องการจาก Module อื่นๆ

การ Export

การ Export คือการกำหนดว่าอะไรใน Module นี้ที่ Module อื่นๆ สามารถนำไปใช้ได้ เราสามารถ Export ตัวแปร ฟังก์ชัน คลาส หรืออะไรก็ได้ที่เราต้องการ มีสองวิธีหลักในการ Export:

• Named Exports: Export หลายสิ่งหลายอย่างด้วยชื่อของมัน
• Default Export: Export สิ่งเดียวเป็นค่าเริ่มต้น

ตัวอย่าง Named Exports:

// math.js
export const PI = 3.14159;

export function add(x, y) {
  return x + y;
}

export class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  area() {
    return PI * this.radius * this.radius;
  }
}

ตัวอย่าง Default Export:

// message.js
const message = "Hello, world!";

export default message;

การ Import

การ Import คือการนำสิ่งที่เรา Export จาก Module อื่นๆ มาใช้ เราต้องระบุชื่อของ Module ที่เราต้องการ Import และสิ่งที่ต้องการ Import

ตัวอย่างการ Import Named Exports:

// app.js
import { PI, add, Circle } from './math.js';

console.log(PI); // Output: 3.14159
console.log(add(2, 3)); // Output: 5

const myCircle = new Circle(5);
console.log(myCircle.area()); // Output: 78.53975

ตัวอย่างการ Import Default Export:

// app.js
import message from './message.js';

console.log(message); // Output: Hello, world!

ข้อสังเกต:

• ในการ Import Named Exports เราใช้ curly braces `{}` และต้องระบุชื่อที่ตรงกับชื่อที่เรา Export
• ในการ Import Default Export เราไม่ใช้ curly braces `{}` และสามารถตั้งชื่ออะไรก็ได้ให้กับสิ่งที่ Import
• เราสามารถ Import ทั้ง Named Exports และ Default Export จาก Module เดียวกันได้

// app.js
import message, { PI, add } from './utils.js';

console.log(message);
console.log(PI);
console.log(add(2, 3));

CommonJS vs. ES Modules

JavaScript มีสองระบบ Modules หลักๆ คือ CommonJS และ ES Modules (ECMAScript Modules)

• CommonJS: เป็นระบบ Modules ที่ใช้ใน Node.js (JavaScript runtime environment สำหรับ server-side) ใช้ `require()` สำหรับการ Import และ `module.exports` สำหรับการ Export
• ES Modules: เป็นระบบ Modules ที่เป็นมาตรฐานของ JavaScript ใช้ `import` สำหรับการ Import และ `export` สำหรับการ Export รองรับโดย browsers สมัยใหม่ และ Node.js (ตั้งแต่เวอร์ชัน 13.2.0)

ตัวอย่าง CommonJS:

// math.js (CommonJS)
const PI = 3.14159;

function add(x, y) {
  return x + y;
}

module.exports = {
  PI: PI,
  add: add
};

// app.js (CommonJS)
const math = require('./math.js');

console.log(math.PI);
console.log(math.add(2, 3));

ข้อดีของ ES Modules:

• Static analysis: ES Modules สามารถวิเคราะห์ได้ตั้งแต่ก่อนรันโปรแกรม ทำให้สามารถตรวจจับข้อผิดพลาดได้เร็วขึ้น
• Tree shaking: ES Modules สามารถลบโค้ดที่ไม่ถูกใช้งานออกจาก bundle ได้ ทำให้ bundle มีขนาดเล็กลง
• Standardization: ES Modules เป็นมาตรฐานของ JavaScript และรองรับโดย browsers สมัยใหม่

ในปัจจุบัน ES Modules เป็นที่นิยมมากกว่า CommonJS โดยเฉพาะในการพัฒนา front-end และ Node.js เองก็รองรับ ES Modules แล้ว

Module Bundlers

Browser ไม่สามารถเข้าใจ ES Modules ได้โดยตรง (ยกเว้น browsers สมัยใหม่ที่รองรับ แต่ก็ยังต้อง configure) ดังนั้นเราจึงต้องใช้ Module Bundlers เพื่อแปลง ES Modules ให้เป็นไฟล์ JavaScript ที่ browser สามารถเข้าใจได้

Module Bundlers ที่นิยมใช้กัน ได้แก่:

• Webpack: เป็น Module Bundler ที่ได้รับความนิยมมากที่สุด มีความยืดหยุ่นสูงและมี plugins มากมาย
• Parcel: เป็น Module Bundler ที่ใช้งานง่ายและรวดเร็ว เหมาะสำหรับโปรเจกต์ขนาดเล็กถึงกลาง
• Rollup: เป็น Module Bundler ที่เน้นการสร้าง libraries ที่มีขนาดเล็กและมีประสิทธิภาพสูง
• esbuild: เป็น bundler ที่เน้นความเร็วในการ build เป็นพิเศษ

หลักการทำงานของ Module Bundlers:

1. Entry point: กำหนดไฟล์ JavaScript ที่เป็นจุดเริ่มต้นของโปรเจกต์
2. Dependency graph: สร้างกราฟแสดงความสัมพันธ์ระหว่าง Modules ทั้งหมด
3. Bundling: รวม Modules ทั้งหมดเข้าด้วยกันเป็นไฟล์เดียวหรือหลายไฟล์
4. Transformation: แปลงโค้ดให้เข้ากันได้กับ browsers (เช่น แปลง ES Modules เป็น ES5)
5. Optimization: ปรับปรุงประสิทธิภาพของโค้ด (เช่น Minification, Tree shaking)

การใช้งาน Module Bundlers อาจซับซ้อนในช่วงแรก แต่เมื่อเข้าใจหลักการแล้ว จะช่วยให้เราจัดการโค้ดได้อย่างมีประสิทธิภาพและสร้าง application ที่มีประสิทธิภาพสูงได้

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับการใช้งาน Modules ใน JavaScript ซึ่งเป็นเครื่องมือสำคัญในการจัดระเบียบโค้ดให้เป็นสัดส่วน ทำให้ง่ายต่อการดูแลรักษาและนำกลับมาใช้ใหม่ เราได้เรียนรู้เกี่ยวกับการ Export และ Import Modules, ความแตกต่างระหว่าง CommonJS และ ES Modules, และการใช้งาน Module Bundlers

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับการทำงานกับ JSON ซึ่งเป็นรูปแบบข้อมูลที่นิยมใช้ในการแลกเปลี่ยนข้อมูลระหว่าง server และ client