JavaScript Academy · บทเรียน

รูปแบบโมดูล (IIFE)

ห่อหุ้มโค้ดด้วยฟังก์ชันที่เรียกใช้งานทันที

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

สิ่งที่รูปแบบโมดูลช่วยแก้ปัญหา

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

IIFE

IIFE (นิพจน์ฟังก์ชันที่เรียกใช้ทันที) คือฟังก์ชันที่ทำงานทันทีที่ถูกกำหนด การครอบฟังก์ชันด้วยวงเล็บแล้วเรียกใช้จะสร้างขอบเขตส่วนตัวขึ้นทันที

const result = (function () {
  return 42;
})();
console.log(result); // 42

เหตุผลที่ต้องเรียกใช้ทันที

IIFE ช่วยให้คุณมีขอบเขตส่วนตัวที่ใช้ครั้งเดียว โดยไม่ต้องเหลือฟังก์ชันที่มีชื่อค้างไว้ ทุกสิ่งภายในจะถูกแยกออกจากพื้นที่ชื่อส่วนกลาง

(function () {
  const temp = "not global";
  console.log(temp);
})();
// temp is unreachable out here

การส่งคืนส่วนติดต่อสาธารณะ

รูปแบบโมดูลคือ IIFE ที่ส่งคืนวัตถุ เมธอดของวัตถุนั้นเป็นคลอเชอร์ที่ครอบคลุมตัวแปรส่วนตัว และรวมกันเป็นส่วนติดต่อสาธารณะ

const counter = (function () {
  let count = 0; // private
  return {
    inc: () => ++count,
    value: () => count
  };
})();
counter.inc();
console.log(counter.value()); // 1

ส่วนตัวกับสาธารณะ

สิ่งใดก็ตามที่ประกาศไว้ภายในแต่ไม่ได้ส่งคืนจะยังคงเป็นส่วนตัว สิ่งที่เข้าถึงได้มีเพียงสิ่งที่คุณใส่ไว้ในวัตถุที่ส่งคืนมา

const calc = (function () {
  const pi = 3.14159; // private constant
  return {
    area: (r) => pi * r * r
  };
})();
console.log(calc.area(2)); // 12.56636
console.log(calc.pi);      // undefined

ตัวช่วยส่วนตัว

ฟังก์ชันตัวช่วยสามารถอยู่ภายในโมดูลและถูกใช้โดยเมธอดสาธารณะได้ แต่จะไม่ถูกเปิดเผยออกมา

const validator = (function () {
  const clean = (s) => s.trim().toLowerCase(); // private
  return {
    isEmail: (s) => clean(s).includes("@")
  };
})();
console.log(validator.isEmail(" A@B.com ")); // true

รูปแบบโมดูลแบบเปิดเผย

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

const store = (function () {
  let items = [];
  function add(x) { items.push(x); }
  function count() { return items.length; }
  return { add, count }; // reveal
})();
store.add("a");
console.log(store.count()); // 1

ซิงเกิลตัน

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

const config = (function () {
  let settings = { theme: "dark" };
  return {
    get: (k) => settings[k],
    set: (k, v) => { settings[k] = v; }
  };
})();
config.set("theme", "light");
console.log(config.get("theme")); // "light"

การส่งการพึ่งพาเข้าไป

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

const mathUtils = (function (M) {
  return { roundUp: (n) => M.ceil(n) };
})(Math);
console.log(mathUtils.roundUp(4.1)); // 5

หลีกเลี่ยงการทำให้ส่วนกลางปะปน

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

ความสัมพันธ์กับโมดูล ES

ปัจจุบัน import/export มอบขอบเขตโมดูลที่แท้จริงในระดับภาษา และเข้ามาแทนที่รูปแบบนี้เป็นส่วนใหญ่ แต่การทำความเข้าใจโมดูล IIFE ช่วยให้เห็นชัดเจนว่าความเป็นส่วนตัวและการห่อหุ้มทำงานอย่างไร และคุณยังคงพบรูปแบบนี้ในโค้ดรุ่นเก่า

ตรวจสอบความเข้าใจอย่างรวดเร็ว

รูปแบบโมดูลและ IIFE

ทบทวน

รูปแบบโมดูลใช้ IIFE เพื่อสร้างขอบเขตส่วนตัว แล้วส่งคืนวัตถุที่มีเมธอดเป็นคลอเชอร์ซึ่งครอบคลุมสถานะที่ซ่อนอยู่ ส่วนภายในยังคงเป็นส่วนตัว และมีเพียงสมาชิกที่ส่งคืนมาเท่านั้นที่เป็นสาธารณะ รูปแบบย่อยอย่างรูปแบบโมดูลแบบเปิดเผยช่วยให้ส่วนติดต่อชัดเจนขึ้น และโมดูลมีลักษณะเป็นซิงเกิลตัน ปัจจุบัน import/export ของ ES เข้ามาแทนที่รูปแบบนี้ แต่ยังคงอาศัยแนวคิดเดียวกัน

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

บทเรียน “รูปแบบโมดูล (IIFE)” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “รูปแบบโมดูล (IIFE)”

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

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

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

บทเรียน “รูปแบบโมดูล (IIFE)” ใช้เวลานานแค่ไหน

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

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

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

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

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