mixin או קצת מונחה עצמים..

-
בס"ד

הי כולם,

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

בבקשה:



See the Pen vue - mixins - first example by adiel (@adielsh) on CodePen.

כאן אנחנו רואים דוגמא של מופע vue, אובייקט (לא קומפוננט! אלא אובייקט רגיל ופשוט) בשם son, ועוד אובייקט בשם grandson.

מכירים בבושקה? אז ממש דומה!
כל אחד משני האובייקטים הנ"ל מכיל פונקציה שנקראת created המדפיסה את שם האובייקט מיד ביצירתו .
ובנוסף, מכילה חלק הנקרא mixins שתפקידו הוא להכיל אובייקטים שונים ואת כל התוכן שלהם.

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


נשאלת השאלה, מה קורה כשישנן שתי פונקציות עם אותן שמות?



See the Pen mixins conflict - vue by adiel (@adielsh) on CodePen.

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

כעת, נראה דוגמא לירושה מרובה:




See the Pen mixins- multi mixins vue by adiel (@adielsh) on CodePen.


מאוד פשוט- אובייקט המופע ירש שני אובייקטים והפעיל את הפונקציות שלהם, כאילו הן שלו עצמו (כלומר פונה אליהן ע"י this)

עד כאן להפעם.

תגובות

הוסף רשומת תגובה

פוסטים פופולריים מהבלוג הזה

הקדמה

-
שלום לכולם! בבלוג זה אעסוק בע"ה בהסבר הספריה Vue.js, גרסא 2. ההחלטה לכתוב בלוג על ספריה זו נבעה מעיסוק רב בפיתוח צד לקוח, והבנה שהשימוש ב Vue מפשט מאוד את העבודה בצד לקוח. במהלך המדריך אשלב דוגמאות שונות כדי להבין באופן מוחשי את ההסברים המובאים. קצת רקע לספריית Vue: ספרית vue  היא ספריית צד לקוח שפותחה ע"י Evan You , במטרה לאגד את היתרונות בספריות מובילות אחרות כדוגמת React  וAngular.js, ולאחד אותם בתוך ספריה קיימת. ספריה זו צברה פופולריות רבה במהלך השנים האחרונות, (ובפרט בשנה האחרונה) וקצב הצמיחה שלה הוא מאוד מהיר, זאת תודות ליתרונות הרבים שהיא מאגדת בתוכה. בלוג זה מטרתו להנגיש את הדוגמאות המובאות באתר הרשמי של Vue וכמו גם להוסיף עליהן דוגמאות אחרות, וכל זאת בעברית! התוכן בבלוג מיועד לכאלו בעלי ידע בסיסי בג'אווהסקריפט, html, וcss. השימוש בבלוג זה באחריות המשתמש. כל התכנים בבלוג זה נכתבו כפי הבנתי, אי לכך ייתכנו טעויות או אי דיוקים כאלו ואחרים. במידה ומצאת כאלו, אשמח להארות/הערות. שיהיה בהנאה רבה! עדיאל.
המשך לקרוא

Directives - חלק א

-
בפוסט זה אעסוק בנושא directives. כפי שראינו בפוסט הקודם, דף הHTML נראה באופן שונה כאשר עובדים עם vue. כביכול נוספות לדף תכונות נוספות שמאפשרות לvue לרנדר אותו באופן חכם ומקושר ישירות לחלק הJS שבפרוייקט. בדף זה אעבור על כמה מהמילות השמורות של vue להלן: directives, היוצרות קשר עם מופע הVue שנמצא בחלק הJS, וכל זאת ישירות מתוך דף הHTML  נעבור על דוגמא: See the Pen v-bind by adiel ( @adielsh ) on CodePen . ראשית נעבור על קובץ הjs. כפי שראינו כבר קודם, יש לנו איתחול של אובייקט מסוג Vue, הוא אובייקט השורש ממנו אנו מתחילים את העבודה. בתוכו יש את חלק הdata, שבדוגמא שלנו מכיל שדה name וcondition. ואת כל האובייקט הנ"ל אנו מכילים על תגית הHTML בשם example. נעבור על קובץ הHTML: התגית הראשונה example, עליה ועל כל מה שבתוכה פועל אובייקט הVue כאמור - כבר ידוע ומוכר.. התגית השניה מכילה דיירקטיב בשם v-bind, תפקידו הוא קישור אטריביוטים  מוכרים וידועים כדוגמת class, value וכדומה השייכים לפקדי html סטנדרטים, למידע שנמצא באובייקט הvue שלנו, ובנוסף אפשרות להוספת ...
המשך לקרוא

משחק מסכם

-
בס"ד שלום לכולם, לסיכום החומר עד כה, הכנתי משחק שמאגד בתוכו הרבה מהחומר שהובא בפוסטים הקודמים. אז הנה המשחק: See the Pen GAME by adiel ( @adielsh ) on CodePen . אין כאן איזה חידוש רציני מהפוסטים הקודמים.. באופן כללי יצרתי מופע אב וcomponent בן, כל component כזה מייצג תא מה9 תאים. בתחילת המשחק ישנו טיימר חיצוני שקוצב את המשחק בזמן. ישנה פונקציה start שמתחילה את המשחק ולאחר אתחול הטיימר הפנימי קוראת לפונקציה render. הפונקציה render - יוצרת קריאה רקורסיבית לעצמה כל שניה (או פחות, תלוי ברמת קושי שבחרתם..) הקריאה כל שניה מבוצעת הודות לטיימר הפנימי. הפונקציה rand - משתמשת בפונקציית _random של ספריית loadsh המעולה (שווה להכיר!) הפונקציה clicked - מקבלת את טריגר הלחיצה מהקומפוננט בן, כאשר זה קורה, היא מזהה את הערך שנזרק מהקומפוננט והתקבל בפונקציה , במידה והערך true המשמעות היא שלחצנו על התא האדום, סך הנקודות שלנו עולה ב5! במידה והערך false אז סך הנקודות יורד ב5. כדי שלא יווצר מצב ששחקן לוחץ כמה פעמים על התא האדום וכך "גונב" כמה נקודות אז יצרתי נעילה...
המשך לקרוא