8.4 KiB
ปรับปรุงระบบ 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 แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้