15 KiB

Raw Blame History

การมอบหมายงานการปรับปรุงโค้ดและการเขียนเอกสาร

วัตถุประสงค์การเรียนรู้

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

โค้ดที่สะอาดและมีเอกสารประกอบที่ดีเป็นสิ่งสำคัญสำหรับโครงการพัฒนาเว็บในโลกจริงที่มีนักพัฒนาหลายคนร่วมมือกันและโค้ดเบสที่เปลี่ยนแปลงไปตามเวลา

ภาพรวมของงาน

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

คำแนะนำ

ปรับปรุงโค้ด app.js ของคุณโดยใช้เทคนิคการปรับปรุงโค้ดหลักสามข้อดังนี้:

1. แยกค่าคงที่สำหรับการตั้งค่า

งาน: สร้างส่วนการตั้งค่าที่ด้านบนของไฟล์ของคุณด้วยค่าคงที่ที่สามารถนำกลับมาใช้ใหม่ได้

คำแนะนำในการดำเนินการ:

แยก URL ฐานของ API เซิร์ฟเวอร์ (ที่ปัจจุบันถูกเขียนไว้ในหลายที่)
สร้างค่าคงที่สำหรับข้อความแสดงข้อผิดพลาดที่ปรากฏในฟังก์ชันหลายๆ ตัว
พิจารณาแยกเส้นทางของ route และ ID ของ element ที่ถูกใช้ซ้ำๆ

ตัวอย่างโครงสร้าง:

// Configuration constants
const API_BASE_URL = 'http://localhost:5000/api';
const ROUTES = {
  LOGIN: '/login',
  DASHBOARD: '/dashboard'
};

2. สร้างฟังก์ชันการส่งคำขอที่รวมกัน

งาน: สร้างฟังก์ชัน sendRequest() ที่สามารถนำกลับมาใช้ใหม่ได้เพื่อกำจัดโค้ดที่ซ้ำซ้อนระหว่าง createAccount() และ getAccount()

ข้อกำหนด:

รองรับทั้งคำขอ GET และ POST
มีการจัดการข้อผิดพลาดที่เหมาะสม
รองรับ endpoint URL ที่แตกต่างกัน
รับข้อมูล body ของคำขอเป็นตัวเลือก

คำแนะนำสำหรับ signature ของฟังก์ชัน:

async function sendRequest(endpoint, method = 'GET', data = null) {
  // Your implementation here
}

3. เพิ่มเอกสารประกอบโค้ดแบบมืออาชีพ

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

มาตรฐานการเขียนเอกสาร:

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

ตัวอย่างสไตล์การเขียนเอกสาร:

/**
 * Authenticates user and redirects to dashboard
 * @param {Event} event - Form submission event
 * @returns {Promise<void>} - Resolves when login process completes
 */
async function login(event) {
  // Prevent default form submission to handle with JavaScript
  event.preventDefault();
  
  // Your implementation...
}

เกณฑ์ความสำเร็จ

โค้ดที่ปรับปรุงของคุณควรแสดงให้เห็นถึงแนวทางการพัฒนามืออาชีพดังนี้:

การดำเนินการที่ยอดเยี่ยม

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

การดำเนินการที่เพียงพอ

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

ต้องปรับปรุง

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

การทดสอบโค้ดที่ปรับปรุง

หลังจากการปรับปรุง ตรวจสอบให้แน่ใจว่าแอปธนาคารของคุณยังคงทำงานได้อย่างถูกต้อง:

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

แนวทางการส่งงาน

ส่งไฟล์ app.js ที่ปรับปรุงของคุณพร้อมกับ:

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

ความท้าทายเพิ่มเติม: สร้างไฟล์เอกสารโครงสร้างโค้ด (CODE_STRUCTURE.md) ง่ายๆ ที่อธิบายสถาปัตยกรรมของแอปของคุณและวิธีการทำงานร่วมกันของฟังก์ชันต่างๆ

การเชื่อมโยงกับโลกจริง

งานนี้สะท้อนถึงประเภทของการดูแลรักษาโค้ดที่นักพัฒนามืออาชีพทำเป็นประจำ ในการทำงานในอุตสาหกรรม:

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

ทักษะที่คุณกำลังฝึกฝนที่นี่ - การแยกค่าคงที่ การกำจัดการซ้ำซ้อน และการเขียนเอกสารที่ชัดเจน - เป็นพื้นฐานของการพัฒนาซอฟต์แวร์มืออาชีพ

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้

15 KiB Raw Blame History