ثلاث طرق للتواصل بين وجهات نظر العمود الفقري

في المقالة السابقة ، قدمت لك تجربة التعلم الخاصة بك لتمرير القيم بين المشاهدات في العمود الفقري. تركز هذه المقالة على إدخال ثلاث طرق للتواصل بين وجهات نظر العمود الفقري.

القسم الأكثر أهمية لإتقان إطار عمل MVC هو إتقان كيفية التواصل بين وجهات النظر المختلفة. عندما استخدمت Angular من قبل ، اعتقدت أن أساليب الاتصال القائمة على الأحداث ($ ON ، $ EMIT ، $ boardcast) أو الأساليب القائمة على الخدمة كانت مفيدة للغاية. بعد الانتقال إلى العمود الفقري ، بسبب عدم كفاية الفهم لآلية حدث العمود الفقري والاستخدام المرن للغاية ، لم يتم العثور على طريقة اتصال جيدة. إلى أن رأيت هذا المقال ، استخدم المؤلف مثالًا بسيطًا لشرح الطرق الثلاث للاتصال بين طرق عرض العمود الفقري بوضوح. الترجمة كما يلي:

تحتوي صفحة الويب التي أقوم بتطويرها على جزأين رئيسيين ، وهما الوثيقة والشريط الجانبي.

كما هو موضح في الصورة أعلاه ، قمت بإعداد ثلاث طرق عرض:

ApplicationView - يحتوي على العرض السفلي باعتباره العرض الخارجي

DocumentView - يعرض المحتوى الذي يتم تحريره أو تصفحه

Sidebarview - عرض بعض المعلومات المتعلقة بالوثيقة

DocumentView و Sidebarview هما من وجهات نظر من ApplicationView ، لذلك يظهر هيكل العرض العام في الشكل أدناه:

يعمل المستخدم في أي عرض فرعي ، ويجب تغيير الرؤية الفرعية الأخرى وفقًا لذلك. ولكن نظرًا لأن وجهات نظر الطفل لا يمكنها إخطار الطرف الآخر بشكل مباشر (أي ، فإن نطاقاتهما ليست مرتبطة بشكل مباشر ، على عكس عرض الوالدين ، والتي يمكن أن تحتوي على نطاقات جميع وجهات نظر طفلها) ، أحتاج إلى آلية حدث.

بعد أن غوغل وأشير إلى أساليب الآخرين ، قمت بتلخيص الطرق الثلاث التالية للاتصال التالية.

1. تمرير الأحداث من خلال عرض الوالدين

أقوم بتمرير أحداث لآرائها من خلال عرض الوالدين (ApplicationView). نظرًا لأن عرض الوالدين يحتوي على نطاق كل وجهات نظر أطفاله ، فمن الأفضل استخدامه كوسيلة لتسليم الأحداث.

رمز JavaScript كما يلي:

 var applicationView = backbone.view.extend ({initialize: function () {this.documentView = new documentView ({parent: this}) ؛ this.sidebarview = new sidebarview choursthis.sidebarview.trigger ('documentedit') ؛}}) ؛ var documentView = backbone.view.extend ({onEdit: function () {this.trigger ('edit') ؛}}) ؛ var sideBarview = backbone.view.extend ( هذا) ؛} ، onDocumentEdit: function () {// React to Document Edit.}}) ؛

ومع ذلك ، هذه الطريقة ليست فعالة. لأنني بحاجة إلى إضافة معالج حدث إضافي إلى ApplicationView Documented (). إذا تم تمرير مجموعة من الأحداث في عرض الطفل ، فسيتم تشغيل وظيفة معالج الأحداث بشكل مستمر في عرض الوالدين ، مما يتسبب في غمرها.

ثم دعونا نلقي نظرة على الطريقة الثانية.

2. التواصل بين وجهات النظر من خلال EventBus

أقوم بإنشاء eventbus كائن عالمي عن طريق ورث العمود الفقري. حقنها في كل عرض فرعي للبث.

رمز JavaScript كما يلي:

 var applicationView = backbone.view.extend ({initialize: function () {this.eventBus = _.Extend ({} ، backbone.events) ؛ this.documentView = new documentView ({eventBus: this.eventbus}) ؛ this.sidebarview = new sidebarview this.eventbus}) ؛} ،}) ؛ var documentView = backbone.view.extend ({تهيئة: الوظيفة (خيارات) {this.eventBus = Options.eventBus ؛} ، OneDit: function () {this.eventbus.trigger ('documentiDit') ؛}}) ؛ وظيفة (خيارات) {this.eventBus = Options.eventBus ؛ this.eventbus.on ('documentedit' ، this.ondocumentedit ، this) ؛} ، onDocumentEdit: function () {// react to document edit.}}) ؛

في هذه الطريقة ، أستخدم EventBus ككائن عالمي لتسجيل الأحداث. إذا كنت أرغب في التواصل بين المشاهدات ، فأنا فقط بحاجة إلى ضخ EventBus في العرض ويمكنني بسهولة تشغيل أو الاستماع إلى الأحداث من خلالها.

ملاحظة: إذا كنت لا ترغب في إنشاء كائنات عالمية ، فلا يزال بإمكانك إنشاء EventBus في الوحدة النمطية أو مستوى العرض للاتصال.

هذه الطريقة أفضل بكثير من الطريقة الأولى. ومع ذلك ، نحتاج إلى تقديم EventBus يدويًا في The Subview ، مما يدل على أنه لا يزال هناك مجال للتحسين. لذلك دعونا نلقي نظرة على الطريقة الثالثة.

3. استخدم العمود الفقري مباشرة كآلة تسجيل الحدث

في الطريقة الثانية ، أقوم بإنشاء eventbus منفصل من العمود الفقري. لكنني أدركت مؤخرًا أن كائن العمود الفقري نفسه هو كائن يمزج الأحداث ، لذلك أستخدم مباشرة العمود الفقري لبث الأحداث ، لذلك لست بحاجة إلى إنشاء حدث آخر.

ويمكن استدعاء كائن العمود الفقري مباشرة حتى لا أضطر إلى حقنه يدويًا في كل عرض فرعي.

رمز JavaScript كما يلي:

 var applicationView = backbone.view.extend ({initialize: function () {this.documentView = new documentView () ؛ this.sideBarView = new sidebarview () ؛ backbone.view.extend ({initialize: function (Options) {backbone.on ('documentedit' ، this.ondocumentedit ، this) ؛} ، onDocumentEdit: function () {// react to document reled.}}) ؛

لخص

انتهى بي الأمر باستخدام الطريقة الثالثة في مشروعي. وفي رأيي ، على الرغم من أنه يعتمد بشكل مباشر على كائن العمود الفقري العالمي ، إلا أنه موجز للغاية للاستخدام.