JavaScript Modules (ES Modules)

ES Modules (ESM) ถูกนำเข้ามาใน ES2015 (ES6) เป็นระบบ Module อย่างเป็นทางการของ JavaScript ใช้ Keyword export และ import เพื่อแชร์โค้ดระหว่างไฟล์ ทำงานใน Strict Mode โดยอัตโนมัติ

โครงสร้างไฟล์ (ต้องรันบน Local Server)

project/
├── index.html
├── script.js (main)
└── sample.js (module)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ES Modules Demo</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 18px; font-weight: 500; color: blueviolet; }
  </style>
</head>
<body>
  <h1>JavaScript Modules (ESM)</h1>
  <button class="Btn">IMPORT</button>
  <div class="result"></div>
  <h3>คลิกปุ่มด้านบนเพื่อ Import Module</h3>
  <!-- type="module" บอกเบราว์เซอร์ว่าเป็น ES Module -->
  <script src="script.js" type="module"></script>
  <script src="sample.js" type="module"></script>
</body>
</html>

sample.js (Export)

// Named Exports
export const PI = 3.14159;
export function add(a, b) { return a + b; }

// Default Export (หนึ่งต่อไฟล์)
const message = "Module loaded!";
export default message;

// หรือ
export default function testImport() {
  document.querySelector(".result").innerHTML = "Module testImport ถูก Import แล้ว";
}

script.js (Import)

// Default Import
import testImport from './sample.js';

// Named Imports
import { PI, add } from './sample.js';

// Renaming
import { add as addNumbers } from './sample.js';

// Import All as Namespace
import * as MathUtils from './sample.js';

// Dynamic Import (Lazy Loading)
const loadModule = async () => {
  const module = await import('./sample.js');
  module.testImport();
};

document.querySelector('.Btn').addEventListener('click', () => {
  testImport(); // เรียก Default Export
});

⚠️ ข้อจำกัดและข้อควรระวัง

• ต้องรันบน HTTP Server (ไม่ทำงานกับ file:// protocol) - CORS Policy
• Strict Mode โดยอัตโนมัติ
• Deferred โหลดแบบ Asynchronous (เหมือน defer)
• Top-level await ใช้ได้ใน Module (ES2022)
• Circular Dependencies รองรับได้แต่ต้องระวัง

ผลลัพธ์

คลิก IMPORT → แสดง "Module testImport ถูก Import แล้ว" ใน div result