מה ההבדל בין מפעל לשירות ב- AngularJS ומתי יש להשתמש בכל אחד מהם?


תשובה 1:
angular.service ('apiService', apiServiceFunction);
angular.factory ('apiFactory', apiFactoryFunction);

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

מפעל: פונקצית מפעל (קונסטרוקטור) שיצרנו תיקרא.

apiFactoryInjected <--- apiFactoryFunction ()

שירות: פונקציית שירות שאנו כותבים תופעל (חדש)

  apiServiceInjected <---- apiFactoryFunction חדש ()

בלבול? ובכן, עיין במאמר הבא: שירות AngularJS לעומת מפעל - עם דוגמה


תשובה 2:

ההבדל בין מפעל לשירות הוא בדיוק כמו ההבדל בין פונקציה לאובייקט

ספק מפעל

  • נותן לנו את ערך ההחזרה של הפונקציה כלומר. אתה פשוט יוצר אובייקט, מוסיף לו מאפיינים ואז מחזיר את אותו אובייקט. כשאתה מעביר שירות זה לבקר שלך, המאפיינים האלה על האובייקט יהיו זמינים כעת בבקר זה דרך המפעל שלך. (תרחיש היפותטי) יכול להשתמש בתלות אחרות המשמשות בדרך כלל כאשר מופע השירות מצריך היגיון יצירה מורכב לשימוש בשירותים שאינם ניתנים להגדרה אם אתה משתמש באובייקט, אתה יכול להשתמש בספק המפעל. Syntax: module.factory ('מפעל שם', פונקציה);

ספק שירות

  • נותן לנו מופע של פונקציה (אובייקט) - אתה פשוט מיידית למילת המפתח 'חדשה' ותוסיף מאפיינים ל'זה 'והשירות יחזיר' זה '. כשאתה מעביר את השירות לבקר שלך, אותם נכסים ב- 'זה' יהיה זמין כעת באותו בקר באמצעות השירות שלך. (תרחיש היפותטי) אתה יכול להוסיף מאפיינים ופונקציות לאובייקט שירות באמצעות מילת מפתח זו תלות מוזרקים כטיעוני קונסטרוקטור משמש לוגיקת יצירה פשוטה אם אתה משתמש בכיתה אתה יכול להשתמש בספק השירות סינטקס: module.service ('שירות שם', פונקציה );

תכונות נפוצות

  • Singleton וייווצר רק פעם אחת רכיב לשימוש חוזר משמש לתקשורת בין בקרים כדי לשתף נתונים לא ניתן להזריק לפונקציה .config ().

מקור (הסבר יפה) - AngularJS: מפעל ושירות?

פרטים נוספים - שירות לעומת מפעל - אחת ולתמיד

מקווה שזה עוזר!!


תשובה 3:

אני בטוח שלא יכול להיות הסבר טוב יותר מזה!

רגע מה? עוד פוסט / מאמר שעונה על השאלה הגדולה: שירות מול מפעל, במה עלי להשתמש? כן, נראה שאין צורך בכך יותר, מכיוון שיש המון משאבים באינטרנט הדנים בנושא זה. מסתבר ששאלה זו עדיין מופיעה מדי שבוע בערוצים שונים, ואפילו אחרי קריאת עשרת התשובות המובילות ב- StackOverflow, היא עדיין לא כל כך ברורה. למרות זאת, נראה כי גם המשאבים הקיימים באינטרנט אינם מקדמים את הנוהג הטוב ביותר בפועל, במיוחד אם נשקול את התנועות האחרונות של פלטפורמת הרשת. ES6 אני מסתכל עליך!

מאמר זה מסביר אחת ולתמיד את ההבדל בין שירותים למפעלים ומדוע אנו רוצים להעדיף שירותים על פני מפעלים.

תוכן העניינים

  • ההבדל בין שירותים ומפעלים באיזה שירות להשתמש? שירותים מאפשרים לנו להשתמש בשיעורי ES6

ההבדל בין שירותים למפעלים

אוקיי, אז מה ההבדל בין שירות למפעל ב- AngularJS? כידוע לכולנו, אנו יכולים להגדיר שירות כזה:

app.service ('MyService', פונקציה () {
  this.sayHello = פונקציה () {
    console.log ('שלום');
  };
});

.service () היא שיטה במודול שלנו שלוקחת שם ופונקציה המגדירה את השירות. די ישיר. לאחר ההגדרה, נוכל להזריק ולהשתמש בשירות הספציפי הזה ברכיבים אחרים, כמו בקרים, הנחיות ומסננים, כמו זה:

app.controller ('AppController', פונקציה (MyService) {
  MyService.sayHello (); // יומני 'שלום'
});

אוקיי, ברור. עכשיו אותו דבר כמו מפעל:

app.factory ('MyService', פונקציה () {
  חזור {
    sayHello: פונקציה () {
      console.log ('שלום');
    }
  }
});

שוב, .factory () היא שיטה במודול שלנו והיא גם דורשת שם ופונקציה, המגדירה את המפעל. אנו יכולים להזרים ולהשתמש בדבר הזה בדיוק באותה דרך שעשינו עם השירות. עכשיו מה ההבדל כאן?

ובכן, אולי תראו שבמקום לעבוד עם זה במפעל, אנו מחזירים מילולית של אובייקט. למה? מסתבר ששירות הוא פונקציית קונסטרוקטור ואילו מפעל אינו. איפשהו עמוק בתוך העולם הזוויתי הזה, יש את הקוד הזה שמתקשר ל- Object.create () עם פונקציית בניית השירות, כשהוא מתבצע מייד. עם זאת, פונקציה של מפעל היא באמת רק פונקציה שמתקשרת, וזו הסיבה שעלינו להחזיר אובייקט במפורש.

כדי להבהיר זאת מעט יותר, נוכל פשוט להסתכל על קוד המקור Angular. כך נראית פונקציית המפעל ():

מפעל פונקציות (שם, factoryFn, אכיפה) {
  ספק להחזיר (שם, {
    $ get: לאכוף! == שווא? EnceReturnValue (שם, factoryFn): factoryFn
  });
}

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

במילים אחרות, אם אנו מזריקים את MyService לאנשהו, מה שקורה מאחורי הקלעים הוא:

MyServiceProvider. $ Get (); // להחזיר את מופע השירות

בסדר, פונקציות מפעל פשוט יתקשרו, מה עם קוד השירות? הנה קטע נוסף:

שירות פונקציות (שם, בנאי) {
  מפעל להחזר (שם, ['$ מזרק', פונקציה ($ מזרק) {
    להחזיר מזרק $. Instantiate (בנאי);
  }]);
}

אה תראה, מסתבר שכשאנחנו מתקשרים לשירות () זה בעצם מתקשר למפעל (). אבל זה לא רק מעביר את פונקציית בוני השירות שלנו למפעל כפי שהוא. זה עובר פונקציה שמבקשת מהמזרק להפעיל ולהתנגד על ידי הבנאי הנתון. במילים אחרות: שירות מתקשר למפעל מוגדר מראש, שמסתיים כשיטת $ get () אצל הספק המתאים. $ injector.instantiate () היא השיטה המכנה בסופו של דבר Object.create () עם פונקציית הבנאי. לכן אנו משתמשים בזה בשירותים.

אוקיי, אז מסתבר שלא משנה במה אנו משתמשים, שירות () או מפעל (), זה תמיד מפעל שנקרא שיוצר ספק לשירות שלנו. מה שמביא אותנו לשאלה שנשאלה בעיקר בתולדות הזווית: באיזה מהן עלי להשתמש?

באיזה מהן להשתמש?

שאלת השאלה הזו באינטרנט מביאה אותנו לכמה מאמרים ותשובות StackOverflow. הראשונה היא תשובה זו. זה אומר:

"בעיקרון ההבדל בין השירות למפעל הוא כדלקמן:"

app.service ('myService', פונקציה () {

  // שירות הוא רק פונקציית קונסטרוקטור
  // שנקרא עם 'חדש'

  this.sayHello = פונקציה (שם) {
     החזר "היי" + שם + "!";
  };
});

app.factory ('myFactory', פונקציה () {

  // מפעל מחזיר אובייקט
  // אתה יכול להריץ קוד לפני

  חזור {
    sayHello: פונקציה (שם) {
      החזר "היי" + שם + "!";
    }
  }
});

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

מה אם הייתי אומר לך, נוכל לעשות את אותו הדבר בדיוק גם עם שירותים?

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

app.service ('MyService', פונקציה () {

  // נוכל גם לבצע עבודות נוספות כאן
  חזור {
    sayHello: פונקציה () {
      console.log ('שלום');
    };
  }
});

הופלה, אז מה עכשיו? פשוט הבנו שתלוי איך אנו כותבים את השירותים שלנו, כבר אין הבדל בין השניים. השאלה הגדולה נותרה: באיזה מהן עלינו להשתמש?

השירותים מאפשרים לנו להשתמש בשיעורי ES6

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

לדוגמה, אנו יכולים לקחת את הקוד שלנו ולשכתב אותו ב- ES6 כך:

מחלקת MyService {
  תגיד שלום() {
    console.log ('שלום');
  }
}

app.service ('MyService', MyService);

כיתת ES6 היא באמת רק פונקציית בנאי ב- ES5. כתבנו על כך בשימוש ב- ES6 עם Angular היום, אם עדיין לא קראת את המאמר הזה, אני ממליץ לבדוק את זה.

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


תשובה 4:

שירות מפעל לעומת?

אוקיי, נתחיל מהבסיס

ל- Angular שירותים מובנים הכוללים "שירותים" ו"מפעלים "

ב- Factory, אתה יוצר אובייקט, מוסיף לו מאפיינים ומחזיר את אותו אובייקט.

בשירות אתה לא יוצר אובייקט במפורש, Angularjs מפעיל אותו מאחורי הקלעים באמצעות מילת מפתח 'חדשה', בעיקרון הוא בונה את האובייקט בפונקציה של בנאי.

בלבול? מאפשר לפשט את זה באמצעות דוגמה זו.

app.service ('myService', serviceFunction)

app.factory ('myFactory', מפעל פונקציה)

var serviceFunction = פונקציה () {

// כאן תקצה את הערכים לפונקציה זו באמצעות מילת מפתח 'זו'

// מאחורי הקלעים, זוויתית תכריז על זה = {}

this.name = "abc מהשירות",

// להחזיר את זה

}

var factoryFunction = פונקציה () {

var someObject = {}

someObject.name = "abc מהמפעל";

להחזיר someObject.name;

}

app.controller ('myCtrl', פונקציה (myService, myFactory) {

console.log ("נתונים משירות", myService) // o / p serviceFunction: {"name": "abc from service"}

console.log ("נתונים ממפעל", myFactory) // o / p "abc מהמפעל"

})

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

מקווה שזה נותן לך מושג קטן כיצד השירותים והמפעל שונים.

אתה יכול לבקש הסבר נוסף אם אתה רוצה.


תשובה 5:

תודה על ה- A2A. אין באמת הרבה הבדל. אתה יכול לעשות את אותו הדבר בשני הדברים. עם זאת, אני ממליץ לך להישאר עם שירותים. מכיוון ש- JavaScript נע לעבר מבנים "דמויי כיתה", השירותים הם השיטה הטובה ביותר. לדוגמה, אם היה לך שירות ועברת את הפונקציה, פונקציה זו היא למעשה כיתה. לכן, אם הסרת את ה- Angular מהפרויקט שלך, עדיין תוכל להשתמש בכל מהשירות.


תשובה 6:

ההבדל בין שירותים למפעלים

אוקיי, אז מה ההבדל בין שירות למפעל ב- AngularJS? כידוע לכולנו, אנו יכולים להגדיר שירות כזה:

app.service ('MyService', פונקציה () {
  this.sayHello = פונקציה () {
    console.log ('שלום');
  };
});

.service () היא שיטה במודול שלנו שלוקחת שם ופונקציה המגדירה את השירות. די ישיר. לאחר ההגדרה, נוכל להזריק ולהשתמש בשירות הספציפי הזה ברכיבים אחרים, כמו בקרים, הנחיות ומסננים, כמו זה:

app.controller ('AppController', פונקציה (MyService) {
  MyService.sayHello (); // יומני 'שלום'
});

אוקיי, ברור. עכשיו אותו דבר כמו מפעל:

app.factory ('MyService', פונקציה () {
  חזור {
    sayHello: פונקציה () {
      console.log ('שלום');
    }
  }
});

שוב, .factory () היא שיטה במודול שלנו והיא גם דורשת שם ופונקציה, המגדירה את המפעל. אנו יכולים להזרים ולהשתמש בדבר הזה בדיוק באותה דרך שעשינו עם השירות. עכשיו מה ההבדל כאן?

ובכן, אולי תראו שבמקום לעבוד עם זה במפעל, אנו מחזירים מילולית של אובייקט. למה? מסתבר ששירות הוא פונקציית קונסטרוקטור ואילו מפעל אינו. איפשהו עמוק בתוך העולם הזוויתי הזה, יש את הקוד הזה שמתקשר ל- Object.create () עם פונקציית בניית השירות, כשהוא מתבצע מייד. עם זאת, פונקציה של מפעל היא באמת רק פונקציה שמתקשרת, וזו הסיבה שעלינו להחזיר אובייקט במפורש.

כדי להבהיר זאת מעט יותר, נוכל פשוט להסתכל על קוד המקור Angular. כך נראית פונקציית המפעל ():

מפעל פונקציות (שם, factoryFn, אכיפה) {
  ספק להחזיר (שם, {
    $ get: לאכוף! == שווא? EnceReturnValue (שם, factoryFn): factoryFn
  });
}

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

במילים אחרות, אם אנו מזריקים לאתר MyServices, מה שקורה מאחורי הקלעים הוא:

MyServiceProvider. $ Get (); // להחזיר את מופע השירות

בסדר, פונקציות מפעל פשוט יתקשרו, מה עם קוד השירות? הנה קטע נוסף:

שירות פונקציות (שם, בנאי) {
  מפעל להחזר (שם, ['$ מזרק', פונקציה ($ מזרק) {
    להחזיר מזרק $. Instantiate (בנאי);
  }]);
}

אה תראה, מסתבר שכשאנחנו מתקשרים לשירות () זה בעצם מתקשר למפעל (). אבל זה לא רק מעביר את פונקציית בוני השירות שלנו למפעל כפי שהוא. זה עובר פונקציה שמבקשת מהמזרק להפעיל ולהתנגד על ידי הבנאי הנתון. במילים אחרות: שירות מתקשר למפעל מוגדר מראש, שמסיים כשיטת $ get () אצל הספק המתאים. $ injector.instantiate () היא השיטה המכנה בסופו של דבר Object.create () עם פונקציית הבנאי. לכן אנו משתמשים בזה בשירותים.


תשובה 7:

Angular JS עובד על הפרדת חששות. לשם כך זה מסתמך על ארכיטקטורת שירות. בכך ניתנו כמה פונקציות מובנות כמו $ location, $ http וכו '. לכל פונקציה מוקצה משימה יחידה. מדובר בשירותים מובנים אשר מקודמים עם סימן $. אך אם אנו רוצים ליצור שירות משלנו אנו משתמשים בשיטת שירות. שיטת השירות היא שירות ממשק API המשמש ליצירת פונקציות. אלה מופעלים בזמן ההפעלה. בשיטת יד מפעל אחרת אין אפשרות נוספת לשימוש בארכיטקטורה של שירות, היא יכולה לבצע את העבודה שנעשית בשיטת שירות אך היא אינה דומה לשיטת שירות. שיטת fcatory יוצרת אובייקטים בניגוד לשירות שהוא ממשק API ליצירת שיטות. הבה נבין זאת עם דוגמא.

פונקציה getClass ($ http) {
  this.getClass = אחזור פונקציה () {
    להחזיר $ http.get ('class.htm');
  };
}

זוויתי
  .module ('אפליקציה')
  .service ('getClass', getClass);
פונקציה getClass ($ http) {
  חזור {// מחזיר אובייקט
    fetch: פונקציה () {// fuction שהוגדר באותו אובייקט
      להחזיר $ http.get ('class.htm');
    }
  };
}
זוויתי
  .module ('אפליקציה')
  .factory ('getClass', getClass);

תשובה 8:

Angular JS עובד על הפרדת חששות. לשם כך זה מסתמך על ארכיטקטורת שירות. בכך ניתנו כמה פונקציות מובנות כמו $ location, $ http וכו '. לכל פונקציה מוקצה משימה יחידה. מדובר בשירותים מובנים אשר מקודמים עם סימן $. אך אם אנו רוצים ליצור שירות משלנו אנו משתמשים בשיטת שירות. שיטת השירות היא שירות ממשק API המשמש ליצירת פונקציות. אלה מופעלים בזמן ההפעלה. בשיטת יד מפעל אחרת אין אפשרות נוספת לשימוש בארכיטקטורה של שירות, היא יכולה לבצע את העבודה שנעשית בשיטת שירות אך היא אינה דומה לשיטת שירות. שיטת fcatory יוצרת אובייקטים בניגוד לשירות שהוא ממשק API ליצירת שיטות. הבה נבין זאת עם דוגמא.

פונקציה getClass ($ http) {
  this.getClass = אחזור פונקציה () {
    להחזיר $ http.get ('class.htm');
  };
}

זוויתי
  .module ('אפליקציה')
  .service ('getClass', getClass);
פונקציה getClass ($ http) {
  חזור {// מחזיר אובייקט
    fetch: פונקציה () {// fuction שהוגדר באותו אובייקט
      להחזיר $ http.get ('class.htm');
    }
  };
}
זוויתי
  .module ('אפליקציה')
  .factory ('getClass', getClass);

תשובה 9:

Angular JS עובד על הפרדת חששות. לשם כך זה מסתמך על ארכיטקטורת שירות. בכך ניתנו כמה פונקציות מובנות כמו $ location, $ http וכו '. לכל פונקציה מוקצה משימה יחידה. מדובר בשירותים מובנים אשר מקודמים עם סימן $. אך אם אנו רוצים ליצור שירות משלנו אנו משתמשים בשיטת שירות. שיטת השירות היא שירות ממשק API המשמש ליצירת פונקציות. אלה מופעלים בזמן ההפעלה. בשיטת יד מפעל אחרת אין אפשרות נוספת לשימוש בארכיטקטורה של שירות, היא יכולה לבצע את העבודה שנעשית בשיטת שירות אך היא אינה דומה לשיטת שירות. שיטת fcatory יוצרת אובייקטים בניגוד לשירות שהוא ממשק API ליצירת שיטות. הבה נבין זאת עם דוגמא.

פונקציה getClass ($ http) {
  this.getClass = אחזור פונקציה () {
    להחזיר $ http.get ('class.htm');
  };
}

זוויתי
  .module ('אפליקציה')
  .service ('getClass', getClass);
פונקציה getClass ($ http) {
  חזור {// מחזיר אובייקט
    fetch: פונקציה () {// fuction שהוגדר באותו אובייקט
      להחזיר $ http.get ('class.htm');
    }
  };
}
זוויתי
  .module ('אפליקציה')
  .factory ('getClass', getClass);

תשובה 10:

Angular JS עובד על הפרדת חששות. לשם כך זה מסתמך על ארכיטקטורת שירות. בכך ניתנו כמה פונקציות מובנות כמו $ location, $ http וכו '. לכל פונקציה מוקצה משימה יחידה. מדובר בשירותים מובנים אשר מקודמים עם סימן $. אך אם אנו רוצים ליצור שירות משלנו אנו משתמשים בשיטת שירות. שיטת השירות היא שירות ממשק API המשמש ליצירת פונקציות. אלה מופעלים בזמן ההפעלה. בשיטת יד מפעל אחרת אין אפשרות נוספת לשימוש בארכיטקטורה של שירות, היא יכולה לבצע את העבודה שנעשית בשיטת שירות אך היא אינה דומה לשיטת שירות. שיטת fcatory יוצרת אובייקטים בניגוד לשירות שהוא ממשק API ליצירת שיטות. הבה נבין זאת עם דוגמא.

פונקציה getClass ($ http) {
  this.getClass = אחזור פונקציה () {
    להחזיר $ http.get ('class.htm');
  };
}

זוויתי
  .module ('אפליקציה')
  .service ('getClass', getClass);
פונקציה getClass ($ http) {
  חזור {// מחזיר אובייקט
    fetch: פונקציה () {// fuction שהוגדר באותו אובייקט
      להחזיר $ http.get ('class.htm');
    }
  };
}
זוויתי
  .module ('אפליקציה')
  .factory ('getClass', getClass);