טיפים שימושיים

עקוב אחר ראות הדפים בתגובה באמצעות אבזרי Render

Pin
Send
Share
Send
Send


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

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

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

תיבת קודי תשתמש כאן כדי ליצור את היישום React (אתה יכול גם להשתמש באפשרות create-react-app). ניצור אפליקציה קטנה בה אלמנט הווידיאו HTML5 יושמע רק אם כרטיסיית הדפדפן בפוקוס או פעילה, אחרת היא תושהה אוטומטית. וידאו משמש כדי להקל על בדיקת תכונות היישום.

visibilityjs - עטיפה לממשק ה- API של נראות הדפים

Visibility.js הוא עטיפה לממשק ה- API של נראות עמוד. זה מסתיר קידומות של ספק ומוסיף פונקציות ברמה גבוהה. ממשק API של נראות עמוד מאפשר לך לקבוע אם דף האינטרנט שלך גלוי למשתמש או מוסתר בלשונית רקע או לפני הצגת קבצים מראש. זה מאפשר לך להשתמש במצב נראות העמוד בלוגיקה של JavaScript ולשפר את ביצועי הדפדפן על ידי השבתת טיימרים מיותרים ובקשות AJAX, או שיפור חוויית ממשק המשתמש (לדוגמה, על ידי הפסקת הפעלת וידאו או הצגת מצגת כאשר המשתמש עובר לכרטיסיית דפדפן אחרת).

Crossbrowser ודרך קלה לבדוק אם המשתמש מסתכל על הדף או אינטראקציה איתו. (עטיפה סביב api של נראות HTML5)

תחילת העבודה

אנו נשתמש ב- Codesandbox כדי לבצע אתחול מהאפליקציה React שלנו (אתה יכול להשתמש ליצור-להגיב-אפליקציה גם). אנו ניצור אפליקציה קטנה שתכיל אלמנט וידאו HTML5 אשר יופעל רק כאשר כרטיסיית הדפדפן בפוקוס או פעילה אחרת היא תושהה אוטומטית. אנו משתמשים בסרטון מכיוון שהוא יקל על בדיקת הפונקציונליות של האפליקציה שלנו.

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

אנו ניצור רכיב כיתת React פשוט. אנו נציג אלמנט וידיאו פשוט כאשר המקור שלו מוגדר לכתובת ה- URL שהועברה באמצעות אבזרי ה- src ונשתמש ב- API החדש של React כדי לצרף ref על צומת ה- DOM של הווידאו. אנו נגדיר את הסרטון להפעלה אוטומטית בהנחה שכאשר נפעיל את האפליקציה העמוד יהיה פעיל. דבר אחד שיש לציין כאן הוא ש- Safari כעת לא מאפשר לשחק אוטומטית רכיבי מדיה ללא אינטראקציה של משתמשים. שיטת מחזור החיים של componentDidUpdate מאוד שימושית בטיפול בתופעות לוואי כאשר האביזרים של רכיב משתנים. לכן, כאן אנו משתמשים בשיטה זו של מחזור חיים כדי להפעיל ולהשהות את הווידאו על סמך הערך הנוכחי של this.props.active.

ההבדלים של קידומת ספקי הדפדפנים מאוד מעצבנים להתמודד עם השימוש בממשקי API מסוימים וממשק ה- API של נראות הדפים הוא ללא ספק אחד מהם. לכן ניצור פונקציית כלי עזר פשוטה שתתמודד עם ההבדלים הללו ותחזיר לנו את ה- API התואם על בסיס דפדפן המשתמש בצורה אחידה. אנו ניצור וייצא פונקציה קטנה זו מ pageVisibilityUtils.js תחת src ספרייה.

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

בשלב הבא, אנו עוברים למרכיב העיקרי שלנו. אנו מכסה את כל ההיגיון שלנו למעקב אחר נראות עמוד במרכיב בכיתה React לשימוש חוזר על ידי מינוף התבנית Props Render. אנו ניצור רכיב כיתה בשם VisibilityManager. רכיב זה יטפל בהוספה והסרה של כל מאזיני האירועים מבוססי DOM.

נתחיל בייבוא ​​פונקציית השירות שיצרנו קודם ונשתמש בה כדי לקבל את ממשקי ה- API הספציפיים לדפדפן. לאחר מכן, ניצור את רכיב ה- React ונאתחל את מצבו בשדה בודד שנקבע כ- true. שדה מצב בוליאני זה יהיה אחראי לשיקוף מצב נראות העמוד שלנו. בשיטת מחזור החיים של הרכיב componentDidMount, אנו מצרפים מאזין לאירועים על המסמך לאירוע הניתנות להחלפה בשיטה זו. HandleVisibilityChange כמטפל בה. אנו נצרף מאזיני אירועים למיקוד ולטשטוש אירועים במסמך כמו גם לרכיב החלון. הפעם נקבע את זה. כוח VisibilityTrue ו this.forceVisibilityFalse כמטפלים במיקוד ולטשטוש אירועים בהתאמה.

כעת, ניצור את השיטה handleVisibilityChange שתקבל טיעון בודד בכפייה. טיעון ForceFlag זה ישמש כדי לקבוע אם נקראת השיטה בגלל אירוע ההחלפה או אירועי המיקוד או הטשטוש. הסיבה לכך היא ששיטות ה- ForceVisibilityTrue ו- ForceVisibilityFalse אינן אלא קוראות לשיטת handleVisibilityChange עם ערך נכון ושקר עבור טיעון ה- ForceFlag. בתוך שיטת handleVisibilityChange, נבדוק תחילה אם ערך הארגומנט בכפייה כפויה הוא בוליאני (הסיבה לכך היא שאם זה נקרא ממטפל האירועים visibilitychange מאשר שהטיעון שהועבר יהיה אובייקט SyntheticEvent). אם זה בוליאני, אנו בודקים אם זה נכון או לא נכון. כשזה נכון קראנו לשיטת setVisibility עם true אחרת אנחנו קוראים לשיטה עם falsk כוויכוח. שיטת setVisibility ממנפת שיטה זו. SetState לעדכון ערך השדה הניתן במצב הרכיב. אבל, אם ה- ForceFlag אינו בוליאני, אנו בודקים את ערך התכונה הנסתרת על המסמך וקוראים לשיטת setVisibility בהתאם. זה מכסה את לוגיקת המעקב של מצב חשיפת הדפים שלנו.

כדי להפוך את הרכיב לשימוש חוזר בטבעו אנו משתמשים בתבנית ה- Render Props, כלומר במקום לבצע רכיב משיטת ה- render, אנו קוראים ל- this.props.childs כפונקציה עם this.state.is.

לבסוף, אנו מעלים את היישום React שלנו ל- DOM שב- index.js קובץ. אנו מייבאים את שני רכיבי ה- React שלנו VisibilityManager ווידיאו ויוצרים יישום רכיב React פונקציונלי קטן על ידי הלחנתם. אנו מעבירים פונקציה כילדים של רכיב ה- VisibilityManager שמקבל הוא גלוי כוויכוח ומעביר אותה לרכיב הווידאו בהצהרת החזרה שלו. אנו מעבירים גם כתובת אתר של וידיאו כאביזרי src לרכיב הווידיאו. כך אנו צורכים את רכיב ה- VisiblityManager מבוסס אבזרי Render. לבסוף, אנו משתמשים בשיטת ReactDOM.render כדי להציג את אפליקציית React שלנו בצומת DOM עם מזהה "root".

מסקנה

ממשקי API לדפדפנים מודרניים מתחילים להיות ממש חזקים וניתן להשתמש בהם כדי לעשות דברים מדהימים. רוב ממשקי ה- API הללו הם הכרחיים באופיים ויכולים להיות מסובכים לעבוד איתם לפעמים בפרדיגמה ההצהרתית של React. שימוש בתבניות עוצמתיות כמו Render Props כדי לעטוף ממשקי API אלה לרכיבי React שניתנים לשימוש חוזר שלהם יכול להיות שימושי מאוד.

מפתחת JavaScript וחובב אבטחת סייבר.

פורסם 24 אוגוסט

Pin
Send
Share
Send
Send