קורס Front End למתכנתים שיעור שיתוף פעולה בין קומפוננטות

[GilShaashua]

זה עובד, אבל ברגע שלוחצים על כל הכפורים ומעלים ל-1 נגיד, זה לא מעדכן שעכשיו המספר הכי נמוך הוא אחד.
אולי צריך שהפונקציה תחפש את כל הערכים של הכפתורים ואז תחזיר תשובה מה הערך הכי נמוך? (רק שאני לא יודע איך). בכל מקרה, לא הצלחתי עדיין להבין את הנושא של פונקציה subscribe.
אני שוקל להמשיך להתקדם בחומר, השאלה כמה זה קריטי שכרגע לא יושב לי טוב הנושא הזה.

[ynonp]

הדבר החשוב לשים לב בדוגמה הזאת הוא הפונקציה הזאת:

  emit(eventName, ...info) {
      /*const handlers = (this.handlers.eventName || []);
      for (let handler of handlers) {
          handler(...info);
      }*/
      panel.update(...info);
      lowValuePanel.updateLow(...info);
  }

שים לב איך בלי כל מנגנון ה subscribe, כשהוספת את lowValuePanel היית צריך להוסיף אותה גם בקוד של eventBus ופה לקרוא לפונקציה updateLow.

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

מנגנון ה Subscribe מאפשר להפוך את המשחק הזה - במקום שהקוד החדש ייכנס בקובץ של EventBus, הקוד החדש נכנס רק בקובץ של הקומפוננטה החדשה. לא צריך להוסיף את השורה:

lowValuePanel.updateLow(...info);

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

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

2. אם משנים את השם של המשתנה שמחזיק את הקומפוננטה (בדוגמה שלך זה השמות panel ו lowValuePanel), הקוד עם subscribe ממשיך לעבוד, לעומת הקוד בלי subscribe שדורש להיכנס לפונקציה emit ולשנות את הקוד לשמות החדשים.

3. לא דיברנו עדיין על מה יקרה כשתוסיף אירוע חדש. כרגע האירוע היחיד הוא שינוי ערך בכפתור. במערכת גדולה צפויים לנו עוד ״סוגים״ של אירועים (כאלה עם eventName שונה), שאולי לא רלוונטיים לחלק מהקומפוננטות.

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

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

[GilShaashua]

תודה על התשובה המפורטת ינון.
אני חושב שזה מתחיל להסתדר לי מבחינת ההבנה.

כל הפונקציות מתאחסנות ב-this.handlers.eventName בזכות פונקציית subscribe ואז פונקציית emit קוראת בלופ לכל הפונקציות וככה זה חוסך לי עריכות ושינויים בתוך הפונקציה emit, וכמובן כל היתרונות שכתבת בתגובתך האחרונה.

תודה רבה