RSS

AngularJS Tip 5: AngularJS Arguments

29 יונ

כל מי שמכיר אנגולר יודע שצריך לעבוד על ה-this בתוך controller ולא על ה- $scope. כתבתי על זה הרבה פוסטים שבהם אני מסביר את החשיבות לשים את המתודות על ה- prototype. כיום אני רוצה להראות לכם פונקציה שתמתיק לכם את הגלולה.

כיום שאתם שמים את כל הפונקציות על ה- prototype אתם חיבים לשים את כל ה- arguments על ה-this כדי שיהיה לכם גישה אליהם בתוך הפונקציות שעל ה- prototype. בפוסט AngularJS Tip 4: Dynamic Prototype Patter אני מדגים פתרון אך הוא בעייתי ב- ES6. אז כתבתי את המתודה הבאה:

function argsHelper(annotateNames, annotateValues){
for(var i = 0; i < annotateNames.length; i
++){
this[annotateNames[i]] = annotateValues[i
]
}
}

 

function MainCtrl($http,$log, $scope) {
    argsHelper.call(this, MainCtrl.$inject, arguments);    
    // Now $http, $log and $scope on the this object.

}
MainCtrl.prototype.getFoo = function(){
    this.$http.get('api/foo')
        .then(function(res){
            this.result = res.data;
        }.bind(this));
}
 

 

כמו שאתם רואים הפונקציה  argsHelper יודעת לשים על ה-this את כל ה- arguments, ולכן הם נגישים עכשיו לפונקציות שמוגדרות על ה- prototype.

אשמח לשמוע את דעתכם J

לאנשים שרוצים ללמוד יותר על אנגולר ו-JavaScript ממליץ לכם בחום לבוא לקורס שלי באוגוסט.

Advertisements
 
7 תגובות

פורסם ע"י ב- יוני 29, 2015 ב- AngularJS Tips

 

7 תגובות ל-“AngularJS Tip 5: AngularJS Arguments

  1. Saar

    יוני 29, 2015 at 9:57 am

    היי אייל, ההדרכה שהעברת לנו בנושא JS הייתה ללא ספק ההדרכה הכי טובה שהייתה ב-SAP לפחות ב-5 שנים האחרונות (מאז שאני שם). שוב תודה רבה. סער

     
  2. ערן וייזר

    יוני 29, 2015 at 11:41 am

    אהלן אייל, הטריק מגניב כטריק ואפילו עוזר כטיפ, להבין עוד משהו שקשור לאנגיולר. השאלה אם כדאי להשתמש בזה במערכות גדולות. תסכים איתי ש-argsHelper יזכה לקובץ נפרד בפרוייקט. כשמפתח יסתכל על getFoo, לא יהיה ברור במיידי איך יש גישה ל-http$. האינסטינקט המיידי הוא להסתכל ב-constructor, ושם אין השמה של http$ על this. זה נראה קצת מוזר בהתחלה, עד שרואים שקיימת פונקציה argsHelper שעושה משהו לארגומנטים. ברור שמי שיכנס פנימה יבין, אבל אפשר לחסוך זאת ולהשאיר זאת פשוט וברור. כך שהטיפ מעולה, לדעתי, לצורך הבנה, אני לא בטוח שהייתי משתמש בו בפרוייקט שהרבה מפתחים מעורבים בו, וכל אחד יצטרך לבזבז את הזמן להבין מאיפוא מגיעים הארגומנטים. אבל נהניתי מהרעיון, 🙂

     
  3. Ori Calvo

    יוני 29, 2015 at 5:22 pm

    פתרון יצירתי לבעיה אמיתית. פשוט ויעיל !

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

    https://github.com/oricalvo/controller-di

     
    • eyal.vardi

      יוני 30, 2015 at 12:28 am

      אהבתי מאוד 🙂

       
    • eyal.vardi

      יוני 30, 2015 at 12:31 am

      הפתרון שלי עובד גם ב-service. אם הולכים על פתרון יותר עמוק הייתי משפר את ה- $injector.

       
  4. alonweiss

    יוני 30, 2015 at 4:47 am

    TypeScript עושה את העבודה קצת קלה יותר, כי יש שם תמיכה ב- lambda expressions והם שומרים על this באמצעות משתנה "סודי" שנקרא _this . (קלוז'ר פשוט שלוכד את this הנכון). בעוד שהפתרון שהצעת בהחלט עובד, זה נראה כאילו צריך לכתוב את השורה הזאת עבור כל מתודה בקונטרולר.

    אגב, בcallbacks של פרומיס גם יש בעיה עם this שנעלם וצריך לשחזר.

     

כתיבת תגובה

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

הלוגו של WordPress.com

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

תמונת Twitter

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

תמונת Facebook

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

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

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

מתחבר ל-%s

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