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

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

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

איפור של סרטון היום

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

תבנית הצופה

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

כיצד להכין אנטנת טלוויזיה תוצרת בית

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

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

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

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

איך למצוא כתובת IP באייפון

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

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

// 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 {}

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

קודי שגיאה במסך כחול של Windows 10

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

// Subject state 
private numberOfProducts: number;

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

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