BackboneJS - แอปพลิเคชัน

BackboneJS ให้โครงสร้างของเว็บแอปพลิเคชันที่อนุญาตให้แยกตรรกะทางธุรกิจและตรรกะส่วนต่อประสานกับผู้ใช้ ในบทนี้เราจะพูดถึงรูปแบบสถาปัตยกรรมของแอปพลิเคชัน BackboneJS สำหรับการใช้งานอินเทอร์เฟซผู้ใช้ แผนภาพต่อไปนี้แสดงสถาปัตยกรรมของ BackboneJS -

สถาปัตยกรรมของ BackboneJS ประกอบด้วยโมดูลต่อไปนี้ -

• คำขอ HTTP
• Router
• View
• Events
• Model
• Collection
• แหล่งข้อมูล

ตอนนี้ให้เราพูดคุยเกี่ยวกับโมดูลทั้งหมดโดยละเอียด

คำขอ HTTP

ไคลเอ็นต์ HTTP ส่งคำขอ HTTP ไปยังเซิร์ฟเวอร์ในรูปแบบของข้อความร้องขอที่เว็บเบราว์เซอร์เครื่องมือค้นหา ฯลฯ ทำหน้าที่เหมือนไคลเอ็นต์ HTTP ผู้ใช้ร้องขอไฟล์เช่นเอกสารรูปภาพ ฯลฯ โดยใช้โปรโตคอลการร้องขอ HTTP ในแผนภาพด้านบนคุณจะเห็นว่าไคลเอนต์ HTTP ใช้เราเตอร์เพื่อส่งคำขอไคลเอ็นต์

เราเตอร์

ใช้สำหรับกำหนดเส้นทางแอปพลิเคชันฝั่งไคลเอ็นต์และเชื่อมต่อกับแอ็คชันและเหตุการณ์โดยใช้ URL เป็นการแสดง URL ของวัตถุของแอปพลิเคชัน URL นี้ถูกเปลี่ยนด้วยตนเองโดยผู้ใช้ กระดูกสันหลังจะใช้ URL เพื่อให้เข้าใจสถานะของแอปพลิเคชันที่จะส่งหรือนำเสนอให้กับผู้ใช้

เราเตอร์เป็นกลไกที่สามารถคัดลอก URL เพื่อเข้าถึงมุมมอง จำเป็นต้องใช้เราเตอร์เมื่อเว็บแอปพลิเคชันให้ URL ที่เชื่อมโยงได้บุ๊กมาร์กและแชร์ได้สำหรับตำแหน่งสำคัญในแอป

ในสถาปัตยกรรมข้างต้นเราเตอร์จะส่งคำขอ HTTP ไปยัง View เป็นคุณสมบัติที่มีประโยชน์เมื่อแอปพลิเคชันต้องการความสามารถในการกำหนดเส้นทาง

ดู

มุมมอง BackboneJS รับผิดชอบวิธีการและสิ่งที่จะแสดงจากแอปพลิเคชันของเราและไม่มีมาร์กอัป HTML สำหรับแอปพลิเคชัน ระบุแนวคิดเบื้องหลังการนำเสนอข้อมูลของโมเดลให้กับผู้ใช้ มุมมองใช้เพื่อแสดง "รูปแบบข้อมูลของคุณมีลักษณะอย่างไร"

คลาสมุมมองไม่ทราบอะไรเกี่ยวกับ HTML และ CSS และแต่ละมุมมองสามารถอัปเดตได้อย่างอิสระเมื่อโมเดลเปลี่ยนไปโดยไม่ต้องโหลดซ้ำทั้งหน้า ซึ่งแสดงถึงส่วนลอจิคัลของ UI ใน DOM

ดังที่แสดงในสถาปัตยกรรมข้างต้น View แสดงถึงส่วนติดต่อผู้ใช้ซึ่งมีหน้าที่ในการแสดงการตอบสนองสำหรับคำขอของผู้ใช้ที่ทำโดยใช้เราเตอร์

เหตุการณ์

กิจกรรมเป็นส่วนหลักของแอปพลิเคชันใด ๆ จะผูกเหตุการณ์ที่กำหนดเองของผู้ใช้กับแอปพลิเคชัน สามารถผสมลงในออบเจ็กต์ใด ๆ และสามารถเชื่อมโยงและเรียกเหตุการณ์ที่กำหนดเองได้ คุณสามารถผูกเหตุการณ์ที่กำหนดเองได้โดยใช้ชื่อที่คุณต้องการ

โดยปกติเหตุการณ์จะถูกจัดการพร้อมกันกับโฟลว์โปรแกรม ในสถาปัตยกรรมข้างต้นคุณสามารถดูได้ว่าเหตุการณ์เกิดขึ้นเมื่อใดซึ่งจะแสดงข้อมูลของโมเดลโดยใช้มุมมอง

รุ่น

ถือเป็นหัวใจสำคัญของแอปพลิเคชัน JavaScript ที่ดึงข้อมูลและเติมข้อมูล โมเดลประกอบด้วยข้อมูลของแอปพลิเคชันตรรกะของข้อมูลและแสดงถึงออบเจ็กต์ข้อมูลพื้นฐานในกรอบงาน

โมเดลแสดงถึงหน่วยงานทางธุรกิจด้วยตรรกะทางธุรกิจและการตรวจสอบความถูกต้องทางธุรกิจ ส่วนใหญ่จะใช้สำหรับการจัดเก็บข้อมูลและตรรกะทางธุรกิจ แบบจำลองสามารถเรียกดูและบันทึกลงในที่จัดเก็บข้อมูลได้ โมเดลรับคำขอ HTTP จากเหตุการณ์ที่ส่งผ่านมุมมองโดยใช้เราเตอร์และซิงโครไนซ์ข้อมูลจากฐานข้อมูลและส่งการตอบกลับกลับไปยังไคลเอนต์

คอลเลกชัน

คอลเลกชันคือชุดของโมเดลที่เชื่อมโยงเหตุการณ์เมื่อโมเดลถูกแก้ไขในคอลเลกชัน คอลเลกชันประกอบด้วยรายการโมเดลที่สามารถประมวลผลในลูปและสนับสนุนการเรียงลำดับและการกรอง เมื่อสร้างคอลเลกชันเราสามารถกำหนดประเภทของโมเดลที่คอลเลกชันจะมีพร้อมกับอินสแตนซ์ของคุณสมบัติ เหตุการณ์ใด ๆ ที่ทริกเกอร์ในโมเดลจะทริกเกอร์บนคอลเล็กชันในโมเดลด้วย

นอกจากนี้ยังรับคำขอจากมุมมองผูกเหตุการณ์และซิงโครไนซ์ข้อมูลกับข้อมูลที่ร้องขอและส่งการตอบกลับกลับไปยังไคลเอ็นต์ HTTP

แหล่งข้อมูล

เป็นการเชื่อมต่อที่ตั้งค่ากับฐานข้อมูลจากเซิร์ฟเวอร์และมีข้อมูลที่ร้องขอจากไคลเอนต์ ขั้นตอนของสถาปัตยกรรม BackboneJS สามารถอธิบายได้ดังแสดงในขั้นตอนต่อไปนี้ -

• ผู้ใช้ร้องขอข้อมูลโดยใช้เราเตอร์ซึ่งกำหนดเส้นทางแอปพลิเคชันไปยังเหตุการณ์โดยใช้ URL

• มุมมองแสดงข้อมูลของโมเดลให้กับผู้ใช้

• โมเดลและคอลเลกชันดึงและเติมข้อมูลจากฐานข้อมูลโดยการผูกเหตุการณ์ที่กำหนดเอง

ในบทต่อไปเราจะเข้าใจความสำคัญของเหตุการณ์ใน BackboneJS