תגובה לשינוי באמצעות Object.observ

Alex Danilo

הרבה מסגרות JavaScript שמשתמשות ב-MVC או ב-MDV צריכות להגיב לשינויים באובייקטים שמתארים את המצב בתוך אפליקציית אינטרנט. היכולת הזו היא חלק מהותי במודל של קישור נתונים.

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

כדי לשפר את הביצועים של אפליקציות אינטרנט, הוצעה ל-TC39 (גוף התקנים שמפקח על הפיתוח של ECMAScript‏ (JavaScript)) שיטה חדשה בשם Object.observe().

Object.observe() מאפשרת להוסיף מאזין לכל אובייקט JavaScript שיופעל בכל פעם שהאובייקט או המאפיינים שלו ישתנו.

אפשר לנסות את התכונה עכשיו ב-Chrome Canary בגרסה 25.

כדי להתנסות בתכונה הזו, צריך להפעיל את הדגל Enable Experimental JavaScript ב-Chrome Canary ולהפעיל מחדש את הדפדפן. הדגל מופיע בכתובת about:flags, כפי שמוצג בתמונה הבאה:

דוגמה פשוטה להגדרת משתמש מעקב על אובייקט:

var beingWatched = {};
// Define callback function to get notified on changes
function somethingChanged(changes) {
    // do something
}
Object.observe(beingWatched, somethingChanged);

כשהאובייקט 'beingWatched' ישתנה, הוא יפעיל את פונקציית הקריאה החוזרת 'somethingChanged', שמקבלת מערך של השינויים שהופעלו על האובייקט.

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

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

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

אפשר לעבור על כל שינוי בקלות יחסית, על ידי ביצוע פעולה דומה לזו הבאה בפונקציית ה-callback 'somethingChanged':

function whatHappened(change) {
    console.log(change.name + " was " + change.type + " and is now " + change.object[change.name]);
}
function somethingChanged(changes) {
    changes.forEach(whatHappened);
}

המאפיין type מזהה מה קרה לאובייקט. בקוד שבהמשך אפשר לראות דוגמאות למאפיינים שמוגדרים ולסוג המשויך להם.

beingWatched.a = "foo"; // new
beingWatched.a = "bar"; // updated
beingWatched.a = "bar"; // no change
beingWatched.b = "amazing"; // new

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

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

Object.observe(beingWatched, function(){ debugger; });

כאן תוכלו לצפות בסרטון מבוא מצוין על Object.observe() שמסביר את הנושא בפירוט.

יש גם תיאור מפורט זמין ודוגמה עובדת כאן.

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