Da li netko početnik može jasno objasniti razliku između usluge, tvornice i pružatelja usluga u tvrtki AngularJS?


Odgovor 1:

AngularJS: Razlika između usluge i dobavljača u odnosu na tvornicu

Ako to pretražujete, vjerojatno zato što pokušavate shvatiti koji je pravi način za vas. Ili zato što ste naišli na njih troje i pokušavate utvrditi razliku jer izgledaju slično.

Ako mislite da su slični - u pravu ste. Vrlo su slični. U stvari su svi ista stvar.

Svi su oni davatelji usluga. Tvornica i usluga samo su posebni slučajevi davatelja, ali sve što želite možete ostvariti samo davateljem usluga. Pokazat ću ti.

Pružatelj usluga

Stvorit ćemo pružatelja usluga koji vraća vrijednost i jednostavno prikazati tu vrijednost, to biste učinili:

var mod = angular.module ("MyModule", []); mod.provider ("myProvider", function () {this. $ get = function () {return "Moja vrijednost";};}); mod.controller ("MyController", funkcija (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); KONZOLNI IZLAZ MyController - mojProvider: Moja vrijednost

Primjerak interaktivnog rada može se naći na: JS Fiddle.

Eto, tako da „pružatelj usluga“ u srcu dopuštamo da vam „pružimo“ vrijednost. Ta vrijednost može biti bilo što. U ovom slučaju to je niz sa vrijednošću "Moja vrijednost", ali lako bi mogao biti funkcija ili objekt.

Napomena u daljnjim uzorcima koda koje ću isključiti tag i definicija mod-a za potrebe održavanja kratkih i točnih isječaka koda.

Angular dobiva vrijednost samo jednom - ikad

Imajte na umu da ugaono "dobiva" vrijednost samo jednom, bez obzira koliko puta se dobavljač ubrizgao. To znači da poziva $ get () samo jednom ikad, pohranjuje vrijednost koju nudi $ get () i daje vam istu pohranjenu vrijednost svaki put.

Da vam pokažem što mislim, stvorit ću još jedan kontroler i ponovno uvesti dobavljača s izjavom konzole, tako da možete vidjeti što se događa.

mod.provider ("myProvider", function () {this. $ get = function () {console.log ("MyProviderFunction. $ get () pozvan."); // ADDED this line return "Moja vrijednost";}; }); mod.controller ("MyController", funkcija (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); mod.controller ("MyController2", funkcija (myProvider) {// ADDED this console console.log ("MyController2 - myProvider:" + myProvider);}); KONZOLIRAJTE IZLAZ MyProviderFunction. $ Get () pozvan. MyController - myProvider: Moja vrijednost MyController2 - myProvider: Moja vrijednost

Otvoreno u JS Fiddle

Kao što vidite, funkcija $ get () nazvana je samo jednom.

Imajte na umu da smo napisali hrpu koda za davatelja usluga samo u svrhu stvaranja metode koja se zove $ get (). Zašto umjesto davanja kutnoj funkciji koja definira drugu funkciju, zašto ne bismo joj jednostavno dali funkciju koju želimo izvesti izravno? Pa možete, to je ono što Angular naziva fabrikom.

Tvornica

S tvornicom samo osiguravate funkcijsko tijelo za metodu $ get, a Angular radi ostalo. Ispod je kako novi kôd izgleda, jer ćete vidjeti da se ponaša potpuno isto.

mod.factory ("mojProvider", funkcija () {// PROMJENJEN "dobavljač" u "tvornički" console.log ("Tvornička funkcija se zove."); vratite "Moja vrijednost";}); mod.controller ("MyController", funkcija (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); mod.controller ("MyController2", funkcija (myProvider) {console.log ("MyController2 - myProvider:" + myProvider);}); KONZOLNI IZLAZ Tvori se tvornička funkcija. MyController - myProvider: Moja vrijednost MyController2 - myProvider: Moja vrijednost

Otvoreno u JS Fiddle

Sada se možda pitate zašto biste uopće koristili davatelja ako istu stvar možete postići s tvornicom s manje koda. Postoji nekoliko razloga i pozabavit ću se tim kasnije, a sada želim ostati vjerna naslovu ovog posta i pozabaviti se razlikom između ta dva (dobavljač i tvornica) i usluge.

Do sada smo vratili jednostavnu vrijednost niza, ali u praksi ono što vjerojatno želimo vratiti većinu vremena je objekt. Pa, to ne bi baš promijenilo naš primjer, vrlo lako možemo zamijeniti string koji vraćamo umjesto njega.

Na primjer, učinimo to vraćanjem objekta koji sadrži funkciju koja se zove getValue (). Sada postoji nekoliko načina na koje možete kreirati objekt u JavaScriptu, mi ćemo se poslužiti pristupom "Konstruktor objekta" gdje ćemo stvoriti funkciju koja obitava objekt svojstvima i funkcijama, a novu ključnu riječ koristi za njegovo stvaranje.

funkcija MyObject () {// ADDED our object constructor this.getValue = function () {return "Moja vrijednost"; }; } mod.factory ("mojProvider", funkcija () {console.log ("Tvornička funkcija zove."); vratite novi MyObject (); // USPOREDITE instancu našeg objekta}); mod.controller ("MyController", funkcija (myProvider) {console.log ("MyController - myProvider:" + myProvider.getValue ()); // PROMENJENO na poziv getValue ()}); mod.controller ("MyController2", funkcija (myProvider) {console.log ("MyController2 - myProvider:" + myProvider.getValue ()); // PROMIJENJENO na poziv getValue ()}); KONZOLNI IZLAZ Tvori se tvornička funkcija. MyController - myProvider: Moja vrijednost MyController2 - myProvider: Moja vrijednost

Otvoreno u JS Fiddle

Sada želim napraviti jednu malu prilagodbu ovome jer će to lijepo dovesti u sljedeći koncept. U našem primjeru stvaramo MyObject () funkciju „Object Constructor“, ali budući da je instanciramo samo na jednom mjestu, umjesto nje možemo koristiti anonimnu funkciju.

Ovo je vrlo mali trzaj. Umjesto ovoga:

funkcija MyObject () {this.getValue = function () {return "Moja vrijednost"; }; } mod.factory ("mojProvider", funkcija () {console.log ("Tvornička funkcija zove."); vratite novi MyObject ();});

To radimo:

mod.factory ("mojProvider", funkcija () {console.log ("Tvornička funkcija se zove."); vrati novu funkciju () {// INLINIRAN je naš konstruktor objekta this.getValue = function () {return "Moja vrijednost"; };};});

Dakle, cijela stvar sada izgleda ovako:

mod.factory ("mojProvider", funkcija () {console.log ("Tvornička funkcija se zove."); vrati novu funkciju () {// INLINIRAN je naš konstruktor objekta this.getValue = function () {return "Moja vrijednost"; };};}); mod.controller ("MyController", funkcija (myProvider) {console.log ("MyController - myProvider:" + myProvider.getValue ());}); mod.controller ("MyController2", funkcija (myProvider) {console.log ("MyController2 - myProvider:" + myProvider.getValue ());});

Otvoreno u JS Fiddle

Budući da se cijela naša tvornica sastoji od jednog objekta, ne bi li bilo lijepo kada bismo mogli samo dati Angularnu funkciju konstruktora objekata umjesto da napišemo tu fabriku koja izgleda dobro. Pa, imate sreće, upravo je to usluga.

Na usluzi

Ovdje je isti taj kod, osim korištenja usluge umjesto tvornice.

mod.service ("mojProvider", funkcija () {// PROMIJENJENO "tvornica" u "servis" // NAPOMENA da je jedina funkcija koja se prenosi je konstruktor objekta od prije this.getValue = function () {return "Moja vrijednost" ;};}); mod.controller ("MyController", funkcija (myProvider) {console.log ("MyController - myProvider:" + myProvider.getValue ());}); mod.controller ("MyController2", funkcija (myProvider) {console.log ("MyController2 - myProvider:" + myProvider.getValue ());}); KONZOLNI IZLAZ MyController - mojProvider: Moja vrijednost MyController2 - mojProvider: Moja vrijednost

Otvoreno u JS Fiddle

Pružatelj vs tvornica vs usluga

Dakle, ukratko, svi su davatelji usluga, tvornica i usluga. Tvornica je poseban slučaj dobavljača kada sve što trebate od vašeg davatelja usluga je $ get () funkcija. Omogućuje vam pisanje s manje koda. Usluga je poseban slučaj tvornice kada želite vratiti primjerak novog objekta, s istom pogodnošću pisanja manje koda.

Kada koristiti jedan nasuprot drugom?

Odgovor je da koristite najspecijaliziraniju verziju koja postiže vaš cilj. Recimo na primjer da vraćate postojeći objekt definiran negdje drugdje koji uzima argumente konstruktora. Argumente ne možete proslijediti usluzi, pa biste umjesto toga nazvali tvornicu.

mod.factory ("mojProvider", funkcija () {console.log ("Tvornička funkcija zove."); vratite novi SomeMessageBoxClass ("prilagođeni argument");});

Jedan od glavnih faktora odlučivanja između pružatelja usluga i tvornice je da li želite konfigurirati objekt koji je generiran prije nego što se generira. To radite pozivanjem module.config () i dobivanjem instance za samog davatelja usluga (umjesto objekta koji je vratio dobavljač). To radite tako da dodate "Dobavljač" na kraj imena vašeg davatelja usluga kada ga ubrizgavate.

Evo primjera kako biste to učinili:

mod.provider ("mojProvider", funkcija () {this.value = "Moja vrijednost"; this.setValue = funkcija (newValue) {this.value = newValue;}; this. $ get = function () {vrati ovo. vrijednost;};}); mod.controller ("MyController", funkcija (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); mod.config (funkcija (myProviderProvider) {// ADDED config section // Imajte na umu dodatni sufiks "Provider" myProviderProvider.setValue ("Nova vrijednost");});

To obuhvaća kada trebate koristiti tri pružatelja usluga: dobavljača, tvornice i usluga. Postoji još jedan pružatelj usluga koji nije ovdje spomenut, a radi se o još jednom posebnom slučaju i to je davatelj vrijednosti.

Ako se sjećate kada smo prvi put predstavili tvorničkog dobavljača, dali smo jednostavan primjer vraćanja niza vrijednosti. To je izgledalo ovako:

mod.factory ("myProvider", function () {return "Moja vrijednost";});

Pa, mogli smo to zapravo i učiniti pomoću davatelja vrijednosti, a opet je korist što to možete učiniti s manje koda. Donji kôd čini isto kao gornji kod:

mod.value ("mojProvider", "Moja vrijednost");

Pa kad biste koristili jedno nasuprot drugom? Vjerojatno biste koristili factoryprovider kada želite izračunati vrijednost na temelju nekih drugih podataka, primjerice podataka drugog davatelja vrijednosti ili vanjskog izvora. I / ili kada želite izračunati vrijednost ako i samo kada je prvi put zatražite. Evo nekoliko primjera:

// Primjer gdje tvornica ovisi o dobavljaču "value" mod.value ("multiple", 3); mod.factory ("vrijednost", funkcija (višestruka) {return 10 * multiple;}); // Primjer gdje tvornica ovisi o vanjskim podacima mod.factory ("vrijednost", funkcija (više) {var multiple = getDateFromExternalPage (); vratite 10 * multiple;});

Jesam li zaključio da je ta vrijednost jedini drugi pružatelj usluga? Pa lagao sam, postoji još jedna koja je vrlo slična vrijednosti s dvije manje razlike. Tog davatelja naziva se konstantnim.

Razlika između vrijednosti i konstante je u tome što je vrijednost navedena konstanta dostupna tijekom faze konfiguracije. Možda se sjećate ranije da sam spomenuo da je dobavljač dostupan iz faze konfiguracije, ali servis i tvornica nisu.

Pa to je isto za vrijednost i konstantno. iz faze konfiguracije dostupna je konstanta, a vrijednost nije. Druga razlika je u tome što naziv implicira da ne možete promijeniti vrijednost konstante. Prva vrijednost koju joj dodijelite je vrijednost koju zadržava, a ako kasnije pokušate dodijeliti drugu vrijednost, bit će zanemarena.

Evo primjera:

mod.value ("myValue", "Prva dodjela"); mod.value ("myValue", "Second Assignment"); mod.constant ("myConstant", "First Assignment"); mod.constant ("myConstant", "Second Assignment"); mod.controller ("MyController", funkcija (myValue, myConstant) {console.log ("myValue:" + myValue); console.log ("myConstant:" + myConstant);}); KONZOLIRANJE IZLAGA myValue: Druga dodjela myConstant: Prva dodjela

Evo sažetka kada trebate koristiti svaku od njih:

vrijednost

Pružate jednostavnu doslovnu vrijednost.

mod.value ("myValue", 10);
    

konstantno

Morate imati pristup toj vrijednosti tijekom faze konfiguracije. (pomoću .config ())

mod.constant ("myValue", 10); mod.config (funkcija (myValue) {console.log (myValue);});

tvornica

Vrijednost koju dajete treba izračunati na temelju drugih podataka.

mod.factory ("myFactory", funkcija () {return 10;});
        

servis

Vraćate predmet metodama.

mod.service ("myService", function () {var name = "Bob"; this.setName = funkcija (newName) {this.name = newName;}; this.getName = function () {return this.name;} });
        

usluga

Tijekom konfiguracijske faze želite biti u mogućnosti konfigurirati objekt koji će se stvoriti prije nego što se kreira.

mod.provider ("pozdrav", funkcija () {var ime; ovo.setName = funkcija (novoName) {ime = novoName;}; ovo. $ get = funkcija () {vrati novu funkciju () {this.sayHi = funkcija () {console.log ("Bok" + ime;};};};}); mod.config (funkcija (greeterProvider) {greeterProvider.setName ("John");});
        

Posljednji put za točkom ovdje je slika davatelja usluga s istaknutim dijelovima tvornice, vrijednosti i usluge:


Odgovor 2:

Interno AngularJS koristi tvornicu za stvaranje uslužnog objekta, a pružatelja usluga za stvaranje tvorničkog objekta.

Tvornica ima,

  1. Stvaranje objekta / instanceConstruct / inicijalizacija stvorenog objekta / instance vraćaju stvoreni objekt / instancu

Za postavljanje konteksta, razmotrite Angular Factory kao apstraktni oblik tvorničkog dizajna. AngularJS vam daje mogućnost da kreirate po vašem izboru objekt po vašoj tvorničkoj metodi, vratite stvoreni objekt da bi se aplikacija koristila kao usluga.

Ispod primjera, imate izbor između dva gateway-a za plaćanje, netko tko koristi vaš kôd / knjižnicu, vaš tvornički način može odabrati hoće li stvoriti Paypal ili Stripe objekt. Ovo je vrlo slično apstraktnoj tvornici, korisnici PaymentService nisu svjesni koja se usluga koristi za pristup mrežnom platnom prijelazu.

var myModule = angular.module ('myModule', []); myModule.constant ("PaymentGatewayName", "Stripe"); // ili "Paypal" myModule.factory ('PaymentService', funkcija (PaymentGatewayName) {var PaymentService; // vi odlučujete koji ćete objekt stvoriti na temelju poslovnih potreba // StripeGateway i PaypalGateway su klase JavaScript // sadrži specifičnu implementaciju Gateway-a ako ( PaymentGatewayName == "Stripe") {PaymentService = novi StripeGateway (); // prilagođeni kôd za inicijalizaciju gateway-a pruge} else (PaymentGatewayName == "Paypal") {PaymentService = new PaypalGateway (); // prilagođeni kôd za inicijalizaciju paypal} / / prilagođeni kôd za inicijalizaciju returnService return PaymentService;});

Ovako kôd usluge izgleda ovako, primijetili ste "ovu" ključnu riječ, to znači da je objekt već stvorio Angular Core, više nemate kontrolu nad stvaranjem objekta.

var myModule = angular.module ('myModule', []); myModule.service ('Cache', function () {var localVariable = ""; // ne može se pristupiti izvan ove.cacheSize = 5; // 5 MB this.objectsSize = 1000; // max 1000 objekata ovo.put = funkcija (ključ, vrijednost) {...} this.get = funkcija (get) {return ...}});

Odgovor 3:

Veliko pitanje u tvrtki AngularJS: usluga protiv fabrike v / s dobavljača. Što trebam koristiti?

Na Internetu postoje tone resursa koji tematiziraju. Ispada da se ovo pitanje i dalje pojavljuje svaki tjedan ili tako nekako na različitim kanalima, a čak i nakon što pročitate prvih deset odgovora na StackOverflow, još uvijek nije vrlo jasno.

Ako mislite da su slični - u pravu ste. Vrlo su slični. U stvari su svi ista stvar. Svi su oni davatelji usluga.

Pročitajte cijeli članak -> Usluga AngularJS: Dobavljač usluga v / s Fabrika v / s - Pripremite intervju za 15 minuta