PracticU

אירועים EVENTS ב-NodeJS

בלי כתוביותעם כתוביות
PracticU › קורס NodeJS › אירועים EVENTS ב-NodeJS
מילון מושגים:
אירוע - התרחשות שהמערכת מזהה ויכולה להגיב לה, כמו לחיצת עכבר, הקשה או סיום פעולה.
Node.js - סביבת ריצה שמאפשרת להריץ קוד JavaScript מחוץ לדפדפן, בעיקר בצד השרת.
מחלקה - תבנית בתכנות מונחה עצמים שמגדירה אילו נתונים ופעולות יהיו לאובייקטים שנוצרים ממנה.
ירושה - מנגנון בתכנות מונחה עצמים שבו מחלקה יורשת תכונות ופעולות ממחלקת אב, ויכולה להרחיב אותן.
בנאי - מתודה מיוחדת שמופעלת אוטומטית בעת יצירת אובייקט ממחלקה, ומאתחלת את ערכיו ההתחלתיים.
לולאה - מבנה בקרה שחוזר על קטע קוד שוב ושוב כל עוד תנאי מתקיים או עבור כל פריט באוסף.
אובייקט - יחידה בתכנות מונחה עצמים שמאגדת נתונים (תכונות) ופעולות (מתודות). נוצר בדרך כלל ממחלקה המשמשת כתבנית.

אירועים EVENTS ב-NodeJS
הסרטון מראה איך מחלקה מדווחת על אירוע, ואיך מחלקה אחרת מאזינה לו בלי להכיר אותה ישירות.
המחלקה Car
1. ירושה מ-EventEmitter: const EventEmitter = require('events'), ואז class Car extends EventEmitter. בקונסטרקטור קוראים ל-super().
2. מאפיינים: יצרן, דגם ודלק. ההדגמה מתחילה עם 10 ליטרים.
3. נסיעה: drive מוריד דלק בכל נסיעה. הנסיעה חוזרת כל שנייה בעזרת setInterval, כי לולאה רגילה הייתה חוסמת את Node.js.
4. עצירה: כשהדלק מגיע לאפס, clearInterval עוצר את הטיימר לפי המזהה שלו.
דיווח על אירוע
1. emit: this.emit('no-fuel') מדווח שהדלק נגמר, בלי לדעת מי מאזין.
2. ארגומנטים: this.emit('low-fuel', { fuelLeft }) שולח אובייקט עם הנתון, כך שהמאזין יכול להשתמש בו.
המחלקה Game וההאזנה
1. כיוון התלות: Game מייבא את Car ויוצר ממנו אובייקט. Car לא מייבא את Game, ולכן אין תלות הדדית.
2. on: car.on('no-fuel', ...) מאזין לאירוע באותו שם בדיוק. car.on('low-fuel', (args) => ...) מקבל את הארגומנטים שנשלחו.
3. תוצאה: בהדגמה הופיעה הודעה של דלק נמוך, ואחריה הודעה של סוף המשחק כשהדלק נגמר.
כך מחלקה יכולה לדווח על מצב פנימי, ומחלקה אחרת מחליטה מה לעשות בעקבותיו. אחרי הסרטון אפשר לבנות דיווחים כאלה בין מחלקות בלי תלות ביניהן.

פרקי ההרצאה: אירועים EVENTS ב-NodeJS

  1. 00:00

    מהם אירועים Events ב-Node.js

  2. 01:04

    יצירת מחלקת Car עם יצרן ודגם

  3. 02:26

    מחלקת Game שמפעילה את המכונית

  4. 04:31

    הוספת דלק וסימולציית נסיעה עם setInterval

  5. 08:05

    למה Car לא צריכה להכיר את Game

  6. 09:56

    ירושה מ-EventEmitter ושימוש במחלקה

  7. 11:15

    שליחת אירוע noFuel עם emit

  8. 12:47

    האזנה לאירוע עם on

תמלול ההרצאה: אירועים EVENTS ב-NodeJS

הטקסט המלא של הדקות הראשונות בהרצאה «אירועים EVENTS ב-NodeJS» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

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

  2. 00:31

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

  3. 00:53

    אנחנו רוצים לראות איך אנחנו יכולים לבצע איבנטים ב-node.js. אז לצורך כך בואו נבנה מחלקה חדשה שמתארת מכונית.

  4. 01:04

    יש לנו קלאס r היא לא יורשת שום דבר ואנחנו רוצים לחשוף אותה החוצה. מודול exports r. בתוך car בואו נבנה קונסטרקטור ובקונסטרקטור עצמו יש יצרן ויש מודל. בואו נבצע דיס נקודה מניפקטור שווה מניפקטור דיס נקודה מודל שווה מודל.

  5. 01:35

    בנוסף יש לנו פונקציה שנקראת דרייב ואנחנו רוצים לבצע הדמיה כאילו שאנחנו נוסעים אז בואו נייצר פה קונסול לוג דרייבינג. אוקיי הנה מחלקה ראשונה בואו נייצר מחלקה שנייה שנקראת גיים יש לנו קובץ game.js האמת, את ה-car בכלל רציתי לייצר בתוך rjs, לא שמתי לב שכתבתי אותה ב-up, ביי ביי.

  6. 02:12

    הנה יש לנו car.js, בתוכה יש את המחלקה car, ויש לנו game, ובתוך game אנחנו רוצים מחלקה שמתארת משחק מכוניות. אז יש לנו class Game, ואנחנו רוצים פונקציה סטארט, ויש לנו כאן קונסט r שווה rickwire של r.

  7. 02:43

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

  8. 03:09

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

  9. 03:28

    גיים נקודה סטארט. אנחנו רוצים להתחיל את המשחק שלנו, אז בואו נריץ את זה, נוד אפ, גיים סטארט is not a function. למה הוא צועק עליי? בואו נראה, סטארט כתבתי כמו שצריך, אוי, זה בכלל אמור להיות עם ג'י גדולה, ואני רואה שלא יצרנו בכלל, לא יצרתי בכלל, משחק פונסט גיים שווה ניו גיים, ועכשיו זה אמור להיות בסדר.

  10. 04:09

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

  11. 04:34

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

  12. 04:54

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

  13. 05:07

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

  14. 05:32

    השיטה הנכונה זה to set interval. set interval זה שוב פעם אחת מהפונקציות שמאפשרות להריץ קטע קוד באזור של ה-C++ APIs כך שהוא לא יפריע להריצה הרגילה של Node.js אז בואו ניתן לו פונקציה ונגיד לו שהוא יריץ את הפונקציה הזאת כל שנייה.

  15. 05:56

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

  16. 06:24

    נבצע לדוגמה פיול מינוס מינוס. עכשיו אם פיול אפס אנחנו רוצים לעצור את הטיימר אבל איך אני יוצר טיימר בג'אווה סקריפט? לעצור טיימר בג'אווה סקריפט זה פשוט לקבל את הכתובת של הטיימר או איזשהו מזהה ID של הטיימר אלינו ואז להשתמש בפונקציה שנקראת clear interval ולתת לה את אותו מזהה כעת אנחנו בעצם נרוץ מספר פעמים ואנחנו נעצור בואו רגע

  17. 07:10

    נסתכל על זה ננקה אני רואה שעוד פעם הוא לא מנקה לא קרה כלום בואו נסגור את הטרמינל ונפתח מחדש איזה שהוא באג של visual studio טוב אז אנחנו רוצים to ויש לנו מספר פעמים דרייבינג בואו נראה כמה פעמים 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 בדיוק כמו שאנחנו יודעים הוריד ל-9 הוריד ל-8 ברגע שיש לו 0 אז הוא סיים כי אין לו יותר דלק עד כאן זה מאוד פשוט מה הקשר לאירועים אז

  18. 08:01

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

  19. 08:15

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

  20. 08:38

    לדוגמה, יציג הודעה של Game Over, יציג הודעה שאתה חייב להיכנס לתחנת דלק, לא משנה מה. האם המחלקה Car מכירה את המחלקה Game?

  21. 08:53

    או האם המחלקה Game מכירה את המחלקה Car? מי מכיר את מי? האם אני יכול פה למעלה לרשום Require עבור Game, ובגיים ריקווייר עבור קאר.

  22. 09:05

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

  23. 09:34

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

  24. 09:48

    אז מה כן אנחנו רוצים לעשות? אנחנו איכשהו רוצים מתוך המחלקה car לשלוח הודעה למחלקה game מבלי להכיר את המחלקה game ולצורך כך בדיוק יש לנו את הקונספט של events. אז איך אנחנו מיישמים איבנטים ב-Node.js?

  25. 10:10

    הדבר הראשון שאנחנו צריכים לעשות זה במחלקה car לבנות אובייקט שהוא קלאס מסוג Event Emitter, ויש לנו Require Events. זה בעצם תשתית מוכנה שקיימת ב-Node.js שאומרת לנו אני מסוגלת לתת לכם שירותים של איבנטים ויש לי מחלקה שנקראת Event Emitter, שימו לב ל-E הגדולה כי זה לא פונקציה, זה קלאס.

  26. 10:45

    הדבר הבא שאנחנו צריכים לעשות זה לרשת את EventEmitter עבור המחלקה CarExtendsEventEmitter. ככה זה מתבצע ב-Node.js. אחרי שיצרנו אותו אנחנו חייבים כאן לקרוא ל-Super בלי כלום.

  27. 11:06

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

  28. 11:21

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

  29. 11:38

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

  30. 12:04

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

  31. 12:28

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

  32. 12:43

    מי זה שאמור להאזין לאירוע? גיים. ברגע שגיים יוצרת אובייקט R, אז היא צריכה מה שנקרא להירשם לאירוע. הפעולה הזאת נקראת raising an event ואנחנו רוצים to register an event.

  33. 13:07

    Registers event זה אומר שאנחנו נרשמים לאירוע וכאשר האירוע עולה אז אנחנו רוצים לדעת מזה ולבצע פעולה בהתאם. כל מה שאנחנו צריכים לעשות זה car.on זה

לקורס המלא: קורס NodeJS אונליין בעברית

ההרצאה הקודמת: משתנה ססטי ו-Private ב-NodeJS

ההרצאה הבאה: מבנה בקשה בפרוטוקול HTTP

הרצאות קשורות מקורסים אחרים

  • אירועים - Events - חלק 1
  • אירועים בריאקט - Events
  • Device Events
  • Animation Events

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס ריאקט - React