บทความชุดนี้ส่วนใหญ่เรียนรู้จุดความรู้ที่เกี่ยวข้องกับ HTML5 ใช้คะแนนความรู้ API การเรียนรู้เป็นจุดเริ่มต้นและแนะนำตัวอย่างจากตื้นจนถึงลึกเพื่อให้ทุกคนสามารถเข้าใจได้ว่า H5 สามารถทำอะไรทีละขั้นตอนและวิธีการใช้มันอย่างมีเหตุผลในโครงการจริง
1. การวิเคราะห์เปิด
โอเคโดยไม่พูดเรื่องไร้สาระมากไปที่หัวข้อของวันนี้ตรงไปตรงมา วันนี้เราส่วนใหญ่พูดคุยเกี่ยวกับประวัติศาสตร์ API และบทบาทของมันในแอปพลิเคชันหน้าเดียวและจะแนะนำตัวอย่างที่ใช้งานได้จริงเป็นตัวอย่างต้นแบบสำหรับคำอธิบาย มาดูประวัติ API ก่อน:
เพื่อปรับปรุงความเร็วในการตอบสนองของหน้าเว็บผู้พัฒนาจำนวนมากขึ้นเรื่อย ๆ ได้เริ่มใช้โซลูชันแอปพลิเคชันหน้าเดียว โครงสร้างหน้าเดียวที่เรียกว่าหมายถึงความจริงที่ว่าเมื่อสลับระหว่างหลายหน้าหน้าทั้งหมดจะไม่รีเฟรชข้อมูลการแสดงหน้าจะได้รับการอัปเดตและ URL ในแถบที่อยู่จะเปลี่ยนไปตามลำดับเพื่อให้ผู้ใช้สามารถแชร์ URL นี้ได้
หากคุณใช้เบราว์เซอร์เช่น Chrome หรือ Firefox เพื่อเยี่ยมชม github.com, plus.google.com และอย่างระมัดระวังคุณจะพบว่าการคลิกระหว่างหน้านั้นขอให้เกิดแบบอะซิงโครนัสผ่าน Ajax
ในเวลาเดียวกัน URL ของหน้ามีการเปลี่ยนแปลง และสามารถรองรับเบราว์เซอร์ไปข้างหน้าและถอยหลังได้เป็นอย่างดี ฟังก์ชั่นที่ทรงพลังเช่นนี้คืออะไร? นี่จะพูดถึงตัวเอกของวันนี้ HTML5 เสนอราคา API ใหม่:
History.PushState และ History.replacestate ใช้เพื่อเปลี่ยน URL หน้าโดยไม่ต้องรีเฟรชผ่านอินเทอร์เฟซนี้ มาดูวิธีการโดยละเอียดของอินเทอร์เฟซประวัติ:
คัดลอกรหัส