כיצד להשתמש ב - API עבור מוטציה עבור DOM הצומת שינויים

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

אחרי שהשיחה מסתיימת היא חוזרת למסך, רואה “שינויים נשמרו!” מכבה את המחשב שלה ואת הסופות מחוץ למשרד.

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

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

ממשק API

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

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

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

הערה: אתה יכול בשלב מסוים או כבר שאל אותי בראש שלך “למה לא רק להסתיר את ההודעה מתוך כפתור ללחוץ על האירוע עצמו ב- JavaScript?” בדוגמה שלי, אני לא עובד עם שרת, אז כמובן הלקוח אחראי להציג את ההודעה והוא יכול להסתיר את זה בקלות רבה מדי. אבל כמו בכלי העריכה של ריטה אם השרת הוא המחליט לשנות את תוכן DOM, הלקוח יכול להישאר ערני רק לחכות.

ראשית, אנו יוצרים את ההתקנה כדי להציג את ההודעה על כפתור לחץ.

 הצג הודעה

msg msg = document.querySelector ('# msg'), SUCCESSMSG = "שינויים שמורים!"; / * הוסף כפתור לחץ על האירוע * / document .querySelector ('כפתור') .addEventListener ('לחץ', showMsg); showMsg function () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

ברגע שיש לנו את ההתקנה הראשונית פועל, מאפשר לבצע את הפעולות הבאות;

• ליצור מוטציה אובייקט עם פונקציית קריאה חוזרת על ידי המשתמש (הפונקציה מוגדרת בהמשך ההודעה). הפונקציה תבצע על כל מוטציה שנצפתה על ידי מוטציה.
• יצירת אובייקט config כדי לציין את סוג של מוטציות להיות שנצפתה על ידי מוטציה.
• לאגד את מוטציה אל היעד, שהוא 'msg' div בדוגמה שלנו.

(mutationObserverCallback (מוטציות)), / * 2) יצירת אובייקט config * / config = ChildList: true; / * 3) Glue'em all * / observer.observe (msg, config); ) (); 

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

סוגים של מוטציות שנצפו

עכשיו, כי פונקציה callback אשר מקבל להורג על כל מוטציה שנצפתה.

פונקציה mutationObserverCallback (מוטציות) / * לתפוס את המוטציה הראשונה * / var mutationRecord = מוטציות [0]; / * אם צומת ילד נוסף, להסתיר את msg לאחר 2s * / if (mutationRecord.addedNodes [0]! = Undefined) setTimeout (hideMsg, 2000);  function hideMsg () msg.textContent = "; msg.style.background = 'none'; 

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

כל מוטציה ב מוטציות המערך מיוצג על ידי האובייקט מוטציה עם המאפיינים הבאים.

רכוש של מוטציה

וזה הכל. אנחנו רק צריכים לשים את הקוד יחד לשלב הסופי.

תמיכה בדפדפן

התייחסות

• “תצוגת מוטציה.” W3C. אינטרנט. 19 ביוני 2015
• “מוטציה.” רשת המפתחים של מוזילה. אינטרנט. 19 ביוני 2015.