“โปรแกรมเมอร์ที่ไม่ดีกังวลเกี่ยวกับโค้ด โปรแกรมเมอร์ที่ดีต้องกังวลเกี่ยวกับโครงสร้างข้อมูลและความสัมพันธ์” - Linus Torvalds ผู้สร้าง Linux

เหมาะสำหรับเขียนไลบรารีหรือกำหนดค่าตรรกะที่กำหนดเองภายในแอป

เรียกใช้นิพจน์ฟังก์ชันทันที — IIFE

ตัวแปรร่วมใน JavaScript อาจทำให้เกิดปัญหา เช่น การชนกันของชื่อและรหัสสปาเก็ตตี้ ซึ่งนำไปสู่สิ่งที่เรียกว่ามลพิษขอบเขตรวม เพื่อหลีกเลี่ยงปัญหานี้ แนวปฏิบัติที่ดีที่สุดมาตรฐานคือInvoked Function Expressions (IIFEs) ทันที

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

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

// Create a module with a public API to 
// prevent pollution of global namespace
(function() {
  var foo = 'bar';

  function sayHello(name) {
    console.log('Hello, ' + name + '!');
  }

  // public API
  var intro = {
    greet: function(name) {
      sayHello(name);
      console.log('My name is ' + foo + '.');
    }
  };

  // expose public API to the global scope
  window.introModule = intro;
})();

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

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

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

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

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

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

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

var person = function() {
  var _firstName = '';
  var _lastName = '';

  function setName(firstName, lastName) {
    _firstName = firstName;
    _lastName = lastName;
  }

  function getName() {
    return _firstName + " " + _lastName;
  }

  return {
    setName,
    getName
  };
}();

รูปแบบโมดูลตัวสร้างที่เปิดเผยเป็นรูปแบบการออกแบบใน JavaScript ที่ช่วยให้เราสามารถสร้างอินสแตนซ์ของโมดูลได้มากเท่าที่เราต้องการ ง่ายต่อการย้ายจากรูปแบบ Singleton ไปยัง Constructor

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

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

var Person = function() {
  var _firstName = '';
  var _lastName = '';

  function setName(firstName, lastName) {
    _firstName = firstName;
    _lastName = lastName;
  }

  function getName() {
    return _firstName + " " + _lastName;
  }

  return {
    setName,
    getName
  };
};

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

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

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

var Person = function() {
  this._firstName = '';
  this._lastName = '';
}
 
Person.prototype = function() {
  var setName = function(firstName, lastName) {
    this._firstName = firstName;
    this._lastName = lastName;
  }

  var getName = function() {
    return _firstName + " " + _lastName;
  }

  return {
    setName,
    getName
  };
}();

สมัครรับจดหมายข่าวรายสัปดาห์ฟรีของ เรา ติดตามเราได้ที่Twitter , LinkedIn , YouTubeและDiscord

สนใจปรับขนาดซอฟต์แวร์เริ่มต้นของคุณหรือไม่ ตรวจสอบวงจร