<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "df0dcecddcd28ea8cbf6ede0ad57d673",
  "translation_date": "2025-10-23T21:12:34+00:00",
  "source_file": "7-bank-project/1-template-route/assignment.md",
  "language_code": "th"
}
-->
# ปรับปรุงระบบ Routing

## คำแนะนำ

ตอนนี้คุณได้สร้างระบบ routing พื้นฐานแล้ว ถึงเวลาเพิ่มฟีเจอร์ระดับมืออาชีพเพื่อปรับปรุงประสบการณ์ผู้ใช้และให้เครื่องมือที่ดีกว่าสำหรับนักพัฒนา แอปพลิเคชันในโลกจริงต้องการมากกว่าการสลับเทมเพลต \u2013 พวกมันต้องการชื่อหน้าที่เปลี่ยนแปลงได้, lifecycle hooks และสถาปัตยกรรมที่ขยายได้

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

การประกาศ routes ในปัจจุบันมีเพียง ID ของเทมเพลตที่ใช้ แต่เมื่อแสดงหน้าใหม่ บางครั้งต้องการมากกว่านั้น มาปรับปรุงการใช้งาน routing ของเราด้วยสองฟีเจอร์เพิ่มเติม:

### ฟีเจอร์ 1: ชื่อหน้าที่เปลี่ยนแปลงได้ (Dynamic Page Titles)
**เป้าหมาย:** กำหนดชื่อให้กับแต่ละเทมเพลตและอัปเดตชื่อหน้าต่างด้วยชื่อใหม่นี้เมื่อเทมเพลตเปลี่ยนแปลง

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

**แนวทางการใช้งาน:**
- **ขยาย** ออบเจ็กต์ routes เพื่อรวมข้อมูลชื่อสำหรับแต่ละ route
- **ปรับปรุง** ฟังก์ชัน `updateRoute()` เพื่ออัปเดต `document.title` แบบไดนามิก
- **ทดสอบ** ว่าชื่อเปลี่ยนแปลงถูกต้องเมื่อมีการนำทางระหว่างหน้าจอ

### ฟีเจอร์ 2: Route Lifecycle Hooks  
**เป้าหมาย:** เพิ่มตัวเลือกในการรันโค้ดบางส่วนหลังจากที่เทมเพลตเปลี่ยนแปลง เราต้องการพิมพ์ `'Dashboard is shown'` ในคอนโซลของนักพัฒนาทุกครั้งที่หน้า dashboard ถูกแสดง

**ทำไมสิ่งนี้ถึงสำคัญ:**
- **ช่วยให้** สามารถรันลอจิกที่กำหนดเองเมื่อโหลด route เฉพาะ
- **ให้** hooks สำหรับการวิเคราะห์, การบันทึก หรือโค้ดการเริ่มต้น
- **สร้าง** พื้นฐานสำหรับพฤติกรรม route ที่ซับซ้อนมากขึ้น
- **แสดงให้เห็น** รูปแบบ observer ในการพัฒนาเว็บ

**แนวทางการใช้งาน:**
- **เพิ่ม** คุณสมบัติ callback function ที่เป็นตัวเลือกในการกำหนดค่า route
- **รัน** callback function (ถ้ามี) หลังจากการเรนเดอร์เทมเพลตเสร็จสิ้น
- **ตรวจสอบ** ว่าฟีเจอร์ทำงานได้สำหรับ route ใด ๆ ที่มีการกำหนด callback
- **ทดสอบ** ว่าข้อความคอนโซลปรากฏเมื่อเข้าชมหน้า dashboard

## เกณฑ์การประเมิน

| เกณฑ์ | ดีเยี่ยม                                                                                                                          | พอใช้                                                                                                                                                                                  | ต้องปรับปรุง                                       |
| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
|          | ฟีเจอร์ทั้งสองถูกใช้งานและทำงานได้ ชื่อและการเพิ่มโค้ดทำงานได้สำหรับ route ใหม่ที่เพิ่มในประกาศ `routes` | ฟีเจอร์ทั้งสองทำงานได้ แต่พฤติกรรมถูกเขียนไว้แบบ hardcoded และไม่สามารถกำหนดค่าได้ผ่านการประกาศ `routes` การเพิ่ม route ที่สามพร้อมชื่อและการเพิ่มโค้ดไม่ทำงานหรือทำงานบางส่วน | หนึ่งในฟีเจอร์หายไปหรือทำงานไม่ถูกต้อง |

---

**ข้อจำกัดความรับผิดชอบ**:  
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้