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

รูปแบบการออกแบบ JavaScript

ภาพรวม

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

รูปแบบการออกแบบ JavaScript คืออะไร?

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

รูปแบบการออกแบบโมดูล

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

const student = (function () {
  // Private
  let name = "mustafa";
  let program = "computer science";
  const getStudentName = () => name;
  const getStudentProgram = () => program;

  // Public
  return {
    name,
    program,
    getName: () => getStudentName(),
    getStudentProgram: () => getStudentProgram(),
  };
})();

student.name;
student.program;
student.getStudentProgram();

รูปแบบของโรงงาน JavaScript

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

// sandwich.js
const Sandwich = function({name }) {
  this.name = name || "";
};
module.exports = Sandwich;

// burger.js
const Burger = function({name }) {
    this.name = name || "";
};
module.exports = Burger;

// gadFoodFactory.js
const Sandwich = require("./sandwich");
const Burger = require("./burger");
const food = { Burger, Sandwich };
module.exports = {
    createFood(type, attributes) {
        const GadFoodType = food[type];
        return new GadFoodType(attributes);
    }
};

// index.js
const gadFoodFactory = require("./gadFoodFactory");
const mySandwich = gadFoodFactory.createFood("Sandwich", {
    name: "Chicken"
});
const myBurger = gadFoodFactory.createFood("Burger", {
    name: "Grilled",
});
console.log(mySandwich);
console.log(myBurger);

รูปแบบ Singleton JavaScript

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

let singletonPattern = new (function () {

  let name = "mustafa";

  this.printName = function() {
      console.log(name);
  }
})();

singletonPattern.printName();

// output: mustafa

รูปแบบผู้สังเกตการณ์ JavaScript

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

function ObserverFunc() {
this.observerArray = [];
}

ObserverFunc.prototype.subscribe = function (ele) {
this.observerArray.push(ele);
}

ObserverFunc.prototype.unsubscribe = function (element) {
const elementIndex = this.observerArray.indexOf(element);
if (elementIndex > -1) {
this.observerArray.splice(elementIndex, 1);
}
}

ObserverFunc.prototype.notifyAll = function (element) {
this.observerArray.forEach(function (observerElement) {
observerElement(element);
});
}

บทสรุป

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

เชื่อมต่อกับเรา

ในที่สุด containerize.com อยู่ในกระบวนการที่สอดคล้องกันในการเขียนโพสต์ JavaScript ในหัวข้อใหม่ คุณสามารถอยู่ในวงได้โดยติดตามเราบนแพลตฟอร์มโซเชียลมีเดียของเรารวมถึง Facebook, LinkedIn และ Twitter

ถามคำถาม

คุณสามารถแจ้งให้เราทราบเกี่ยวกับคำถามหรือคำถามของคุณเกี่ยวกับ [ฟอรัม] ของเรา 11

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

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

ดูสิ่งนี้ด้วย