PracticU

יצירת Service Class

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › יצירת Service Class
מילון מושגים:
מחלקה - תבנית בתכנות מונחה עצמים שמגדירה אילו נתונים ופעולות יהיו לאובייקטים שנוצרים ממנה.
ממשק - נקודת מגע בין רכיבים: ממשק משתמש שבו אדם מפעיל תוכנה, או ממשק תכנותי שמגדיר אילו פעולות רכיב אחד חושף לאחר.
פונקציה - קטע קוד בעל שם שמבצע משימה מוגדרת, מקבל ערכי קלט (פרמטרים) ויכול להחזיר תוצאה. מאפשרת לארגן קוד ולהשתמש בו שוב.
תיקייה - מכל במערכת הקבצים שמשמש לארגון קבצים ותיקיות אחרות בתוך מבנה היררכי.
אובייקט - יחידה בתכנות מונחה עצמים שמאגדת נתונים (תכונות) ופעולות (מתודות). נוצר בדרך כלל ממחלקה המשמשת כתבנית.
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.

יצירת Service Class
דרך נוספת ל-Code Reuse היא להוציא לוגיקה שאינה שייכת לממשק המשתמש לקובץ נפרד בתיקיית Services, כדי שקומפוננטות רבות יוכלו להשתמש בה בלי לשכפל קוד.
השלבים העיקריים
1. זיהוי לוגיקה לחילוץ: בקומפוננטת ה-Support הייתה פונקציה שמחזירה צבע רנדומלי (getRandomColor), שלא שייכת באמת רק לקומפוננט הזה.
2. יצירת תיקיית services: בתוך src נפתחת תיקייה בשם services, ובתוכה קובץ colors.ts עם קלאס Colors שמכיל את הפונקציה.
3. ניסיון עם פונקציה סטטית: בהתחלה הופכים את הפונקציה ל-static כדי לגשת אליה ישירות לפי שם הקלאס (Colors.getRandomColor), בלי ליצור אובייקט.
4. הימנעות מסטטי: בגלל קשיים עם unit testing ועם מצב משותף לא רצוי, מוותרים על static.
5. יצירת אובייקט ייחודי מהקלאס: בתוך קובץ השירות יוצרים מופע יחיד (const colors = new Colors()) וחושפים אותו (export default) עם שיא קטנה, במקום את הקלאס עצמו.
6. שימוש בקומפוננטה: מייבאים את האובייקט מהשירות וקוראים ל-colors.getRandomColor() במקום להגדיר את הלוגיקה בתוך הקומפוננט.
שימו לב
קומפוננטות אמורות להתעסק בממשק המשתמש בלבד, ולא להכיל לוגיקה פנימית שאינה קשורה אליהן ישירות - לוגיקה כזו עוברת ל-service.
כך נבנה שירות שימושי שכל קומפוננטה באפליקציה יכולה להשתמש בו בלי לחזור על אותו קוד.
השיעור הבא בקורס: יצירת Higher Order Component עם Function Components

פרקי ההרצאה: יצירת Service Class

  1. 00:00

    הוצאת לוגיקה מחוץ לקומפוננטה

  2. 01:04

    פונקציית getRandomColor ב-Address

  3. 02:01

    מהו Service בפרונט אנד

  4. 02:42

    יצירת תיקיית services ומחלקת Colors

  5. 03:44

    פונקציה סטטית getRandomColor

  6. 04:23

    חשיפת ה-Service ושימוש בו

תמלול ההרצאה: יצירת Service Class

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

  1. 00:02

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

  2. 00:25

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

  3. 01:04

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

  4. 01:22

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

  5. 01:38

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

  6. 02:11

    עזרים או שירותים מסוימים שאנחנו רוצים לבנות ולספק ואפשר לקרוא לזה Utilities אפשר לקרוא לזה Services. Service זה השם היותר פופולרי עכשיו לא להתבלבל זה לא Service שנמצא בשרת מרוחק שנחשב Server וחושף לנו דאטה מהשרת המרוחק זה לא זה.

  7. 02:33

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

  8. 03:04

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

  9. 03:46

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

  10. 04:23

    לצורך כך אנחנו יכולים פשוט לחשוף החוצה exportDefaultColors ואז אנחנו יכולים לחזור לפה אנחנו יכולים להיפטר מהפונקציה הזאת. אנחנו לא רוצים שהיא תהיה ברמת קומפוננטה ובכל מקום שאנחנו רוצים להשתמש איתה זה יהיה colors.getrandomcolor בואו ניקח את זה גם לפה יש לנו את הservice שהגיע כאן למעלה ואין לנו את הלוגיקה בתוך הקומפוננטה זה לא המקום

  11. 05:02

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

  12. 05:25

    אבל לא מומלץ להשתמש בדברים סטטיים בכלל היום יורדים מזה יש כל מיני סיבות למה אנחנו לא

לקורס המלא: קורס ריאקט אונליין

ההרצאה הקודמת: הסבר על Multiple Props Children

ההרצאה הבאה: יצירת Higher Order Component עם Function Components

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

  • The R Class
  • יצירת Service ב-Windows
  • יצירת RESTful Service מאפס
  • יצירת מחלקת Customers Service

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

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