HTML Academy · บทเรียน

สคริปต์โมดูล ES type=module

โหลด JavaScript เป็นโมดูล ES ด้วย type=module

สคริปต์โมดูล ES type=module เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

โมดูล ES คืออะไร

โมดูล ES คือไฟล์ JavaScript ที่ใช้การประกาศ import และ export โมดูลมีขอบเขตของตนเอง (ไม่ทำให้ขอบเขตส่วนกลางปนเปื้อน) ใช้โหมดเข้มงวดเป็นค่าเริ่มต้น และระบุการพึ่งพาอย่างชัดเจน ซึ่งช่วยแก้ปัญหาการจัดลำดับแท็กสคริปต์ที่สะสมมาหลายทศวรรษ

แท็กสคริปต์ของโมดูล

<script type="module" src="app.js"> บอกเบราว์เซอร์ว่าไฟล์นี้เป็นโมดูล เบราว์เซอร์จะวิเคราะห์การนำเข้า ดึงการพึ่งพาแบบขนาน และดำเนินการไฟล์เริ่มต้นเมื่อกราฟการพึ่งพาทั้งหมดดาวน์โหลดและคอมไพล์เสร็จแล้วเท่านั้น

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

โมดูลจะเลื่อนการทำงาน

สคริปต์โมดูลทำงานเสมือนมี defer กล่าวคือดาวน์โหลดไปพร้อมกับการวิเคราะห์ HTML และทำงานหลังจากวิเคราะห์เสร็จตามลำดับการประกาศ คุณสามารถวาง <script type="module"> ไว้ที่ใดก็ได้ (แม้ใน <head>) โดยไม่ขัดขวางหน้าเว็บ

การนำเข้าใช้ตัวระบุ

คำสั่งนำเข้าใช้ตัวระบุได้สามแบบ ได้แก่ URL แบบสัมพัทธ์ (./utils.js) URL แบบสัมบูรณ์ (https://cdn.example.com/lib.js) หรือชื่อเปล่า (lodash) ชื่อเปล่าต้องใช้แผนที่การนำเข้า (จะกล่าวถึงถัดไป) เพราะเบราว์เซอร์ไม่ทราบว่าชื่อเหล่านี้แมปกับไฟล์ใด

// app.js
import { sum } from "./utils.js";
import { render } from "https://esm.sh/preact";
console.log(sum(1, 2));

ต้องระบุนามสกุลไฟล์

เบราว์เซอร์จะไม่เติม .js ให้ตัวระบุการนำเข้าโดยอัตโนมัติ import "./utils" จะล้มเหลว แต่ import "./utils.js" จะทำงาน เครื่องมือรวมชุดและ Node อาจยืดหยุ่นกว่า แต่เบราว์เซอร์เคร่งครัด ดังนั้นให้เขียนนามสกุลไฟล์อย่างชัดเจน

ต้องใช้ CORS

โมดูลจะถูกดึงด้วย CORS เสมอ แม้จะมาจากต้นทางเดียวกันก็ตาม ไฟล์โมดูลข้ามต้นทางต้องส่งส่วนหัว Access-Control-Allow-Origin ที่เหมาะสม มิฉะนั้นการนำเข้าจะล้มเหลว บริการ CDN ส่วนใหญ่ (esm.sh, jsdelivr, unpkg) ตั้งค่านี้ไว้อย่างถูกต้องตั้งแต่แรก

การรอระดับบนสุด

โมดูลรองรับ await ที่ระดับบนสุด โดยไม่ต้องห่อด้วยฟังก์ชันแบบไม่พร้อมกัน: const data = await fetch("/api").then(r => r.json()) ผู้ใช้โมดูลจะรอจนกว่าการรอระดับบนสุดจะเสร็จสมบูรณ์ก่อนจึงทำงาน

// data.js
export const config = await fetch("/config.json").then(r => r.json());
// app.js (waits for data.js)
import { config } from "./data.js";
console.log(config);

โมดูลเป็นซิงเกิลตัน

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

โมดูลแบบแทรกในหน้า

คุณยังสามารถเขียนโมดูลแทรกไว้ในหน้าได้ด้วย: <script type="module">import x from "./y.js"; ...</script> เหมาะสำหรับโค้ดเริ่มต้นระบบหรือการทดลอง แต่ไฟล์ภายนอกจะดีบักและแคชได้ง่ายกว่า

nomodule สำหรับความเข้ากันได้กับรุ่นเก่า

ให้ใช้ <script type="module"> คู่กับ <script nomodule src="legacy.js"> เบราว์เซอร์สมัยใหม่จะเรียกใช้โมดูลและข้ามสคริปต์ nomodule ส่วนเบราว์เซอร์รุ่นเก่าจะเรียกใช้สคริปต์ nomodule และข้ามโมดูล วิธีนี้ใช้ระหว่างการเปลี่ยนผ่านไปสู่แอปที่ใช้ ESM ทั้งหมด

ข้อผิดพลาดและการนำเข้าที่ล้มเหลว

การนำเข้าที่ล้มเหลว (404, CORS หรือข้อผิดพลาดทางไวยากรณ์) จะโยนข้อผิดพลาดและป้องกันไม่ให้กราฟโมดูลทั้งหมดทำงาน ใช้แผงเครือข่ายเพื่อตรวจหาคำขอโมดูลที่ล้มเหลว และใช้คอนโซลเพื่ออ่านข้อความข้อผิดพลาดของการนำเข้าที่แท้จริง

ตรวจสอบความรู้

เหตุใดสคริปต์โมดูลจึงทำงานเสมือนมีการตั้งค่า defer ทั้งที่คุณไม่ได้ระบุไว้

สรุป

คำถามที่พบบ่อย

บทเรียน “สคริปต์โมดูล ES type=module” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “สคริปต์โมดูล ES type=module” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “สคริปต์โมดูล ES type=module”

โหลด JavaScript เป็นโมดูล ES ด้วย type=module คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “สคริปต์โมดูล ES type=module” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy