You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
8.4 KiB
58 lines
8.4 KiB
<!--
|
|
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) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ |