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

    כיצד להשתמש ב - 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, אנחנו פשוט לתפוס את המוטציה הראשונה שנצפתה על זה לבדוק אם הצומת טקסט הוכנס. אם יש לנו יותר משינוי אחד קורה, אנחנו יכולים פשוט לולאה דרך מוטציות מערך.

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

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

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

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

    תמיכה בדפדפן

    תמונה: האם אני יכול להשתמש. 19 ביוני 2015

    התייחסות

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