RSS

Pure Pipe vs. Impure Pipe

15 יונ

 

בפוסט זה אני רוצה להסביר את ההבדלים בין שני סוגי ה- Pipe. בשביל להסביר את ההבדלים בניתי את שני ה-pipes הבאים, ראו קוד:

import {Pipe} from '@angular/core';
let counter:number = 0
;
export class MyPipe implements
PipeTransform {
    counter2:
number = 0
;
   
constructor
(){ counter++; }
    transform(value:
string,name:string
) {
       
return `n: ${name} v: ${value} c2: ${this.counter2++} c1:${counter}`
;
    }
}
@Pipe({ name:
'myPurePipe', pure: true
})
export class MyPurePipe extends
MyPipe{
   
constructor(){ super
(); }
}
@Pipe({ name:
'myImpurePipe', pure: false
})
export class MyImpurePipe extends
MyPipe{
   
constructor(){ super
(); }
}

 

נשתמש ב-Pipes באופן הבאה:

myPurePipe  : {{ 1  | myPurePipe  : 'a' }}

myPurePipe  : {{ 1  | myPurePipe  : 'a' }}
myImpurePipe: {{ 2  | myImpurePipe: 'b' }}

myImpurePipe: {{ 2  | myImpurePipe: 'b' }}

 

תוצאות:

 

Pipe

Type

Num of Instances

Num of Executes

myPurePipe

Pure

1

2

myImpurePipe

Impure

2

Many == Ticks

 

הסברים:

א.    Pipe מסוג pure לא נוצרים מספר מופעים, כלומר זה singleton. המתודה transform מופעלת כאשר יש tick רק עם ה- inputs שונים מה-tick הקודם. במקרה שלנו 1 ו- ‘a’ לא משתנים ולכן ה- myPurePipe  פועל רק פעם אחת  כפול מספר הפעמים שאני משתמש בו בתבנית, כלומר 2.

ב.     Pipe מסוג impure נוצר instance כמספר הפעמים שהוא מופיעה בתבנית. בנוסף הוא מופעל כל tick.

שאלה: באיזה סוג של pipe אני צריך להשתמש?

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

Pipe שהוא impure הוא לא דטרמיניסטית ולכן צריך להפעיל אותו בכל tick. יש סבירות גבוהה שאנחנו נצטרך לשמור נתונים שונים לכל pipe שמופיע בתבנית ולכן אנחנו צריכים מספר מופעים כדי לשמור את הנתונים השונים. דוגמא:

@Pipe({ name: 'sumRandomPipe', pure : false })
export class SumRandomPipe implements
PipeTransform {
    sum:
number = 0
;
    transform(min:
number, max:number
) {
       
this.sum +=  Math.floor(Math.random() * (max – min + 1
)) + min;
       
return this
.sum;
    }
}

 

ביצועים:

כל אירוע אסיכרוני, timers ,UI ותקשורת גורמים ל-ticks מכאן נובע שב- impure צריך לבצע כל פעם מחדש את המתודה transform בלי קשר אם הקלט השתנה או לא, זה יכול לגרום לנו לבעיית ביצועים. בנוסף לא נשכח שלכל שימוש ב-pipe נוצר instance ושימוש מופרז יכול ליצור בעיות של זיכרון.

כמו תמיד כל תגובה מבורכת.

אשמח לראות אותכם בקורס שלי על AngularJS 2.

 

 

מודעות פרסומת
 
השארת תגובה

פורסם ע"י ב- יוני 15, 2016 ב- Angular 2.0

 

כתיבת תגובה

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

הלוגו של WordPress.com

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

תמונת Twitter

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

תמונת Facebook

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

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

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

מתחבר ל-%s

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