สามวิธีในการสื่อสารระหว่างมุมมองกระดูกสันหลัง

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

ส่วนที่สำคัญที่สุดในการควบคุมกรอบ MVC คือการควบคุมวิธีการสื่อสารระหว่างมุมมองที่หลากหลาย เมื่อฉันใช้ Angular มาก่อนฉันคิดว่าวิธีการสื่อสารตามเหตุการณ์ ($ on, $ emit, $ boardcast) หรือวิธีการตามบริการมีประโยชน์มาก หลังจากย้ายไปที่กระดูกสันหลังเนื่องจากความเข้าใจที่ไม่เพียงพอของกลไกเหตุการณ์ของ Backbone และการใช้งานที่ยืดหยุ่นมากจึงไม่พบวิธีการสื่อสารที่ดี จนกว่าฉันจะเห็นบทความนี้ผู้เขียนใช้ตัวอย่างง่ายๆเพื่ออธิบายการสื่อสารสามวิธีระหว่างมุมมองกระดูกสันหลังอย่างชัดเจน การแปลมีดังนี้:

หน้าเว็บที่ฉันกำลังพัฒนามีสองส่วนหลักคือเอกสารและแถบด้านข้าง

ดังที่แสดงในภาพด้านบนฉันตั้งค่าสามมุมมอง:

ApplicationView - มีมุมมองด้านล่างเป็นมุมมองด้านนอกสุด

DocumentView - แสดงเนื้อหาที่ถูกแก้ไขหรือเรียกดู

SidebarView - แสดงข้อมูลที่เกี่ยวข้องกับเอกสาร

DocumentView และ SidebarView เป็นมุมมองย่อยของ ApplicationView ดังนั้นโครงสร้างมุมมองโดยรวมจะแสดงในรูปด้านล่าง:

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

หลังจากที่ฉัน Googled และอ้างถึงวิธีการของคนอื่นฉันสรุปวิธีการสื่อสารที่แตกต่างกันสามวิธีต่อไปนี้

1. ผ่านเหตุการณ์ผ่านมุมมองหลัก

ฉันผ่านกิจกรรมสำหรับมุมมองเด็กสองคนผ่านมุมมองหลัก (ApplicationView) เนื่องจากมุมมองหลักมีขอบเขตของมุมมองเด็กทั้งหมดจึงเป็นการดีที่สุดที่จะใช้เป็นสื่อกลางสำหรับการจัดส่งเหตุการณ์

รหัส JavaScript มีดังนี้:

 var applicationView = backbone.view.extend ({เริ่มต้น: function () {this.documentView = ใหม่ DocumentView ({parent: this}); this.side.barview = new SidebarView ({parent: this}); this.documentView.on ('edit' Stutthis.sidebarview.trigger ('documentedit');}}); var documentView = backbone.view.extend ({onedit: function () {this.trigger ('edit');}}); var sidebarview = backbone.view.extend ( สิ่งนี้);}, onDocumentedIt: function () {// ตอบสนองต่อเอกสารแก้ไข}});

อย่างไรก็ตามวิธีนี้ไม่มีประสิทธิภาพ เพราะฉันต้องเพิ่มตัวจัดการเหตุการณ์พิเศษลงใน ApplicationView Documentedited () หากมีการส่งเหตุการณ์พวงในมุมมองเด็กฟังก์ชั่นตัวจัดการเหตุการณ์จะถูกกระตุ้นอย่างต่อเนื่องในมุมมองหลักทำให้มันถูกครอบงำ

จากนั้นมาดูวิธีที่สอง

2. การสื่อสารระหว่างมุมมองผ่าน EventBus

ฉันสร้าง Object Eventbus ทั่วโลกโดยสืบทอด Backbone.Events ฉีดเข้าไปในแต่ละมุมมองเพื่อออกอากาศ

รหัส JavaScript มีดังนี้:

 var applicationView = backbone.view.extend ({เริ่มต้น: function () {this.eventbus = _.extend ({}, backbone.events); this.documentView = new DocumentView ({EventBus: this.eventBus}); this.eventbus});},}); var documentView = backbone.view.extend ({เริ่มต้น: ฟังก์ชั่น (ตัวเลือก) {this.eventbus = opotions.eventbus;}, onedit: function () {this.eventbus.trigger ฟังก์ชั่น (ตัวเลือก) {this.eventbus = opotions.eventbus; this.eventbus.on ('documentedit', this.ondocumentedit, this);}, ondocumentedit: function () {// react เพื่อแก้ไขเอกสาร}});

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

หมายเหตุ: หากคุณไม่ต้องการสร้างวัตถุทั่วโลกคุณยังสามารถสร้าง EventBus ได้ที่ระดับโมดูลหรือระดับมุมมองสำหรับการสื่อสาร

วิธีนี้ดีกว่าวิธีแรกแล้ว อย่างไรก็ตามเราจำเป็นต้องแนะนำ EventBus ด้วยตนเองในมุมมองย่อยซึ่งแสดงให้เห็นว่ายังมีที่ว่างสำหรับการปรับปรุง ลองมาดูวิธีที่สาม

3. ใช้ backbone โดยตรงเป็นเครื่องลงทะเบียนเหตุการณ์

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

และวัตถุแบ็คโบนสามารถเรียกได้โดยตรงดังนั้นฉันไม่ต้องฉีดด้วยตนเองในแต่ละดู

รหัส JavaScript มีดังนี้:

 var applicationView = backbone.view.extend ({เริ่มต้น: function () {this.documentView = new DocumentView (); this.side.sidebarView = ใหม่ sidebarView ();},}); var documentView = backbone.view.extend = backbone.view.extend ({เริ่มต้น: ฟังก์ชั่น (ตัวเลือก) {backbone.on ('documentedit', this.ondocumentedit, this);}, ondocumentedit: function () {// react เพื่อแก้ไขเอกสาร}});

สรุป

ฉันลงเอยด้วยวิธีที่สามในโครงการของฉัน และในความคิดของฉันแม้ว่ามันจะขึ้นอยู่กับวัตถุแบ็คโบนทั่วโลกโดยตรง แต่ก็มีความรัดกุมอย่างมากที่จะใช้