Algajatele, kas keegi oskab AngularJS-is selgelt selgitada teenuse, tehase ja pakkuja erinevust?


Vastus 1:

AngularJS: erinevus teenuse vs pakkuja vs tehase vahel

Kui otsite seda, siis tõenäoliselt sellepärast, et proovite välja mõelda, milline neist on teie jaoks kõige õigem. Või seetõttu, et olete neist kolmega kokku puutunud ja proovite erinevust kindlaks teha, kuna need tunduvad sarnased.

Kui arvate, et nad on sarnased - teil on õigus. Nad on väga sarnased. Tegelikult on nad kõik sama asi.

Nad on kõik pakkujad. Tehas ja teenus on teenusepakkuja erijuhud, kuid kõik, mida soovite, saate lihtsalt teenusepakkuja abil teostada. Ma näitan sulle.

Pakkuja

Loome teenusepakkuja, kes tagastab väärtuse ja kuvame selle väärtuse lihtsalt järgmiselt:

var mod = angular.module ("MyModule", []); mod.provider ("myProvider", function () {this. $ get = function () {return "Minu väärtus";};}); mod.controller ("MyController", funktsioon (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); KONSOLIDE VÄLJUND MyController - myProvider: Minu väärtus

Töötava interaktiivse näite leiate aadressilt: JS Fiddle.

Seal, nii et keskmes olev pakkuja anname teile väärtuse. See väärtus võiks olla ükskõik. Sel juhul on see string, mille väärtus on “Minu väärtus”, kuid see võis kergesti olla funktsioon või objekt.

Märkus edasistes koodinäidistes jätan koodi välja koodimärgend ja modi määratlus, et koodilõiked jääksid lühikeseks ja asjalikuks.

Nurk saab väärtuse ainult kunagi varem

Pange tähele, et nurk saab väärtuse ainult üks kord, hoolimata sellest, mitu korda pakkujat süstitakse. See tähendab, et ta kutsub $ get () ainult üks kord, salvestab väärtuse, mille pakub $ get (), ja annab teile sama salvestatud väärtuse iga kord.

Näitamaks teile, mida ma mõtlen, loon uue kontrolleri ja lisan pakkujale uuesti konsooli väljavõtte, et saaksite näha, mis toimub.

mod.provider ("myProvider", function () {this. $ get = function () {console.log ("MyProviderFunction. $ get () call."); // LISATUD selle rea tagasitulekuga "Minu väärtus";}; }); mod.controller ("MyController", funktsioon (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); mod.controller ("MyController2", funktsioon (myProvider) {// LISATUD selle kontrolleri konsool.logi ("MyController2 - myProvider:" + myProvider);}); KONSOLIDE VÄLJUND MyProviderFunction. $ Get () kutsus. MyController - myProvider: Minu väärtus MyController2 - myProvider: Minu väärtus

Avatud JS Fiddle'is

Nagu näete, kutsuti funktsiooni $ get () ainult üks kord.

Pange tähele, et me kirjutasime teenusepakkujale hunniku koode ainult selleks, et luua meetod nimega $ get (). Miks mitte selle asemel, et anda nurkfunktsioon, mis määratleb teise funktsiooni, miks mitte anda sellele funktsioon, mida me tahame selle asemel otse käivitada? Noh, saate, seda nimetab Angular tehaseks.

Tehas

Tehasega pakute lihtsalt funktsiooni keha $ get meetodi jaoks ja nurgeline teeb ülejäänu. Allpool näete, kuidas uus kood välja näeb, nagu näete, käitub see täpselt samamoodi.

mod.factory ("myProvider", function () {// MUUDETUD "pakkuja" "tehase" konsool.logi ("Tehase funktsiooni kutsutakse."); tagastatakse "Minu väärtus";}); mod.controller ("MyController", funktsioon (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); mod.controller ("MyController2", funktsioon (myProvider) {console.log ("MyController2 - myProvider:" + myProvider);}); KONSOLIDE VÄLJUND Tehasefunktsiooni kutsutakse. MyController - myProvider: Minu väärtus MyController2 - myProvider: Minu väärtus

Avatud JS Fiddle'is

Nüüd võib tekkida küsimus, miks te üldse pakkujat kasutaksite, kui saaksite sama teha väiksema koodiga tehasega. Põhjuseid on paar ja uurin seda hiljem, praegu tahan jääda selle postituse pealkirjale truuks ja käsitleda nende kahe (pakkuja ja tehase) ja teenuse erinevust.

Siiani oleme tagastanud lihtsa stringi väärtuse, kuid tegelikkuses on see, mida tõenäoliselt tahame enamasti tagastada, objekt. Noh, see ei muudaks meie näidet väga palju, sest selle tagastatava stringi saame objektiga hõlpsalt välja vahetada.

Näiteks teeme nii, et tagastame objekti, mis sisaldab funktsiooni getValue (). Nüüd on JavaScriptis objekti loomiseks mitu võimalust: me kasutame lähenemist “Object Constructor”, kus loome funktsiooni, mis täidab omaduste ja funktsioonidega objekti ning kasutab selle kiirendamiseks uut märksõna.

funktsioon MyObject () {// LISATUD meie objekti konstruktorile this.getValue = function () {return "Minu väärtus"; }; } mod.factory ("myProvider", funktsioon () {console.log ("Tehase funktsiooni nimetatakse."); tagastab uue MyObject (); // CREATE meie objekti esinemisjuhu}); mod.controller ("MyController", funktsioon (myProvider) {console.log ("MyController - myProvider:" + myProvider.getValue ()); // MUUDETUD helistada getValue ()}); mod.controller ("MyController2", funktsioon (myProvider) {console.log ("MyController2 - myProvider:" + myProvider.getValue ()); // MUUDETUD getValue ()} kutsumiseks); KONSOLIDE VÄLJUND Tehasefunktsiooni kutsutakse. MyController - myProvider: Minu väärtus MyController2 - myProvider: Minu väärtus

Avatud JS Fiddle'is

Nüüd tahan sellele teha ühe väikese näpuga, sest see viib kenasti järgmise kontseptsiooni juurde. Meie näites loome funktsiooni “Object Constructor” MyObject (), kuid kuna me kohendame seda vaid ühes kohas, võime selle asemel kasutada anonüümset funktsiooni.

See on väga väike näpistamine. Selle asemel:

funktsioon MyObject () {this.getValue = function () {return "Minu väärtus"; }; } mod.factory ("myProvider", funktsioon () {console.log ("Tehase funktsiooni nimetatakse."); tagastab uue MyObject ();});

Me teeme seda:

mod.factory ("myProvider", function () {console.log ("Tehase funktsiooni nimetatakse."); tagastage uus funktsioon () {// INLINED meie objekti konstruktor this.getValue = function () {return "Minu väärtus"; };};});

Nii et kogu asi näeb nüüd välja selline:

mod.factory ("myProvider", function () {console.log ("Tehase funktsiooni nimetatakse."); tagastage uus funktsioon () {// INLINED meie objekti konstruktor this.getValue = function () {return "Minu väärtus"; };};}); mod.controller ("MyController", funktsioon (myProvider) {console.log ("MyController - myProvider:" + myProvider.getValue ());}); mod.controller ("MyController2", funktsioon (myProvider) {console.log ("MyController2 - myProvider:" + myProvider.getValue ());});

Avatud JS Fiddle'is

Kuna kogu meie tehas koosneb ühest objektist, kas poleks tore, kui me lihtsalt annaksime Angularile objekti ehitaja funktsiooni, selle asemel, et kirjutada see funky ilmega tehas. Teil on õnne, just see on teenus.

Teie teenistuses

Siin on sama kood, välja arvatud teenuse kasutamine tehase asemel.

mod.service ("myProvider", function () {// MUUDETUD "tehasest" teenusele "// MÄRKUS, et ainus edastatav funktsioon on objekti konstruktor enne seda.getValue = function () {return" Minu väärtus " ;};}); mod.controller ("MyController", funktsioon (myProvider) {console.log ("MyController - myProvider:" + myProvider.getValue ());}); mod.controller ("MyController2", funktsioon (myProvider) {console.log ("MyController2 - myProvider:" + myProvider.getValue ());}); KONSOLIDE VÄLJUND MyController - myProvider: My Value MyController2 - myProvider: My Value

Avatud JS Fiddle'is

Pakkuja vs tehas vs teenus

Nii et kokkuvõtlikult on pakkuja, tehas ja teenindus kõik pakkujad. Tehas on pakkuja erijuhtum, kui teie teenusepakkuja jaoks on vaja ainult funktsiooni $ get (). See võimaldab teil seda kirjutada vähem koodi. Teenus on tehase erijuhtum, kui soovite tagastada uue objekti eksemplari, sama eelis on vähem koodi kirjutades.

Millal kasutada ühte versiooni?

Vastus on see, et kasutate kõige spetsialiseeritumat versiooni, mis täidab teie eesmärgi. Ütle näiteks, et tagastate kusagil mujal määratletud olemasoleva objekti, mis võtab arvesse konstruktori argumente. Te ei saa teenusele argumente edastada, seega helistaksite selle asemel tehasega.

mod.factory ("myProvider", function () {console.log ("Tehase funktsioon kutsus."); tagastab uue SomeMessageBoxClass ("kohandatud argument");});

Üks pakkuja ja tehase vahelise valiku peamisi tegureid on see, kas soovite enne genereerimist loodava objekti konfigureerida. Selleks helistage module.config () ja hankige eksemplar teenusepakkujale endale (pakkuja tagastatud objekti asemel). Selleks lisate teenusepakkuja nime lõppu sõna "pakkuja", kui sisestate selle.

Siin on näide, kuidas seda teha:

mod.provider ("myProvider", function () {this.value = "Minu väärtus"; this.setValue = function (newValue) {this.value = newValue;}; this. $ get = function () {return this. väärtus;};}); mod.controller ("MyController", funktsioon (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); mod.config (funktsioon (myProviderProvider) {// LISATUD konfiguratsiooni sektsioon // Pange tähele lisa "Pakkuja" järelliidet myProviderProvider.setValue ("Uus väärtus";}));

See hõlmab kolme pakkuja kasutamise aega: pakkuja, tehas ja teenus. On veel üks pakkuja, keda siin ei mainitud, mis on veel üks erijuhtum ja see on väärtuse pakkuja.

Kui mäletate, kui me esimest korda ülal vabriku pakkujat tutvustasime, siis toome stringi väärtuse tagastamise lihtsa näite. See nägi välja selline:

mod.factory ("myProvider", funktsioon () {tagasta "Minu väärtus";});

Noh, oleksime võinud selle asemel kasutada hoopis väärtusepakkujat, eeliseks on see, et saate seda teha väiksema koodiga. Allolev kood toimib samamoodi nagu ülaltoodud kood:

mod.value ("myProvider", "Minu väärtus");

Millal te siis kasutaksite ühte versiooni? Eeldatavasti kasutaksite tehaseseadist, kui soovite väärtust arvutada mõne muu teabe põhjal, näiteks mõne muu väärtusepakkuja või välise allika andmete põhjal. Ja / või kui soovite väärtust arvutada ainult siis, kui seda esmakordselt küsitakse. siin on mõned näidised:

// Näide, kus tehas sõltub "väärtus" pakkuja mod.value ("mitu", 3); mod.factory ("väärtus", funktsioon (mitu) {tagasta 10 * mitu;}); // Näide, kus tehas sõltub välistest andmetest mod.factory ("väärtus", funktsioon (mitu) {var multiple = getDateFromExternalPage (); tagasta 10 * mitu;});

Kas ma mõtlesin, et see väärtus oli ainus teine ​​pakkuja? Noh ma valetasin, et on veel üks, mis on kahe väiksema erinevusega väärtusega väga sarnane. Seda pakkujat nimetatakse konstantseks.

Väärtuse ja konstandi erinevus seisneb selles, et konstandi abil määratletud väärtus on konfiguratsiooni faasis saadaval. Võib-olla mäletate juba varem, et mainisin, et pakkujale oli juurdepääs konfigureerimisetapil, kuid teenindus ja tehas polnud.

Noh, see on sama väärtus ja püsiv. konstant on saadaval konfiguratsiooni faasist ja väärtus mitte. Teine erinevus seisneb nimest tulenevalt, et te ei saa konstandi väärtust muuta. Esimene väärtus, mille sellele omistate, on väärtus, mida see hoiab, kui proovite hiljem sellele mõne muu väärtuse määrata, siis seda eiratakse.

Siin on näide:

mod.value ("myValue", "Esimene määramine"); mod.value ("myValue", "Second Assignment"); mod.constant ("myConstant", "Esimene loovutamine"); mod.constant ("myConstant", "Teine ülesanne"); mod.controller ("MyController", funktsioon (myValue, myConstant) {console.log ("myValue:" + myValue); console.log ("myConstant:" + myConstant);}); KONSOLIDE VÄLJUND myValue: Teine ülesanne myConstant: Esimene määramine

Siin on kokkuvõte, millal neid kasutada:

väärtus

Pakute lihtsat sõnasõnalist väärtust.

mod.value ("myValue", 10);
    

pidev

Sellele väärtusele peab olema juurdepääs konfiguratsioonifaasis. (kasutades .config ())

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

tehas

Teie pakutav väärtus tuleb arvutada muude andmete põhjal.

mod.factory ("myFactory", funktsioon () {tagasta 10;});
        

teenus

Objekti tagastate meetoditega.

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

pakkuja

Soovite, et konfigureerimisetapis saaks konfigureerida objekti, mis luuakse enne selle loomist.

mod.provider ("greeter", function () {var nimi; this.setName = function (newName) {name = newName;}; this. $ get = function () {return new function () {this.sayHi = function () {console.log ("Tere" + nimi;};};};}); mod.config (funktsioon (greeterProvider) {greeterProvider.setName (“John”);});
        

Viimane kord punkti koju sõitmiseks on pakkuja pilt, mille tehas, väärtus ja teenuseosad on esile tõstetud:


Vastus 2:

Sisemiselt kasutab AngularJS tehaseobjekti loomiseks teenusobjekti ja teenusepakkuja abil tehaseobjekti loomiseks.

Tehas teeb,

  1. Loo objekt / instanceConstruct / initsialiseeri loodud objekt / initsialiseerib loodud objekti / eksemplari

Konteksti määramiseks kaaluge nurgavabrikut abstraktvabrikujunduse mustrina. AngularJS annab teile võimaluse luua oma valitud objekt vastavalt teie tehase meetodile, tagastate loodud objekti rakenduse kasutamiseks teenusena.

Näite allpool on teil valida kahe maksevärava vahel, keegi kasutab teie koodi / teeki, teie tehase meetod võib valida, kas luua objekt Paypal või Stripe. See on väga sarnane Abstract tehasega, maksete teenuse ServiceService kasutajad ei tea, millist teenust maksevärava jaoks kasutatakse.

var myModule = angular.module ('myModule', []); myModule.constant (“PaymentGatewayName”, “Stripe”); // või "Paypal" myModule.factory ('paymentService', funktsioon (PaymentGatewayName) {var paymentService; // otsustate, millise objekti luua ärivajaduse põhjal // StripeGateway ja PaypalGateway on JavaScripti klassid // sisaldab Gateway spetsiifilist teostust, kui ( PaymentGatewayName == "Stripe") {paymentService = new StripeGateway (); // kohandatud kood triibulüüsi lähtestamiseks} else (PaymentGatewayName == "Paypal") {paymentService = new PaypalGateway (); // kohandatud kood paypali initsialiseerimiseks} / / kohandatud kood, et initsialiseerida payService tagastama payService;});

Teenuse kood näeb välja selline: märkate märksõna „see”, see tähendab, et objekt on teile juba Angular Core poolt loodud, te ei kontrolli enam objekti loomist.

var myModule = angular.module ('myModule', []); myModule.service ('Cache', function () {var localVariable = ""; // väljaspool seda pääseb juurde .cacheSize = 5; // 5 MB this.objectsSize = 1000; // max 1000 objekti this.put = function (võti, väärtus) {...} this.get = function (get) {return ...}});

Vastus 3:

Suur küsimus AngularJS-is: Service vs Factory v / s Provider. Mida ma peaksin kasutama?

Internetis on palju ressursse, mis seda teemat arutavad. Selgub, et see küsimus ilmub endiselt igal nädalal või erinevatel kanalitel ja isegi pärast StackOverflow kümne parima vastuse lugemist pole see ikkagi päris selge.

Kui arvate, et nad on sarnased - teil on õigus. Nad on väga sarnased. Tegelikult on nad kõik üks ja sama asi. Nad on kõik pakkujad.

Lugege kogu artiklit -> AngularJS: teenuse v / s tehase v / s pakkuja - tehke intervjuu 15 minutiga valmis