
src נפתחת תיקייה בשם services, ובתוכה קובץ colors.ts עם קלאס Colors שמכיל את הפונקציה.Colors.getRandomColor), בלי ליצור אובייקט.const colors = new Colors()) וחושפים אותו (export default) עם שיא קטנה, במקום את הקלאס עצמו.colors.getRandomColor() במקום להגדיר את הלוגיקה בתוך הקומפוננט.הטקסט המלא של הדקות הראשונות בהרצאה «יצירת Service Class» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
השיטה הבאה שאנחנו הולכים לראות עבור Code Reuse זה פשוט אפשרות להוציא לוגיקה מסוימת מחוץ לקומפוננטה לאיזשהו מקום שכבר אנחנו הולכים לראות, בכדי שניתן יהיה להשתמש עם הלוגיקה הזאת במגוון קומפוננטות, משהו שלא שייך לקומפוננטה אחת ויחידה.
באחת הדוגמאות שעשינו היה לנו כאן את האדרס והיה לנו באדרס פונקציה שמכילה לוגיקה בלבד היא כמובן השתמשנו איתה בתוך הקומפוננטה הזאת אבל מה הפונקציה הזאת עשתה הפונקציה הזאתי החזירה לנו רנדום קולור היא הייתה שייכת לאזור של הספורט אולי נשים אותו רגע בחזרה איפה זה היה לנו בואו רגע נלך לספורט נוריד את ההום נחזיר את האזור
של הספורט כמובן בהמשך זה יתבצע על ידי והנה האדרס, וכל פעם שאנחנו מרפרשים אנחנו רואים שהוא מייצר איזשהו צבע רנדומלי, שזה בסדר, זה כאילו מה שרצינו, זה היה התפקיד שלו.
אבל רגע, הפונקציה הזאת, אולי אנחנו רוצים שהיא תשרת עוד קומפוננטות, לא רק את הקומפוננטה הזאת, ומן הסתם זה גם קטע לוגי, זה לא בהכרח שייך רק לקומפוננטה הזאת.
אז אנחנו הולכים לראות איפה אפשר להוציא קוד שהוא לא קומפוננטה אלא קוד לוגי שאנחנו יכולים להשתמש איתו בכל מקום בפרויקט איפה אפשר לשים אותו ומה שאנחנו יכולים לעשות אנחנו יכולים לייצר לעצמנו אזור שהוא לא בתוך הקומפוננטות הוא נמצא מחוץ לקומפוננטות או מקביל לקומפוננטות עבור כל מיני פעילויות לוגיות כאלה פעילות לוגית כזאת זה כאילו שירות מסוים
עזרים או שירותים מסוימים שאנחנו רוצים לבנות ולספק ואפשר לקרוא לזה Utilities אפשר לקרוא לזה Services. Service זה השם היותר פופולרי עכשיו לא להתבלבל זה לא Service שנמצא בשרת מרוחק שנחשב Server וחושף לנו דאטה מהשרת המרוחק זה לא זה.
סרוויס זה utility או פעילות לוגית מסוימת שקיימת לנו בפרונט אנד אז אני נמצא כרגע ב src אני פותח תיקייה אני קורא לה services וכל סרוויס שנבנה נבנה בתוך תיקיית הסרוויסס זה לא קומפוננטה אני לא בונה קומפוננטות בתוך הסרוויסס זה רק לוגיקות טהורות שקומפוננטות יכולות להשתמש בהם אז בתוך
הסרוויסס אני מוסיף סרוויס סרוויס ברוב המקרים יהיה פשוט קלאס אז אין צורך אולי אפשר לבנות פתיקייה אבל אפשר פשוט לזרוק פה את כל הקלאסים והקלאס שאנחנו רוצים זה colors אפשר לקרוא לזה colors service אני פשוט אשאר עם השם colors.ts כי זה טייפ סקריפט ויש לנו כאן פלאס קולורס ואנחנו רוצים את הפונקציה הזאת בואו ניקח אותה כרגע רק אעתיק אותה
נדביק אותה פה בלי המילה פאנקשן רק פאבליק נקראת גט רנדום קולור אבל רגע איך אני צריך ליצור אובייקט מהדבר הזה כמובן שאם הפונקציה הייתה סטטית בוא נגיד שהפונקציה היא סטטית נתחיל עם זה אז אנחנו לא צריכים לייצר אובייקט וברוב המקרים אנחנו בעצם יכולים לעשות את הדבר הזה זה ממש בסדר יש לנו פה colors.getRandomColor זה אמור לעשות את העבודה.
לצורך כך אנחנו יכולים פשוט לחשוף החוצה exportDefaultColors ואז אנחנו יכולים לחזור לפה אנחנו יכולים להיפטר מהפונקציה הזאת. אנחנו לא רוצים שהיא תהיה ברמת קומפוננטה ובכל מקום שאנחנו רוצים להשתמש איתה זה יהיה colors.getrandomcolor בואו ניקח את זה גם לפה יש לנו את הservice שהגיע כאן למעלה ואין לנו את הלוגיקה בתוך הקומפוננטה זה לא המקום
לשים לוגיקות בתוך קומפוננטות קומפוננטות דואגות יותר ליוזר אינטרפייס לפעילויות של יוזר אינטרפייסים יש לי לוגיקה שהיא קצת משותפת להרבה קומפוננטות אני מוציא אותה החוצה לכביכול סרוויס בואו נבדוק את זה ונראה שעדיין זה עובד כמו שצריך ויש לנו פה צבע רנדומלי בכל פעם שאנחנו מרפרשים
אבל לא מומלץ להשתמש בדברים סטטיים בכלל היום יורדים מזה יש כל מיני סיבות למה אנחנו לא