RSS

Angular 2.0 Differs Classes

10 פבר

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

ראו תמונה:

image

הסברים:

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

2. אנגולר 2.0 יודע לזהות את השינויים בשבילינו ע"י שימוש סטנדרטי ב-{{}}, attribues או directives קיימים.

 

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

דוגמא אמיתית ngFor:

ב- ngFor מזהים את השינויים ב- collection  כאשר אנגולר מפעיל את ,ngDoCheck  ע"פ שינויים אלו מוסיפים, מורידים או מעדכנים את UI. ראו קוד כאן.

אנגולר מספק לנו שתי מחלקות שעוזרות לנו לזהות שינויים בנתונים, KeyValueDiffers ו- IterableDiffers. המחלקה KeyValueDiffers עוזרת לזהות שינויים על אובייקט והמחלקה IterableDiffers עוזרת לזהות שינויים ב- collections.

שימו לב:

ü      המחלקות מסוג Differs עובדות על סמך ערך ישן וערך נוכחי  וההבדלים בניהם. מכאן שצריך לחבר אותם לנתונים ברגע שהם נשמרים על ה- component. ב-ngFor כאשר ה-set  של ngForOf עובד אז הם מאתחלים את ה- iterableDiffers.

 

ü      המחלקות מסוג Differs לא זורקות אירועים, הרעיון שרק שמופעל ה- ngDoCheck   אנחנו רוצים לדעת על השינויים, כי זה הזמן שאנחנו יכולים לעדכן את ה-UI.

 

ü      בדר"כ מי שמשתמש באסטרטגיה זו באחריותו לעדכן את המסך.

 

ü      לא חייבים להשתמש במחלקות אלו, אפשר להשתמש גם במחלקות צד שלישי.

 

ü      אם ממשים את ngDoCheck   אז ngOnChanges לא יעבוד.

 

באנגולר 1 שאלת השאלות הייתה מה ההבדל בין compile ל- link ב- directives. באנגולר 2 אני מאמין שאלת השאלות תהיה מה הבדל בין ngDoCheck   ל- ngOnChanges? אך זה שייך לפוסט אחר J

מודעות פרסומת
 
2 תגובות

פורסם ע"י ב- פברואר 10, 2016 ב- Angular 2.0

 

2 תגובות ל-“Angular 2.0 Differs Classes

  1. מיקי

    פברואר 10, 2016 at 6:40 pm

    הייתי ממליץ לך לבדוק קצת את Ember.JS
    אני יודע שהיום Angular/React הם ״הדבר החם״, אבל Ember עברה לאחרונה שינוי מהותי ופישוט של תשתיות.
    עם מנוע Rendering חדש (ששאב את הרעיון מ-React).
    אז אחרי שאנגולר שברו הכל עם 2.0 וסיבכו הכל, ההמלצה שלי היא Ember.

     
  2. שלומי.

    אפריל 21, 2016 at 4:40 pm

    מיקי, אנגולר לא שברו הכל… האמת שממש לא.

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

    קוד שכתוב ב TypeScript ומשתמש בWebPack פשוט מובל לשם… גם באנגולר 1.

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

    אגב אנגולר 2 כ״כ מודלרי שהכל שם יכול להתחלף.

    אני מאמין שהשילוב הבא לבניית אפליקציות יהיה TypeScript ואנגולר 2
    להם יתווספו NativeScript , Electron וכמובן web
    זה מאפשר, כבר היום, לבנות אפליקציה עם בסיס משותף לא קטן לכל הפלטפורמות… דפדפן, osx, win, linux, android, ios והכל native אמיתי.

    ועוד דבר לגבי אנגולר 2, הכוח האמיתי שלו ומה שנותן לו את כל היכולות זה Zones וזה באמת מה שמשנה את המשחק ומאפשר את כל הביצועים והטרוף הזה… זה משהו שעדיין לא התפוצץ אבל זה כל הכוח מאחורי אנגולר 2.

     

להשאיר תגובה

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

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s

 
%d בלוגרים אהבו את זה: