הטמעת דפוס העיצוב של Observer ב-TypeScript

תבנית עיצוב היא תבנית שפותרת בעיה שחוזרת על עצמה בעיצוב תוכנה.

דפוס הצופה, המכונה גם דפוס פרסום-הירשם, הוא דפוס התנהגותי. זה מאפשר לך להודיע ​​למספר אובייקטים או מנויים על כל אירוע שמתפרסם באובייקט שהם צופים.

כאן תלמדו כיצד ליישם את תבנית העיצוב של הצופה ב-TypeScript.

תבנית הצופה

דפוס הצופה פועל על ידי הגדרת מערכת יחסים של אחד לרבים בין המוציא לאור למנויים שלו. כאשר אירוע מתרחש במוציא לאור, הוא יודיע לכל המנויים לאירוע זה. דוגמה רווחת אחת לדפוס זה היא מאזיני אירועי JavaScript.

לצורך ההקשר, נניח שאתה בונה מעקב אחר מלאי שעוקב אחר מספר המוצרים בחנות שלך. במקרה זה, החנות שלך היא הנושא/המפרסם, והמלאי שלך הוא הצופה/המנוי. שימוש בדפוס עיצוב הצופה יהיה אופטימלי במצב זה.

בדפוס עיצוב הצופה, כיתת הנושא שלך חייבת ליישם שלוש שיטות:

• א לְצַרֵף שיטה. שיטה זו מוסיפה צופה לנושא.
• א לנתק שיטה. שיטה זו מסירה צופה מנבדק.
• א להודיע/לעדכן שיטה. שיטה זו מודיעה לצופים של הנבדק כאשר המצב משתנה בנושא.

כיתת הצופה שלך חייבת ליישם שיטה אחת, ה עדכון שיטה. שיטה זו מגיבה כאשר יש שינוי במצב הנושא שלה.

יישום שיעורי הנושא והמשקיף

הצעד הראשון להטמעת דפוס זה הוא יצירת ממשקים עבור מעמד הנושא והצופה, כדי להבטיח שהם מיישמים את השיטות הנכונות:

// נושא/ממשק מפרסם
מִמְשָׁקנושא{
 attachObserver (צופה: Observer): בָּטֵל;
 detachObserver (צופה: Observer): בָּטֵל;
 notifyObserver(): בָּטֵל;
}
// Observer/Subscriber ממשק
מִמְשָׁקמַשׁקִיף{
עדכון(נושא: נושא): בָּטֵל;
}

הממשקים בבלוק הקוד שלמעלה מגדירים את השיטות שעל מחלקות הבטון שלך ליישם.

כיתת נושאי בטון

השלב הבא הוא ליישם כיתת נושא קונקרטית המיישמת את נושא מִמְשָׁק:

// נושא
מעמדחנותמיישםנושא{}

לאחר מכן, אתחול את ה נושאהמדינה של חנות מעמד. המשקיפים של הנבדק יגיבו לשינויים במצב זה.

במקרה זה, המדינה היא מספר, והמשקיפים יגיבו לעלייה במספר:

// מצב הנושא
פְּרָטִי numberOfProducts: מספר;

לאחר מכן, אתחול מערך צופים. מערך זה הוא האופן שבו תוכל לעקוב אחר הצופים:

// אתחול צופים
פְּרָטִי משקיפים: Observer[] = [];

ייתכן שתמצא כמה יישומים של דפוס הצופה באמצעות a הגדר מבנה נתונים במקום מערך כדי לעקוב אחר הצופה. שימוש בסט יבטיח שאותו צופה לא יופיע פעמיים. אם אתה רוצה להשתמש במערך במקום זאת, עליך לבדוק אם יש צופים כפולים במכשיר שלך לְצַרֵף שיטה.

לאחר מכן, עליך ליישם את נושאהשיטות של-לְצַרֵף, לנתק, ו להודיע/לעדכן-בשיעור הבטון שלך.

כדי ליישם את לְצַרֵף שיטה, בדוק תחילה אם הצופה כבר מחובר וזרוק שגיאה אם ​​כן. אחרת, הוסף את הצופה למערך באמצעות ה- שיטת מערך JavaScript, לִדחוֹף:

// צירוף משקיף (ים)
attachObserver (צופה: Observer): בָּטֵל {
// בדוק אם הצופה כבר צורף
const observerExists = זֶה.observers.includes (צופה);
if (observerExists) {
לזרוקחָדָשׁשְׁגִיאָה('מתבונן כבר נרשם ');
 }
// הוסף צופה חדש
זֶהמשקיפים.לִדחוֹף(מַשׁקִיף);
}

לאחר מכן, יישם את שלך לנתק שיטה על ידי מציאת האינדקס והסרתו מהמערך באמצעות JavaScript אִחוּי שיטה.

יכולים להיות תרחישים שבהם הצופה שאתה מנסה לנתק כבר נותק או לא היה מנוי מלכתחילה. עליך לטפל בתרחישים אלה על ידי הוספת הצהרה מותנית כדי לבדוק אם הצופה נמצא במערך או בסט, לפי המקרה.

// ניתוק משקיף (ים)
detachObserver (צופה: Observer): בָּטֵל {
לְנַחֵם.עֵץ(`מתבונן מתנתק ${JSON.stringify (צופה)}`);
const observerIndex = זֶה.observers.indexOf (צופה);
if (observerIndex -1) {
לזרוקחָדָשׁשְׁגִיאָה('מתבונן לא קיים');
 }
זֶהמשקיפים.אִחוּי(observerIndex, 1);
 console.log('משקיף מנותק...');
}

לאחר מכן, יישם את שלך להודיע/לעדכן שיטה על ידי לולאה על רשימת הצופים שלך וקריאה ל- עדכון השיטה של ​​כל אחד:

// מודיע למשקיפים
notifyObserver(): בָּטֵל {
 console.log('מודיע למשקיפים...');
ל (const מַשׁקִיף שֶׁלזֶה.observers) {
 observer.update(זֶה);
 }
}

לבסוף, עבור נושא מחלקה, ליישם שיטה שמבצעת מניפולציות על המצב ולאחר מכן מודיע לצופים על השינוי על ידי קריאה שלהם להודיע/לעדכן שיטה. דוגמה זו היא פישוט של האופן שבו נושא עשוי לבצע פעולה ולאחר מכן ליידע את הצופים:

// שינוי מצב והודעה לצופים
מוצר חדש (מוצרים: מספר): בָּטֵל {
זֶה.numberOfProducts += מוצרים;
 console.log('מוצר חדש נוסף לחנות');
זֶה.notifyObserver();
}

שיעורי צופה בטון

צור כיתת צופה או כיתות, כדי להירשם למוציא לאור. כל כיתת צופה חייבת ליישם את מַשׁקִיף מִמְשָׁק.

כיתות המשקיפים יישמו א להודיע/לעדכן שיטה שרק הנושא שבו הם צופים צריך לקרוא. שיטה זו צריכה להכיל את כל ההיגיון העסקי שאתה צריך להפעיל בתגובה לשינוי במצב של הנושא:

// צופה בטון 1
מעמדמְלַאימיישםמַשׁקִיף{
עדכון(): בָּטֵל {
 console.log('מוצר חדש נוסף לחנות, עדכון המלאי...');
// ההיגיון העסקי האמיתי הולך לכאן...
	}
}
// צופה בטון 2
מעמדצרכןמיישםמַשׁקִיף{
עדכון(): בָּטֵל {
 console.log('מוצר חדש נוסף לחנות, אני חייב ללכת לבדוק אותו...');
// ההיגיון העסקי האמיתי הולך לכאן...
 }
}

שימוש בתבנית הצופה

כדי להשתמש בדפוס זה, הצג את השיעורים הקונקרטיים של הנושא והצופה. לאחר שעשית זאת, התקשר לנבדק לְצַרֵף שיטה ולהעביר את מופע Observer כארגומנט. בתגובה, הנבדק יוסיף את המקרה הזה לרשימת המשקיפים שלו:

// מופע של נושא ומתבונן
const חנות = חָדָשׁ חנות();
const מלאי = חָדָשׁ מְלַאי();
const לקוח = חָדָשׁ צרכן()
// הרשמה לאובייקטים למוציא לאור
חנות.attachObserver(מְלַאי);
חנות.attachObserver(צרכן);
// שינוי מצב נושא
חנות.מוצר חדש(30);

קוד זה מדמה שינוי מצב. השינוי יפעיל את שיטת ההודעה ב- נושא מעמד. שיטה זו, בתורה, קוראת ל- לְהוֹדִיעַ שיטה על כל אחד מהצופים בה. כל צופה ינהל את ההיגיון העסקי שלו.

עליך להשתמש בדפוס זה רק כאשר השינויים במצב של אובייקט אחד משפיעים על אובייקטים אחרים, וקבוצת האובייקטים המעורבים אינה ידועה או דינמית.

יתרונות השימוש בתבנית הצופה

שימוש בדפוס זה בקוד שלך מאפשר לך לשמור על עקרון הפתיחה/סגור. אתה יכול להוסיף כמה מנויים שתרצה, וליצור קשרים בין אובייקטים בזמן ריצה, מבלי לשנות את הקוד של הנושא.