Kezdõknek tud valaki világosan megmagyarázni a szolgáltatás, a gyár és a szolgáltató közötti különbséget az AngularJS-ben?


Válasz 1:

AngularJS: A szolgáltatás és a szolgáltató közötti különbség a gyár között

Ha erre keres, akkor valószínűleg azért van, mert megpróbálja kitalálni, melyik a legalkalmasabb használni. Vagy azért, mert megismerkedtél ezekkel a hárman, és megpróbálják meghatározni a különbséget, mert hasonlónak tűnnek.

Ha úgy gondolja, hogy hasonlóak - igazad van. Nagyon hasonlóak. Valójában mindegyik ugyanaz.

Mindegyik szolgáltató. A gyár és a szolgáltatás csak a szolgáltató különleges esetei, de mindazt a szolgáltatót használhatja, amelyet csak akar. Megmutatom.

A Szolgáltató

Létrehozunk egy szolgáltatót, amely visszatér egy értéket, és egyszerűen megjeleníti ezt az értéket, ezt teheti:

var mod = angular.module ("MyModule", []); mod.provider ("myProvider", function () {this. $ get = function () {return "My Value";};}); mod.controller ("MyController", funkció (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); KONZOL KIMENET MyController - myProvider: Saját érték

Egy működő interaktív példa megtalálható a JS Fiddle webhelyen.

Itt tehát a lényegében egy „szolgáltató” adjon meg értéket. Ez az érték bármi lehet. Ebben az esetben ez egy „Saját érték” értékű karakterlánc, de könnyen lehetett függvény vagy objektum.

Megjegyzés a további kódmintákban kizárom a címke és a mod meghatározása a kódrészletek rövid és lényeges megtartása céljából.

A szög csak egyszer kapja meg az értéket

Vegye figyelembe, hogy a szög csak egyszer kapja meg az értéket, függetlenül attól, hogy hányszor adagolják a szolgáltatót. Ez azt jelenti, hogy a $ get () csak egyszer hívja meg, tárolja a $ get () által megadott értéket, és minden alkalommal ugyanazt a tárolt értéket adja meg.

Hogy megmutassam, mire gondolok, új vezérlőt hozok létre, és újra beadom a szolgáltatónak egy konzolnyilatkozatot, hogy láthassa, mi történik.

mod.provider ("myProvider", function () {this. $ get = function () {console.log ("MyProviderFunction. $ get () call."); // // hozzáadva ezt a sort "My Value";}; }); mod.controller ("MyController", funkció (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); mod.controller ("MyController2", funkció (myProvider) {// hozzáadta ezt a vezérlőpultot.log ("MyController2 - myProvider:" + myProvider);}); KONZOL KIMENET MyProviderFunction. $ Get () hívott. MyController - myProvider: Saját érték MyController2 - myProvider: Saját érték

Nyissa meg a JS Fiddle-ben

Mint látható, a $ get () függvényt csak egyszer hívták meg.

Vegye figyelembe, hogy egy csomó kódot írtunk a szolgáltatónak csak a $ get () nevű módszer létrehozása céljából. Miért nem ahelyett, hogy egy szögfüggvényt megadna egy másik funkciót meghatározó függvénynek, miért nem adja meg neki azt a funkciót, amelyet közvetlenül akarunk futtatni? Nos, te is tudod, amit Angular gyárnak hív.

Egy gyár

Egy gyárral csak a $ get metódus funkcióját adja meg, a többi pedig Angular. Az alábbiakban látható az új kód, mivel láthatja, hogy pontosan ugyanaz viselkedik.

mod.factory ("myProvider", function () {// VÁLTOZTATOTT "szolgáltatót" a "gyári" console.log-ra ("Gyári funkciót hívnak."); Vissza a "Saját érték";}); mod.controller ("MyController", funkció (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); mod.controller ("MyController2", funkció (myProvider) {console.log ("MyController2 - myProvider:" + myProvider);}); KONZOL KIMENET Gyári funkció meghívása. MyController - myProvider: Saját érték MyController2 - myProvider: Saját érték

Nyissa meg a JS Fiddle-ben

Most azon tűnődhet, vajon miért használná valaha a szolgáltatót, ha ugyanezt tudja elérni egy kevesebb kóddal rendelkező gyárral is. Van néhány oka, és később ezt megvizsgálom, most szeretnék hű maradni a bejegyzés címéhez, és kitérni a kettő (szolgáltató és gyár) és egy szolgáltatás közötti különbségre.

Eddig visszatértünk egy egyszerű karakterláncértékre, de a gyakorlatban az, amit valószínűleg legtöbbször vissza akarunk adni, objektum. Nos, ez nem változtatná meg a példánkat, nagyon egyszerűen kicserélhetjük azt a karakterláncot, amelyet objektummal adunk vissza.

Tegyük fel például egy getValue () függvényt tartalmazó objektum visszaadásával. Most már többféle módon lehet objektumot létrehozni a JavaScript-ben. Az „Object Constructor” megközelítést fogjuk használni, ahol létrehozunk egy olyan funkciót, amely egy objektumot tulajdonságokkal és funkciókkal töltsön fel, és az új kulcsszót használja az azonnali létrehozásához.

MyObject () függvény {// HOZOTT objektum-konstruktorunkat this.getValue = function () {return "Saját érték"; }; } mod.factory ("myProvider", function () {console.log ("Gyári függvényt hívtunk."); visszatér az új MyObject (); // Objektumunk példányának létrehozása}); mod.controller ("MyController", funkció (myProvider) {console.log ("MyController - myProvider:" + myProvider.getValue ()); // VÁLTOZOTT a getValue ()} hívására); mod.controller ("MyController2", funkció (myProvider) {console.log ("MyController2 - myProvider:" + myProvider.getValue ()); // VÁLTOZOTT a getValue ()} hívására); KONZOL KIMENET Gyári funkció meghívása. MyController - myProvider: Saját érték MyController2 - myProvider: Saját érték

Nyissa meg a JS Fiddle-ben

Most egy apró csípést szeretnék tenni ehhez, mert ez szépen vezet a következő koncepcióhoz. Példánkban létrehozjuk a MyObject () „Object Constructor” függvényt, de mivel csak egy helyen készítjük el, akkor anonim funkciót használhatunk.

Ez egy nagyon kis csípés. Ehelyett:

funkció MyObject () {this.getValue = function () {return "Saját érték"; }; } mod.factory ("myProvider", function () {console.log ("Gyári függvényt hívtak."); új MyObject ();});

Ezt csináljuk:

mod.factory ("myProvider", function () {console.log ("Gyári függvényt hívtunk."); visszatér új függvény () {// INLINED objektum-kivitelezőnk this.getValue = function () {return "My Value"; };};});

Tehát az egész most így néz ki:

mod.factory ("myProvider", function () {console.log ("Gyári függvényt hívtunk."); visszatér új függvény () {// INLINED objektum-kivitelezőnk this.getValue = function () {return "My Value"; };};}); mod.controller ("MyController", funkció (myProvider) {console.log ("MyController - myProvider:" + myProvider.getValue ());}); mod.controller ("MyController2", funkció (myProvider) {console.log ("MyController2 - myProvider:" + myProvider.getValue ());});

Nyissa meg a JS Fiddle-ben

Mivel az egész gyárunk egyetlen objektumból áll, nem lenne jó, ha csak Angular-nak adnánk az objektum-kivitelező funkciót, ahelyett, hogy ezt a funky kinézetű gyárat írnánk. Nos, szerencséd van, pontosan ez a szolgáltatás.

Az Ön szolgálatában

Itt ugyanaz a kód, kivéve a szolgáltatást gyári helyett.

mod.service ("myProvider", function () {// VÁLTOZTATOTT "gyár" "service" -re // MEGJEGYZÉS: az egyetlen átadott függvény az Object Constructor, amely korábban this.getValue = function () {return "My Value" ;};}); mod.controller ("MyController", funkció (myProvider) {console.log ("MyController - myProvider:" + myProvider.getValue ());}); mod.controller ("MyController2", funkció (myProvider) {console.log ("MyController2 - myProvider:" + myProvider.getValue ());}); KONZOL KIMENET MyController - myProvider: My Value MyController2 - myProvider: My Value

Nyissa meg a JS Fiddle-ben

Szolgáltató vs gyár vs szolgáltatás

Tehát összefoglalva: a szolgáltató, a gyár és a szolgáltatás mind szolgáltatók. A gyár a szolgáltató különleges esete, amikor a szolgáltatónál csak egy $ get () függvényre van szüksége. Ez lehetővé teszi, hogy kevesebb kóddal írja be. A szolgáltatás egy gyár különleges esete, amikor új objektum példányát szeretné visszaadni, azzal az előnnyel, hogy kevesebb kódot írna.

Mikor kell használni az egyiket a másikkal szemben?

A válasz az, hogy a leginkább specializálódott verziót használja, amely teljesíti a célt. Tegyük fel például, hogy valahol máshol definiált meglévő objektumot ad vissza, amely konstruktor argumentumokat vesz fel. Nem továbbíthat érveket a szolgáltatásnak, ezért inkább gyári hívást kezdeményez.

mod.factory ("myProvider", function () {console.log ("Gyári függvényt hívtunk."); új SomeMessageBoxClass ("egyéni argumentum");});

A szolgáltató és a gyár közötti döntés egyik fő tényezője, hogy szeretné-e konfigurálni az előállított objektumot a létrehozása előtt. Ezt úgy teheti meg, hogy felhívja a module.config () -ot, és egy példányt kap magának a szolgáltatónak (a szolgáltató által visszaadott objektum helyett). Ezt úgy teheti meg, hogy a „Szolgáltató” kifejezést a szolgáltató neve végére illeti, amikor befecskendezi.

Íme egy példa erre:

mod.provider ("myProvider", function () {this.value = "My Value"; this.setValue = function (newValue) {this.value = newValue;}; this. $ get = function () {return this. érték;};}); mod.controller ("MyController", funkció (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); mod.config (függvény (myProviderProvider) {// KIEGÉSZÍTETT konfigurációs szakasz // Vegye figyelembe az extra "Szolgáltató" utótagot myProviderProvider.setValue ("Új érték");});

Ez magában foglalja a három szolgáltató igénybevételének idejét: szolgáltató, gyár és szolgáltatás. Van egy további szolgáltató, amelyet itt nem említettek, ez egy újabb különleges eset, és ez az érték szolgáltatója.

Ha emlékszel, amikor először bemutattuk a gyári szolgáltatót, akkor az egyszerű példát adtuk meg egy string érték visszaadására. Ez így néz ki:

mod.factory ("myProvider", function () {return "My Value";});

Nos, valójában ezt az érték-szolgáltató használatával is megtehettük volna, ismét az az előnye, hogy kevesebb kóddal meg tudjuk csinálni. Az alábbi kód ugyanazt teszi, mint a fenti kód:

mod.value ("myProvider", "My Value");

Tehát mikor használná az egyiket a másikkal szemben? Valószínűleg akkor használja a gyári szolgáltatót, ha az értéket valamilyen más adat, például egy másik szolgáltató vagy egy külső forrás adatai alapján szeretné kiszámítani. És / vagy amikor az értéket csak akkor kell kiszámítani, amikor csak először kérik. Íme néhány példa:

// Példa, ahol a gyár egy "érték" szolgáltatótól függ a mod.értéktől ("többszörös", 3); mod.factory ("érték", funkció (többszörös) {visszatérés 10 * többszörös;}); // Példa, ahol a gyár a külső adatoktól függ. Mod.factory ("érték", függvény (többszörös) {var multiple = getDateFromExternalPage (); visszatérés 10 * több;});

Arra gondoltam, hogy ez az érték volt az egyetlen másik szolgáltató? Nos, hazudtam, van egy másik, amely nagyon hasonlít az értékre két kisebb különbséggel. Ezt a szolgáltatót állandónak hívják.

Az érték és az állandó közötti különbség az, hogy az állandó használatával megadott érték elérhető a konfigurációs szakaszban. Korábban emlékezhet arra, hogy megemlítettem, hogy a szolgáltató a konfigurációs szakaszból elérhető, de a szerviz és a gyár nem.

Nos, ugyanaz az érték és állandó. állandó érhető el a konfigurációs fázistól, és az érték nem. A másik különbség az, hogy a név azt sugallja, hogy az állandó értékét nem lehet megváltoztatni. Az első érték, amelyet hozzárendel, az az érték, amelyet megtart, ha később megpróbál más értéket rendelni, akkor azt figyelmen kívül hagyja.

Íme egy példa:

mod.value ("myValue", "Első hozzárendelés"); mod.value ("myValue", "Second Assignment"); mod.constant ("myConstant", "Első hozzárendelés"); mod.constant ("myConstant", "Második hozzárendelés"); mod.controller ("MyController", funkció (myValue, myConstant) {console.log ("myValue:" + myValue); console.log ("myConstant:" + myConstant);}); KONZOL KIMENET myValue: Második hozzárendelés myConstant: Első hozzárendelés

Itt van egy összefoglaló arról, mikor kell mindegyiket használni:

érték

Ön megad egy egyszerű szó szerinti értéket.

mod.value ("myValue", 10);
    

állandó

A konfigurációs szakaszban hozzá kell férnie ehhez az értékhez. (a .config () használatával)

mod.constant ("myValue", 10); mod.config (függvény (myValue) {console.log (myValue);});

gyár

A megadott értéket más adatok alapján kell kiszámítani.

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

szolgáltatás

Objektumot ad vissza módszerekkel.

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

ellátó

Azt szeretné, hogy a konfigurációs szakaszban konfigurálhassa azt az objektumot, amelyet létrehozni fog a létrehozása előtt.

mod.provider ("üdvözlő", function () {var név; this.setName = function (newName) {name = newName;}; ez. $ get = function () {return new function () {this.sayHi = function () {console.log ("Szia" + név;};};};}); mod.config (függvény (greeterProvider) {greeterProvider.setName („John”);});
        

Ha a pontot utoljára haza akarjuk vezetni, itt egy szolgáltató képe látható, amelynek gyári, érték- és szolgáltatási részei kiemelve vannak:


Válasz 2:

Az AngularJS belsőleg a Gyártót használja a Szolgáltatási objektum létrehozásához, és a Szolgáltatót használja a Gyári objektum létrehozásához.

Egy gyár teszi,

  1. Objektum létrehozása / instanceConstruct / Inicializálja a létrehozott objektumot / példánya visszaállítja a létrehozott objektumot / példányt

A kontextus beállításához vegye figyelembe a Szögletes gyárat mint absztrakt gyári tervezési mintát. Az AngularJS lehetőséget ad a választott objektum létrehozására a gyári módszerrel. Visszatérve a létrehozott objektumot az alkalmazáshoz szolgáltatásként használja.

A példa alatt választhat két fizetési átjáró között, ha valaki a kódját / könyvtárát használja, a gyári módszer választhat, hogy Paypal vagy Stripe objektumot hoz-e létre. Ez nagyon hasonlít az Abstract Factory-hoz, a payService felhasználói nem tudják, melyik szolgáltatást használják a fizetési átjáróhoz.

var myModule = angular.module ('myModule', []); myModule.constant (“PaymentGatewayName”, “Stripe”); // vagy a "Paypal" myModule.factory ('payService', függvény (PaymentGatewayName) {var payService; // az üzleti igény alapján eldöntheti, hogy melyik objektumot hozzon létre. // A StripeGateway és a PaypalGateway JavaScript osztályok // tartalmaz Gateway-specifikus megvalósítást, ha ( PaymentGatewayName == "Stripe") {paymentService = new StripeGateway (); // egyéni kód a csík átjáró inicializálásához} egyéb (PaymentGatewayName == "Paypal") {paymentService = new PaypalGateway (); // egyéni kód a paypal inicializálásához} / / egyéni kód a paymentService inicializálásához a payService;});

A szolgáltatáskód így néz ki, észreveszi az „ezt” kulcsszót, vagyis az objektumot már létrehozta az Ön számára a Angular Core, akkor nem kell többé irányítania az objektum létrehozását.

var myModule = angular.module ('myModule', []); myModule.service ('Gyorsítótár', function () {var localVariable = ""; // ezen kívül nem érhető el .cacheSize = 5; // 5 MB this.objectsSize = 1000; // legfeljebb 1000 objektum this.put = function (kulcs, érték) {...} this.get = function (get) {return ...}});

Válasz 3:

Az AngularJS nagy kérdése: Szolgáltatás vs gyári v / s szolgáltató. Mit kell használni?

Rengeteg forrás található az interneten, amelyek megvitatják a témát. Kiderült, hogy ez a kérdés továbbra is felbukkan minden héten a különböző csatornákon, és még a StackOverflow tíz legjobb válaszának elolvasása után sem túl világos.

Ha úgy gondolja, hogy hasonlóak - igazad van. Nagyon hasonlóak. Valójában mindegyik ugyanaz. Mindegyik szolgáltató.

Olvassa el a teljes cikket -> AngularJS: Szerviz v / s gyári v / s szolgáltató - készítse el az interjút 15 perc alatt