تنفيذ نمط تصميم المراقب في TypeScript

نمط التصميم هو قالب يحل مشكلة شائعة في تصميم البرامج.

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

كيفية مسح محرك الأقراص ذو الحالة الصلبة

اجعل فيديو اليوم

هنا سوف تتعلم كيفية تنفيذ نمط تصميم المراقب في TypeScript.

نمط المراقب

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

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

في نمط تصميم المراقب ، يجب أن تنفذ فئة الموضوع ثلاث طرق:

ان يربط طريقة. تضيف هذه الطريقة مراقبًا للموضوع.
أ فصل طريقة. هذه الطريقة تزيل المراقب من الموضوع.
أ يخطر / التحديث طريقة. تقوم هذه الطريقة بإخطار مراقبي الموضوع عندما تتغير الحالة في الموضوع.

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

تنفيذ فصول الموضوع والمراقب

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

// Subject/Publisher Interface 
interface Subject { 
    attachObserver(observer: Observer): void; 
    detachObserver(observer: Observer): void; 
    notifyObserver(): void; 
} 
  
// Observer/Subscriber Interface 
interface Observer { 
    update(subject: Subject): void; 
}

تحدد الواجهات الموجودة في كتلة التعليمات البرمجية أعلاه الطرق التي يجب أن تنفذها فئاتك الملموسة.

فئة موضوع محددة

تتمثل الخطوة التالية في تنفيذ فئة موضوع محددة تقوم بتنفيذ موضوعات واجهه المستخدم:

// Subject 
class Store implements Subject {}

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

xbox series x vs xbox one x

في هذه الحالة ، تكون الحالة رقمًا ، وسيتفاعل المراقبون مع زيادة العدد:

// Subject state 
private numberOfProducts: number;

بعد ذلك ، قم بتهيئة مجموعة من المراقبين. هذه المصفوفة هي الطريقة التي ستتبع بها المراقبين:

// initializing observers 
private observers: Observer[] = [];