גלה JavaScript פונקציונלי נבחר לאחד מספרי התכנות הפונקציונליים הטובים ביותר על ידי BookAuthority !
שטף הוא דפוס אדריכלי שהציע פייסבוק לבניית ספא. הוא מציע לפצל את היישום לחלקים הבאים:
- חנויות
- שולח
- צפיות
- יוצרי פעולה / פעולה
חנות
חנות מנהלת את המדינה. זה יכול לאחסן גם את מצב התחום וגם את ממשק המשתמש.
חנות ומדינה הם מושגים שונים. המדינה היא ערך הנתונים. חנות היא אובייקט התנהגות המנהל מצב באמצעות שיטות. במקרה של ניהול ספרים: רשימת הספרים היא המדינה ו- BookStore מנהלת את הרשימה הזו.
חנות מנהלת מספר חפצים. זהו מקור האמת היחיד ביחס לאובייקטים ספציפיים אלה. באפליקציה יכולות להיות חנויות רבות. לדוגמא: BookStore, AuthorStore, UserStore.
אין שיטות מגדיר בחנות. אתה יכול לבקש שינוי מצב רק על ידי העברת פעולה לשולח.
חנות מקשיבה לכל הפעולות ומחליטה על מי מהן לפעול. זה בדרך כלל אומר switchאמירה. לאחר שהחנות ביצעה את שינויי המדינה, היא תנפיק אירוע שינוי. החנות היא פולטת אירועים.
חנויות לא לוקחות חנויות אחרות כתלות.
שולח
Dispatcher הוא אובייקט יחיד המשדר פעולות / אירועים לכל החנויות הרשומות. חנויות צריכות להירשם לאירועים כאשר האפליקציה מתחילה.
כאשר פעולה נכנסת, היא תעביר פעולה זו לכל החנויות הרשומות.
נוף
תצוגה היא רכיב ממשק המשתמש. היא אחראית על עיבוד ממשק המשתמש ועל הטיפול באינטראקציה של המשתמש. הנופים הם במבנה עץ.
תצוגות מקשיבות לשינויים בחנות ועיבוד מחדש.
ניתן לפצל צפיות נוספות בתצוגות מצגת ומיכלים.
תצוגות המצגת אינן מתחברות לשולח או לחנויות. הם מתקשרים רק דרך המאפיינים שלהם.
תצוגות מיכל מחוברות לחנויות ומשגר. הם מאזינים לאירועים מחנויות ומספקים את הנתונים לרכיבי מצגת. הם מקבלים את הנתונים החדשים בשיטות הגטריות הציבוריות של החנויות ואז מעבירים את הנתונים בעץ התצוגות.
תצוגות מיכל משגרות פעולות בתגובה לאיטרציה של המשתמש.
פעולות
פעולה היא אובייקט רגיל המכיל את כל המידע הדרוש לשם ביצוע פעולה זו.
לפעולות יש typeמאפיין שמזהה את סוג הפעולה.
כאשר אובייקטים של פעולה נעים סביב היישום, אני מציע להפוך אותם לבלתי משתנים.
פעולות עשויות להגיע ממקומות שונים. הם עשויים להגיע מתצוגות כתוצאה מאינטראקציה של המשתמשים. הם עשויים להגיע ממקומות אחרים כמו קוד האתחול, שם ניתן לקחת נתונים מממשק ה- API של האינטרנט ופעולות מופעלות לעדכון התצוגות. הפעולה עשויה להגיע מטיימר שדורש עדכוני מסך.
יוצרי פעולה
הנוהג הוא לכמוס את הקוד, ליצור פעולות בפונקציות. פונקציות אלה היוצרות ומשגרות פעולות נקראות יוצרי פעולה.
שיחות אינטרנט API
בעת ביצוע שיחות Web API לעדכון ממשק המשתמש, בעקבות קריאת ה- Web API תבצע פעולה לעדכון החנות. לאחר עדכון החנות היא תנפיק אירוע שינוי וכתוצאה מכך התצוגה שמאזין לאירוע ההוא תוצג מחדש.
שיחות Web API נעשות ביוצרי פעולה. אנו יכולים לחלץ את הקוד שמבצע את קריאת ה- API בפונקציות Utils Web API.
זרימת נתונים חד כיוונית
עדכון תצוגות זורם בכיוון אחד:
צפיות אינן משנות את הנתונים שקיבלו. הם מקשיבים לשינויים בנתונים אלה, יוצרים פעולות עם ערכים חדשים, אך אינם מעדכנים את הנתונים.
חנויות, תצוגות וכל פעולה אחרת אינן יכולות לשנות את המצב בחנויות (אחרות) ישירות. עליהם לשלוח פעולה דרך השולח
זרימת הנתונים קצרה יותר בקריאות בחנות מאשר בכתיבה. זרימת הנתונים בחנות כותבת שונה בין פעולות אסינכרוניות לסינכרוניות.
חנות קוראת
חנות כתיבה בפעולות סינכרוניות
חנות כתיבה בפעולות אסינכרוניות
יתרונות
ארכיטקטורת השטף טובה יותר ביישום שבו תצוגות אינן ממפות ישירות לחנויות הדומיינים. במילים אחרות, כאשר תצוגות יכולות ליצור פעולות שיעדכנו חנויות רבות וחנויות יכולות לעורר שינויים שיעדכנו תצוגות רבות.
ניתן להמשיך ולבצע פעולות ואז לשחק מחדש.
חסרונות
שטף יכול להוסיף מורכבות מיותרת ליישום שבו כל תצוגה ממופה לחנות אחת. ביישום מסוג זה די בהפרדה בין מבט לחנות.
תסתכל למשל על איך ליצור יישום תלת שכבתי עם React.
סיכום
חנויות מנהלות את המדינה. הם משנים מצב רק על ידי האזנה לפעולות. חנויות מודיעות על תצוגות לעדכון.
תצוגות מעבדות את ממשק המשתמש ומטפלות באינטראקציה של המשתמשים. תצוגות מיכל האזנה לשינויים בחנות.
השדרן משדר פעולות לכל החנויות הרשומות.
פעולות הן עצמים פשוטים.
גלה JavaScript פונקציונלי נבחר לאחד מ-מיטב ספרי התכנות הפונקציונליים החדשים מאת BookAuthority !
למידע נוסף על יישום טכניקות תכנות פונקציונליות ב- React, עיין ב- Functional React .
למדו להגיב פונקציונלי , באופן מבוסס פרויקט, עם אדריכלות פונקציונלית עם React ו- Redux .
עקוב אחרי בטוויטר