คำนำ
การกำหนดเส้นทางส่วนหน้าได้รับการสนับสนุนในเฟรมเวิร์กห้องสมุดโอเพนซอร์สหลายแห่งเช่น AngularJs, Backbone, ReactJs ฯลฯ หลักการของการกำหนดเส้นทางส่วนหน้านั้นเหมือนกับการกำหนดเส้นทาง back-end ช่วยให้การโต้ตอบทั้งหมดและแสดงในหน้าเดียวเพื่อเรียกใช้เพื่อลดคำขอเซิร์ฟเวอร์และปรับปรุงประสบการณ์ของลูกค้า เว็บไซต์มากขึ้นเรื่อย ๆ โดยเฉพาะแอปพลิเคชันเว็บใช้การกำหนดเส้นทางส่วนหน้า
HTML
มีเมนูนำทาง UL ในหน้าและผลลัพธ์ DIV#ใช้เพื่อแสดงผลลัพธ์ เมื่อคลิกที่เมนูการนำทางเนื้อหาผลลัพธ์ที่แตกต่างจะปรากฏใน #Result
<ul> <li> <a href = "#/"> home </a> </li> <li> <a href = "#/product"> ผลิตภัณฑ์ </a> </li> <li> <a href = "#/เซิร์ฟเวอร์"> บริการ </a> </li>
จาวาสคริปต์
มาพูดคุยเกี่ยวกับหลักการสั้น ๆ ของการใช้งานการกำหนดเส้นทางส่วนหน้า การใช้แบบฟอร์มแฮช (สามารถจัดการได้โดยใช้ประวัติ API) เป็นตัวอย่างเมื่อแฮชของการเปลี่ยนแปลง URL การเรียกกลับที่ลงทะเบียน Hashchange จะถูกเรียกใช้และการดำเนินการที่แตกต่างกันจะดำเนินการในการโทรกลับและเนื้อหาที่แตกต่างกันจะปรากฏขึ้น
ฟังก์ชันเราเตอร์ () {this.routes = {}; this.cururl = ''; this.route = function (พา ธ การโทรกลับ) {this.routes [path] = callback || การทำงาน(){}; - this.refresh = function () {this.cururl = location.hash.slice (1) || - this.woutes [this.cururl] (); - this.init = function () {window.addeventListener ('โหลด', this.refresh.bind (นี่), false); window.addeventListener ('hashchange', this.refresh.bind (นี่), false); -ในรหัสข้างต้นการใช้งานวัตถุระบบเส้นทางการกำหนดเส้นทางส่วนใหญ่มีสามวิธี:
init ฟังเหตุการณ์การอัปเดต Hash URL ของเบราว์เซอร์
เส้นทางเก็บการโทรกลับในระหว่างการอัปเดตเส้นทางไปยังเส้นทางการโทรกลับและฟังก์ชั่นการโทรกลับจะรับผิดชอบในการอัปเดตหน้า
รีเฟรชเรียกใช้ฟังก์ชันการโทรกลับที่สอดคล้องกับ URL ปัจจุบันและอัปเดตหน้า
วิธีการโทรของเราเตอร์มีดังนี้:
คลิกเพื่อทริกเกอร์การเปลี่ยนแปลงแฮชของ URL และอัปเดตเนื้อหาตามนั้น หลังจากทำงานแล้วคุณจะพบว่าทุกครั้งที่คุณคลิกที่เมนูสีพื้นหลังและเนื้อหาจะเปลี่ยนใน #Result
var r = ใหม่เราเตอร์ (); r.init (); var res = document.getElementById ('ผลลัพธ์'); r.route ('/', function () {res.style.background = 'blue'; res.innerhtml = 'นี่คือหน้าแรก';}); r.route ('/product', function () {res.style.background = 'Orange'; res.innerhtml = 'นี่คือหน้าผลิตภัณฑ์';}); r.route ('/เซิร์ฟเวอร์', ฟังก์ชัน () {res.style.background = 'black'; res.innerhtml = 'นี่คือหน้าบริการ';});สรุป
ข้างต้นเป็นการดำเนินการตามเส้นทางการกำหนดเส้นทางส่วนหน้าอย่างง่าย ในแอปพลิเคชันจริงแฮชควรดำเนินการอย่างสม่ำเสมอเพื่อให้ตรงกับการใช้ URL จำนวนมากและในเวลาเดียวกันฟังก์ชั่นของเนื้อหาหน้าร้องขอ Ajax asynchronous จะถูกเพิ่มเข้ามา แม้ว่าตัวอย่างนี้จะง่ายมากในความเป็นจริงรากฐานของระบบการกำหนดเส้นทางจำนวนมากขึ้นอยู่กับสิ่งนี้และระบบการกำหนดเส้นทางอื่น ๆ ส่วนใหญ่จะให้การสนับสนุนและเพิ่มประสิทธิภาพกลไกเฟรมเวิร์กที่ใช้ โอเคเนื้อหาของบทความนี้อยู่ที่นี่ ฉันหวังว่ามันจะช่วยให้คุณเรียนหรือทำงานได้ หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อสื่อสาร