กวดวิชาที่ดีสำหรับการใช้ API ประวัติ HTML5 (Pushstate?) [ปิด]

ฉันกำลังมองหาการใช้ HTML5 History API เพื่อแก้ไขปัญหาการเชื่อมโยงเชิงลึกกับเนื้อหาที่โหลด AJAX แต่ฉันพยายามดิ้นรนเพื่อหลีกเลี่ยงปัญหา มีใครรู้แหล่งข้อมูลที่ดีบ้างไหม?

ฉันต้องการใช้สิ่งนี้เนื่องจากเป็นวิธีที่ดีในการอนุญาตให้ผู้ที่ส่งลิงก์อาจไม่เปิด JS การแก้ปัญหาหลายอย่างล้มเหลวเมื่อผู้ที่มี JS ส่งลิงค์ถึงบุคคลที่ไม่มี

การวิจัยเริ่มต้นของฉันดูเหมือนจะชี้ไปที่ History API ภายใน JS และวิธี pushState

http://html5demos.com/history

สำหรับบทช่วยสอนที่ยอดเยี่ยมหน้า Mozilla Developer Network ในฟังก์ชั่นนี้คุณจะต้อง: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

น่าเสียดายที่ HTML5 History API นั้นมีการใช้งานที่แตกต่างกันไปในเบราว์เซอร์ HTML5 ทั้งหมด (ทำให้ไม่สอดคล้องกันและมีความผิดพลาด) และไม่มีทางเลือกอื่นสำหรับเบราว์เซอร์ HTML4 โชคดีที่History.jsให้การทำงานร่วมกันข้ามสำหรับเบราว์เซอร์ HTML5 (ทำให้มั่นใจว่าเบราว์เซอร์ HTML5 ทั้งหมดทำงานตามที่คาดไว้) และเป็นทางเลือกที่ให้แฮชสำรองสำหรับเบราว์เซอร์ HTML4 (รวมถึงการสนับสนุนข้อมูลข้อมูลชื่อ pushState และ

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ History.js ได้ที่นี่: https://github.com/browserstate/history.js

สำหรับบทความเกี่ยวกับ Hashbangs VS Hashes VS API ประวัติ HTML5 ดูที่นี่: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

ฉันได้รับประโยชน์มากมายจาก 'Dive to HTML 5' คำอธิบายและการสาธิตนั้นง่ายขึ้นและตรงประเด็น บทที่ประวัติศาสตร์ - http://diveintohtml5.info/history.html และการสาธิตประวัติ - http://diveintohtml5.info/examples/history/fer.html

โปรดทราบว่าในขณะที่ใช้ HTML5 pushstate หากผู้ใช้คัดลอกหรือคั่นหน้าลิงก์ลึก ๆ และเข้าชมอีกครั้งจากนั้นจะเป็นการเข้าสู่เซิร์ฟเวอร์โดยตรงซึ่งจะเป็น 404 ดังนั้นคุณต้องพร้อมสำหรับมันและแม้แต่ห้องสมุด pushstate js ก็ไม่ได้ช่วยอะไร คุณ. ทางออกที่ง่ายที่สุดคือการเพิ่มกฎการเขียนซ้ำลงในเซิร์ฟเวอร์ Nginx หรือ Apache ของคุณดังนี้:

Apache (ใน vhost ของคุณหากคุณใช้อยู่):

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

Nginx

rewrite ^(.+)$ /index.html last;

ข้อมูลจำเพาะประวัติศาสตร์ HTML5เป็นโวหาร

history.pushState()ไม่ได้ส่งpopstateเหตุการณ์หรือโหลดหน้าใหม่ด้วยตัวเอง มันหมายถึงการผลักดันสถานะในประวัติศาสตร์เท่านั้น นี่คือคุณสมบัติ "เลิกทำ" สำหรับแอปพลิเคชันหน้าเดียว คุณต้องส่งpopstateเหตุการณ์ด้วยตนเองหรือใช้history.go()เพื่อนำทางไปยังสถานะใหม่ แนวคิดคือเราเตอร์สามารถฟังpopstateเหตุการณ์และนำทางสำหรับคุณ

บางสิ่งที่ควรทราบ:

• history.pushState()และhistory.replaceState()อย่าส่งpopstateเหตุการณ์
• history.back(),, history.forward()และปุ่มย้อนกลับและไปข้างหน้าของเบราว์เซอร์ทำการจัดส่งpopstateกิจกรรม
• history.go()และhistory.go(0)ทำการโหลดหน้าเต็มและไม่ส่งpopstateเหตุการณ์
• history.go(-1)(ด้านหลัง 1 หน้า) และhistory.go(1)(ไปข้างหน้า 1 หน้า) ทำการส่งpopstateเหตุการณ์

คุณสามารถใช้ประวัติ API เช่นนี้เพื่อผลักดันสถานะใหม่และส่งเหตุการณ์ป๊อบสเตท

history.pushState({message:'New State!'}, 'New Title', '/link'); window.dispatchEvent(new PopStateEvent('popstate', { bubbles: false, cancelable: false, state: history.state }));

จากนั้นฟังpopstateกิจกรรมด้วยเราเตอร์

คุณสามารถลองใช้Davis.jsซึ่งจะช่วยให้คุณกำหนดเส้นทางใน JavaScript โดยใช้ pushState เมื่อมีให้บริการและหากไม่มี JavaScript จะทำให้รหัสฝั่งเซิร์ฟเวอร์ของคุณจัดการคำขอได้

นี่เป็นบทภาพยนตร์ยอดเยี่ยมจาก Ryan Bates จากภาพยนตร์ ในตอนท้ายเขาก็ปิดการใช้งานฟังก์ชัน ajax หากวิธี history.pushState ไม่สามารถใช้ได้:

http://railscasts.com/episodes/246-ajax-history-state

คุณอาจต้องการดูปลั๊กอิน jQuery นี้ พวกเขามีตัวอย่างมากมายในเว็บไซต์ของพวกเขา http://www.asual.com/jquery/address/

ฉันได้เขียนนามธรรมเราเตอร์ที่ง่ายมากที่ด้านบนของ History.js เรียกStateRouter.js มันอยู่ในช่วงเริ่มต้นของการพัฒนา แต่ฉันใช้มันเป็นโซลูชันการกำหนดเส้นทางในแอปพลิเคชันหน้าเดียวที่ฉันกำลังเขียน เช่นเดียวกับคุณฉันพบว่า History.js นั้นยากที่จะเข้าใจโดยเฉพาะอย่างยิ่งเมื่อฉันค่อนข้างใหม่กับ JavaScript จนกระทั่งฉันเข้าใจว่าคุณต้องการ (หรือควรมี) การกำหนดเส้นทางที่เป็นนามธรรมอยู่ด้านบนเนื่องจากมันแก้ไขระดับต่ำ ปัญหา.

ตัวอย่างรหัสง่ายๆนี้ควรแสดงให้เห็นถึงวิธีการใช้งาน:

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();

นี่คือซอเล็ก ๆ น้อย ๆ ที่ฉันได้ปรุงเพื่อแสดงให้เห็นถึงการใช้งาน

หากมี jQuery คุณสามารถใช้jQuery BBQ ได้