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

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

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

نمط المراقب

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

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

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

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

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

instagram viewer

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

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

// الموضوع / واجهة الناشر
واجهه المستخدمموضوع{
 attachObserver (مراقب: مراقب): فارغ;
 detachObserver (مراقب: مراقب): فارغ;
 notifyObserver (): فارغ;
}
// واجهة المراقب / المشترك
واجهه المستخدممراقب{
تحديث(الموضوع الموضوع): فارغ;
}

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

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

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

// موضوع
فصلمحلالأدواتموضوع{}

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

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

// حالة الموضوع
خاص numberOfProducts: رقم ؛

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

// تهيئة المراقبين
خاص المراقبون: مراقب [] = [] ؛

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

بعد ذلك ، يجب عليك تنفيذ موضوعطرق -يربط, فصل، و يخطر / التحديث- في صفك الملموس.

لتنفيذ يربط الطريقة ، تحقق أولاً مما إذا كان المراقب قد تم إرفاقه بالفعل وأرسل خطأ إذا كان كذلك. خلاف ذلك ، أضف المراقب إلى المصفوفة باستخدام طريقة مصفوفة جافا سكريبت, يدفع:

// إرفاق مراقب (مراقبين)
attachObserver (مراقب: مراقب): فارغ {
// تحقق مما إذا كان المراقب قد تم إرفاقه بالفعل
مقدار ثابت المراقب موجود = هذا.observers.includes (مراقب) ؛
إذا (المراقب موجود) {
يرميجديدخطأ(تم اشتراك المراقب بالفعل) ؛
 }
// أضف مراقب جديد
هذا.observers.يدفع(مراقب);
}

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

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

// فصل المراقب (المراقبين)
detachObserver (مراقب: مراقب): فارغ {
وحدة التحكم.سجل("فصل المراقب ${جسون.stringify (مراقب)}`);
مقدار ثابت المراقب = هذا.observers.indexOf (مراقب) ؛
إذا (ObserverIndex -1) {
يرميجديدخطأ("المراقب غير موجود") ؛
 }
هذا.observers.لصق او جمع(المراقب, 1);
 console.log ('انفصال المراقب ...');
}

بعد ذلك ، قم بتنفيذ ملف يخطر / التحديث عن طريق تكرار قائمة المراقبين واستدعاء تحديث طريقة كل منها:

// إخطار المراقبين
notifyObserver (): فارغ {
 console.log ('إخطار المراقبين ...');
ل (مقدار ثابت مراقب لهذا.observers) {
 Observer.update (هذا);
 }
}

أخيرًا ، بالنسبة لـ موضوع class ، قم بتنفيذ طريقة تتلاعب بالدولة ثم تُخطر المراقبين بالتغيير عن طريق الاتصال بهم يخطر / التحديث طريقة. هذا المثال هو تبسيط لكيفية قيام شخص ما بعمل ما ثم إبلاغ المراقبين:

// تغيير الحالة وإخطار المراقبين
منتج جديد (عدد المنتجات): فارغ {
هذا.numberOfProducts + = المنتجات ؛
 console.log ('تم إضافة منتج جديد إلى المتجر');
هذا.notifyObserver () ؛
}

فئات مراقب الخرسانة

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

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

// مراقب الخرسانة 1
فصلجردالأدواتمراقب{
تحديث(): فارغ {
 console.log ('منتج جديد يضاف الى المخزن تحديث المخزون ...');
// منطق العمل الفعلي هنا ...
	}
}
// مراقب الخرسانة 2
فصلعميلالأدواتمراقب{
تحديث(): فارغ {
 console.log ('تمت إضافة منتج جديد إلى المتجر ، ولا بد لي من الذهاب للتحقق من ذلك ...');
// منطق العمل الفعلي هنا ...
 }
}

استخدام نمط المراقب

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

// تجسيد الموضوع والمراقب
مقدار ثابت مخزن = جديد محل()؛
مقدار ثابت جرد = جديد جرد()؛
مقدار ثابت الزبون = جديد عميل()
// اشتراك الكائنات في الناشر
محل.attachObserver(جرد);
محل.attachObserver(عميل);
// تغيير حالة الموضوع
محل.منتج جديد(30);

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

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

مزايا استخدام نمط المراقب

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