วิธีสร้างโค้ดที่ใช้ซ้ำได้ใน JavaScript โดยใช้รูปแบบการออกแบบ

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

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

---

---

รูปแบบการออกแบบเป็นหัวข้อกว้างๆ แต่ด้วยการทำความเข้าใจรูปแบบโมดูลและวิธีการจากโรงงาน คุณควรเข้าใจมัน

รูปแบบโมดูล

โมดูล JavaScript เปิดตัวในปี 2552 โดยมีภาษาโปรแกรมรุ่น ES5 การใช้โมดูลทำให้นักพัฒนาสามารถสร้างโค้ดที่กำหนดเองและส่งออกไปใช้ในส่วนอื่นๆ ของแอปพลิเคชัน JavaScript ได้

โครงสร้างพื้นฐานของรูปแบบโมดูล


(function(){
//Declare private variables and functions
//Declare and return public variables and functions
})();

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

ส่วนแรกใช้เพื่อประกาศตัวแปรส่วนตัวและฟังก์ชัน ซึ่งสามารถเข้าถึงได้ภายในขอบเขตของรูปแบบโมดูลเท่านั้น

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

---

---

การใช้รูปแบบโมดูลเพื่อสร้างแอปพลิเคชัน

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

• ตัวควบคุมงาน
• ตัวควบคุม UI
• ตัวควบคุมการจัดเก็บ
• ตัวควบคุมแอพ

ที่เกี่ยวข้อง: โครงการการเขียนโปรแกรมสำหรับผู้เริ่มต้น

---

---

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

การใช้รูปแบบโมดูลเพื่อสร้างตัวอย่างตัวควบคุม UI


const UIController = ( function() {
//the private section of the module
let component = 'Replacement Text';
const changeComponent = function() {
//change all the h1 text to what is in the component variable above
const element = document.querySelector('h1');
element.textContent = component;
}
//the public section of the module
return{
callChangeComponent: function() {
changeComponent();
}
}
})();


ตัวอย่างข้างต้นแสดงให้เห็นอย่างชัดเจนถึงสองส่วนที่พบในรูปแบบโมดูล ทั้งแบบส่วนตัวและแบบสาธารณะ

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

วิธีที่ไม่ถูกต้องในการเรียกใช้ changeComponent Example


UIController.changeComponent();


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

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

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

วิธีที่ถูกต้องในการเรียกใช้ changeComponent Example


UIController.callChangeComponent();


รูปแบบโรงงาน

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

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

การใช้รูปแบบโรงงานเพื่อกำหนดตัวอย่างประเภทงาน


//Factory pattern function
const TaskFactory = function(){
this.createTask = function(name, type){
let task;
//check the type the user selected
if(type === 'urgent'){
task = new UrgentTask(name);
}else if(type === 'trivial'){
task = new TrivialTask(name);
}
//set the type selected in the if statement to the one received as a property
task.type = type;
//used to print the task and its type to the console
task.define = function(){
console.log(`${this.name} (${this.type}): ${this.priority}`)
}
return task
}
}

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

ฟังก์ชันภายใน createTask กำหนดขั้นตอนสำหรับงานหลายงานที่จะสร้างพร้อมกัน แต่ก่อนที่เราจะพยายามสร้างงานใหม่ ๆ มีโค้ดเพิ่มเติมบางอย่างที่เราจำเป็นต้องรวมไว้ในส่วนนี้ของโครงการ

ในโค้ดด้านบนนี้ เรากำลังสร้าง UrgentTask ใหม่หรือ Trivialtask ใหม่ หากตรงตามเงื่อนไขเฉพาะ อย่างไรก็ตาม ไม่มีฟังก์ชันหรือคลาสใดๆ ที่มีชื่อเหล่านี้ในโปรเจ็กต์ของเรา ปัญหานี้สามารถแก้ไขได้ง่ายโดยแนะนำโค้ดต่อไปนี้ในโปรเจ็กต์ของเรา

สร้างประเภทงานด่วนและไม่สำคัญ


//Create the urgent task type
const UrgentTask = function(name){
this.name = name;
this.priority = 'as soon as possible'
}
//create the trivial task type
const TrivialTask = function(name){
this.name = name;
this.priority = 'when you can'
}


เนื่องจากโค้ดข้างต้น เราสามารถกำหนดคุณสมบัติ UrgentTask หรือ TrivialTask ​​ให้กับงานใหม่แต่ละงานที่สร้างขึ้นได้ ขั้นตอนต่อไปคือการสร้างงานใหม่ แต่ก่อนหน้านั้น เราจำเป็นต้องสร้างฐานข้อมูลเพื่อจัดเก็บงานใหม่แต่ละงานในขณะที่มันถูกสร้างขึ้น

เนื่องจากการสร้างฐานข้อมูลเป็นทั้งบทความในตัวเอง เราจะแทนที่ฐานข้อมูลด้วยโครงสร้างข้อมูล (อาร์เรย์)

การสร้างตัวอย่างอาร์เรย์


//create an array to host the different task
const task = [];


ตอนนี้เราก็สามารถสร้างงานใหม่ได้แล้ว

การสร้างตัวอย่างงานใหม่


//create two new tasks
const factory = new TaskFactory();
task.push(factory.createTask('Clean the house', 'urgent'));
task.push(factory.createTask('Reach level 30 in Candy Crush', 'trivial'));


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

หลังจากที่แต่ละงานได้ดำเนินการผ่าน TaskFactory และกำหนดคุณสมบัติประเภทที่เหมาะสม จากนั้นจะถูกส่งไปยังอาร์เรย์งานที่เราสร้างไว้ก่อนหน้านี้

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

กลับไปที่ Use the Factory Pattern to Assign a Task Type Example ด้านบน ด้านล่างของงานที่ใช้พิมพ์งานและประเภทของงานไปยังข้อคิดเห็นของคอนโซล มีฟังก์ชัน task.define ขนาดเล็กที่สร้างขึ้นเพื่อพิมพ์งานแต่ละงานในอาร์เรย์ ไปยังคอนโซลโดยใช้สิ่งต่อไปนี้ วิธีอาร์เรย์ .


//print each task to the console
task.forEach(function(task){
task.define();
});


คุณควรเห็นผลลัพธ์ต่อไปนี้แสดงในคอนโซลของคุณ


Clean the house (urgent): as soon as possible
Reach level 30 in Candy Crush (trivial): when you can


ตอนนี้คุณสามารถใช้รูปแบบการออกแบบในโครงการ JavaScript ของคุณ

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

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

เครดิตภาพ: Alltechbuzz/ Pixabay

วิธีตรวจสอบพิกเซลที่ตายแล้ว

แบ่งปัน แบ่งปัน ทวีต อีเมล วิธีการประกาศตัวแปรใน JavaScript

ในการเริ่มต้นใช้งาน JavaScript คุณต้องเข้าใจตัวแปร สามวิธีในการประกาศตัวแปรใน JavaScript

อ่านต่อไป หัวข้อที่เกี่ยวข้อง

• การเขียนโปรแกรม
• JavaScript

เกี่ยวกับผู้เขียน คาเดชา คีน(21 บทความที่ตีพิมพ์)

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

เพิ่มเติมจาก Kadeisha Kean

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก