מסגרות JavaScript רבות שמשתמשות ב-MVC או ב-MDV צריכות להגיב לשינויים באובייקטים שמדגימים את המצב בתוך אפליקציית אינטרנט. היכולת הזו היא חלק בסיסי במודל של קישור נתונים.
יש כמה דרכים שונות לעקוב אחר אובייקטים ומאפייני DOM של JavaScript כדי להפעיל פעולה מסוימת, אבל רוב השיטות אינן אידיאליות מסיבות שונות, כמו ביצועים וכו'.
כדי לשפר את הביצועים של אפליקציות אינטרנט, הוצעה ל-TC39 שיטה חדשה שנקראת Object.observe() – הגוף בתקנים שמפקח על פיתוח ECMAScript (JavaScript).
בעזרת Object.observe() ניתן להוסיף פונקציות listener לכל אובייקט JavaScript שנקרא בכל פעם שהאובייקט או המאפיינים שלו משתנים.
אפשר לנסות את הגרסה החדשה ב-Chrome Canary בגרסה 25.
כדי להתנסות בתכונה הזו, עליך להפעיל את הסימון הפעלת 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, אבל הוא יעבד רק מעט התקשרות חזרה על ידי קיבוץ העדכונים יחד.
פונקציית הקריאה החוזרת מופעלת בכל פעם שנכס נוסף, משתנה, נמחק או מוגדר מחדש.
דבר ממש נחמד כשבודקים מערכים הוא שאם בוצעו במערך כמה שינויים בוצעו בו שינויים, אפשר להשתמש בספריית העזרה סיכום שינויים כדי ליצור קבוצת שינויים מינימלית, כך ש-JavaScript בצד הלקוח לא יצטרך לסרוק את המערך באופן ידני כדי לבדוק כל פריט.
תוכל לבצע איטרציה כדי לחזור על כל שינוי בקלות, על ידי ביצוע פעולה כזו בפונקציית הקריאה החוזרת '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 מבקש משוב על התכונה הזו. אתם מוזמנים לנסות אותה ולספר לנו מה דעתכם.