ฉันได้ทำการพัฒนาแบ็คเอนด์โดยเฉพาะอย่างยิ่งเมื่อฉันใช้ Django หรือ Express ฉันควรคุ้นเคยกับฟังก์ชั่นการกำหนดเส้นทางทางฝั่งเซิร์ฟเวอร์ WordPress ระบบบล็อกยอดนิยมในต่างประเทศยังเป็นกรณีการดำเนินการเส้นทางคลาสสิกมาก แล้วเส้นทางคืออะไร? พูดคุยสั้น ๆ เกี่ยวกับเรื่องนี้ผ่าน WordPress
ผู้ที่เข้าใจกฎการเขียนซ้ำของ WordPress ทุกคนตระหนักดีว่าในความเป็นจริงการเข้าถึง URL ใด ๆ จะขึ้นอยู่กับ index.php ในไดเรกทอรีการติดตั้ง WordPress (ยกเว้นการเข้าถึงไฟล์ที่มีอยู่แล้วบนเซิร์ฟเวอร์) จะเห็นได้ชัดเมื่อลิงค์คงที่ WordPress อยู่ในการตั้งค่าโหมด ตัวอย่างเช่น URL ของบทความคือ index.php? p = id และ URL ของหน้าการจำแนกคือ index.php? cat = id
ที่นี่ index.php ทำหน้าที่เป็นฟังก์ชั่นเราเตอร์โปรดดูรูปภาพต่อไปนี้:
กล่าวอีกนัยหนึ่งไม่ว่าคุณจะไปที่อยู่ใดคำขอทั้งหมดจะถูกเปลี่ยนเส้นทางไปยัง index.php ในที่สุด โปรแกรมจะกำหนดประเภทของหน้าใดที่คุณต้องการตามลักษณะของ URL การเข้าถึงจากนั้นสร้างแบบสอบถามไปยังฐานข้อมูลและในที่สุดก็ส่งคืนเนื้อหา HTML ไปยังเบราว์เซอร์
สิ่งที่เรากล่าวถึงข้างต้นคือการกำหนดเส้นทางแบ็กเอนด์เว็บดังนั้นการกำหนดเส้นทางส่วนหน้าคืออะไร? ในความเป็นจริงเทคโนโลยีการกำหนดเส้นทางส่วนหน้าถูกนำมาใช้กันอย่างแพร่หลายในขณะนี้และห้องสมุดโอเพนซอร์ส JS หลายแห่งรองรับการกำหนดเส้นทางส่วนหน้าเช่น AngularJs, Ember.js, Director.js ฯลฯ หลักการของการกำหนดเส้นทางส่วนหน้านั้นเหมือนกับการกำหนดเส้นทางย้อนหลัง ช่วยให้การโต้ตอบทั้งหมดและแสดงในหน้าเดียวเพื่อเรียกใช้เพื่อลดคำขอเซิร์ฟเวอร์และปรับปรุงประสบการณ์ของลูกค้า เว็บไซต์มากขึ้นเรื่อย ๆ โดยเฉพาะแอปพลิเคชันเว็บใช้การกำหนดเส้นทางส่วนหน้า
Director.js คือการลงทะเบียนเส้นทาง/ตัวแยกวิเคราะห์ที่บริสุทธิ์ที่สุด มันใช้สัญลักษณ์ "#" เพื่อจัดระเบียบเส้นทาง URL ที่แตกต่างกันโดยไม่ต้องรีเฟรชหน้าและจับคู่วิธีการโทรกลับที่แตกต่างกันตามเส้นทาง URL ที่แตกต่างกัน Director.js ไม่เพียง แต่สามารถนำไปใช้กับลูกค้าได้ แต่ยังอยู่ในพื้นหลังโดยใช้ Node.js แต่ยังสามารถใช้ฟังก์ชั่นการกำหนดเส้นทางแบ็กเอนด์ที่กล่าวถึงข้างต้น มาดูตัวอย่างต่อไปนี้เกี่ยวกับการใช้งานการกำหนดเส้นทางส่วนหน้า
คุณต้องออกแบบแอปพลิเคชันบนเดสก์ท็อปเว็บคล้ายกับ Web QQ มีไอคอนขนาดเล็กจำนวนมากบนเดสก์ท็อปและไอคอนขนาดเล็กแต่ละตัวเป็นแอพพลิเคชั่นที่ใช้งานได้คล้ายกับเดสก์ท็อปคอมพิวเตอร์ มีปุ่มข่าว Baidu บนเดสก์ท็อป คลิกที่จะปรากฏขึ้นหน้าต่างในหน้าปัจจุบัน คุณสามารถดูข่าว Baidu และไอคอนอื่น คลิกเพื่อดูเวลาปัจจุบัน นี่คือตัวอย่างง่ายๆ:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <script src = "https://rawgit.com/flatiron/director/master/build/director.min.js" {width: 100%; ความสูง: 100%; พื้นหลัง: #3D72B8} #BaidUnews {width: 40px; ความสูง: 40px; พื้นหลัง: url ("./ du.png") ไม่มีการทำซ้ำ; ไม่ต้องทำซ้ำ; แสดง: บล็อก; ระยะขอบ: 50px;} </style> </head> <body> <a href = "#/baidunews" id = "baidunews"> </a> <a href = "#/เวลา" id = "tweibo"> </a> </a> </a> "/baidunews": [showframe, getBaidUnews]} // เริ่มต้นเส้นทางเส้นทาง var เราเตอร์ = เราเตอร์ (เส้นทาง) เราเตอร์.init (); // กำหนดฟังก์ชั่นการโทรกลับที่แสดงฟังก์ชันเวลาปัจจุบันตอนนี้ () {var now = new Date (); var y = now.getlyear (); var m = now.getMonth ()+1; var d = now.getDate (); var h = now.getHours (); var mi = now.getMinutes (); var s = now.getSeconds (); การแจ้งเตือน ("เวลาปัจจุบัน/n"+y+"ปี"+m+"เดือน"+d+"วัน"+h+"เวลา"+mi+"นาที"+s+"วินาที"); } // กำหนดฟังก์ชั่นที่แสดงฟังก์ชั่นเฟรมเวิร์กเบราว์เซอร์ showframe () {var f = document.createElement ("div"); f.style.width = "985px"; f.style.height = "500px"; f.style.position = "สัมบูรณ์"; f.style.top = "50px"; f.style.left = "200px"; f.style.background = "White"; f.style.border = "2px solid #ccc"; // ปิดปุ่ม var close = document.createelement ("span"); close.style.position = "สัมบูรณ์"; close.style.right = "5px"; close.style.cursor = "ตัวชี้"; close.style.marginright = "5px"; close.onclick = function () {document.body.removechild (f); } close.innerhtml = "x"; // โหลด iframe นอกไซต์ var win = document.createElement ("iframe"); win.id = "myiframe"; win.frameBorder = 0; win.style.width = "100%"; win.style.height = "100%"; F.AppendChild (ปิด); F.AppendChild (ชนะ); document.body.appendchild (f); } // กำหนดฟังก์ชั่นฟังก์ชั่นเพื่อโหลดหน้าเว็บ Baidu News หน้า getBaidUnew () {document.getElementById ("myiframe") .src = "http://news.baidu.com/"; } </script> </body> </html>จากรหัสข้างต้นเราจะเห็นผู้กำกับ js ใช้ "#" ในหน้าสำหรับการกำหนดเส้นทางและการส่งต่อ ตัวอย่างข้างต้นเป็นเพียงตัวอย่างที่ง่ายมาก Director.js สามารถใช้ฟังก์ชั่นที่ซับซ้อนและยิ่งใหญ่ได้มากขึ้น มันสามารถโต้ตอบกับข้อมูล AJAX และเซิร์ฟเวอร์และสามารถอยู่ร่วมกับไลบรารีคลาส JS อื่น ๆ ได้ เป็นเครื่องมือพัฒนาเว็บแอปพลิเคชันที่ทรงพลัง
Director.js มีผลกระทบต่อ SEO หรือไม่?
ผู้อำนวยการของลูกค้า js มีผลกระทบต่อ SEO เนื่องจากข้อมูลทั้งหมดอยู่ในหน้าเดียวเท่านั้นและข้อมูลบางอย่างจะถูกเก็บไว้ในลักษณะที่ไม่เอื้อต่อการค้นหาแมงมุมเครื่องมือค้นหา หากคุณต้องการเป็นมิตรกับ SEO หมายความว่าคุณต้องสร้าง "หน้าเว็บ" แทนที่จะเป็น "เว็บแอปพลิเคชัน" ไม่แนะนำผู้อำนวยการ JS
ข้อมูลอ้างอิง: ผู้อำนวยการ. js