RSS

AngularJS Tip 4: Dynamic Prototype Pattern

21 נוב

אחד הדברים שמאוד מציק לי ב-JavaScript זה השימוש המסיבי ב- this בפונקציות שנמצאות ב- prototype.

function UserCtrl($http,$log,bl){
this._bl
= userBL;
this._$http
= $http;
this._$log
= $log;
// more code
}
UserCtrl.
prototype.update = function
(name,address){
this._bl.update.call(this,name,address.street,address.house
);

    // this._$log(‘this and that’);
//
this
._$http(‘http://this.com’);

};

 

 

אנגולר מזריק לתוך ה-constructor את השירותים, $http, $log, bl ואני חייב לשים אותם על ה- this אם אני רוצה לגשת עליהם בפונקציות שנמצאות על ה- prototype. הסיבה שבגללה אני שם את הפונקציות על ה- prototype כדי שהם לא ישוכפלו כל פעם שקוראים ל- constructor.
ב-
ECMAScript 6 הכתיבה של class תהפוך לקוד עם prototype וגם בשיטה הזאת אפשר לבצע Derived class. דוגמא ל- class ב- ECMAScript 6
.

class UserCtrl {
    constructor($http,$log,bl) { //class constructor
        this._bl = userBL;
        this._$http = $http;
        this._$log = $log;
    }

    update(name,address) { //class method
        this._bl.update.call(this,name,address.street,address.house);
    }
}

 

כמו שאנחנו רואים גם בגירסה 6 ה- this נשאר במתודה של ה-update.

פתרון: Dynamic Prototype Pattern

הסיבה שבה חייבים להשתמש ב-this בתוך הפונקציות כי הם לא מוגדרות בתוך ה- constructor ולכן הם לא יכולות לעשות closure לארגומנטים. אם נשים את המתודות בתוך ה- constructor אנחנו צריכים לוודא שההשמה שלהם לא תקרה יותר מפעם אחת. בגלל שבאנגולר כל ההזרקות שלו הם singleton אפשר לפתור את זה…

function UserCtrl(userBL){
    this.name = userBL.name;
    this.address = userBL.address; 

    // Dynamic Prototype Pattern
    if (typeof this.update != "function"){
        UserCtrl.prototype.update = function(name,address){
            userBL.update.call(this,name,address.street,address.house);
        };
    }

}

 

הסבר:

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

 

זהירות:

אפשר להשתמש בתבנית הזאת וע"י כך להוריד את ה- this בתוך המתודה רק לארגומנטים שב- constructor בגלל שכל הארגומנטים שמוזרקים ע"י ה- $injector באנגולר הם singleton.

זה לא יהיה חכם לגשת ל- var’s שמוגדרים ב-constructor כי הגישה היא רק ל- var’s של ה- constructor הראשון. אם ה- var’s משמשים כ- statics אז אפשר.

 

מה אתם חושבים על זה? בעד או נגד?

Advertisements
 
השארת תגובה

פורסם ע"י ב- נובמבר 21, 2014 ב- AngularJS Tips

 

כתיבת תגובה

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

הלוגו של WordPress.com

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

תמונת Twitter

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

תמונת Facebook

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

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

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

מתחבר ל-%s

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