Başlayanlar üçün kimsə AngularJS-də xidmət, fabrika və provayder arasındakı fərqi açıq şəkildə izah edə bilərmi?


cavab 1:

AngularJS: xidmət və provayder ilə fabrik arasındakı fərq

Əgər axtarırsınızsa, ehtimal ki, hansının sizin üçün uyğun olduğunu tapmaq istəmisiniz. Üçüncü ilə rastlaşdığınıza və oxşar olduqları üçün fərqi deməyə çalışdığınıza görə.

Onların oxşar olduğunu düşünürsənsə, haqlısan. Çox oxşardırlar. Əslində hamısı eynidir.

Hamısı provayderdir. Zavod və xidmət yalnız provayderin xüsusi hallarıdır, ancaq yalnız provayderdən istifadə edərək istədiyiniz hər şeyə nail ola bilərsiniz. Sənə göstərəcəm.

Təchizatçı

Bir dəyəri qaytaracaq və sadəcə bu dəyəri göstərəcək bir provayder yaradacağıq. Bunu edərdiniz:

var mod = burchak.module ("MyModule", []); mod.provider ("myProvider", funksiya () {bu. $ get = function () {return "Dəyərim";};}); mod.controller ("MyController", funksiya (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); SİZİN MƏNZİLMƏNİN MƏNZİLİ - myProvider: Mənim dəyərim

İşləyən bir interaktiv nümunəni aşağıdakı yerdən tapmaq olar: JS Fiddle.

Orada bir "provayder" ilə bir dəyəri "təmin edə" bilərsiniz. Bu dəyər bir şey ola bilər. Bu vəziyyətdə, "Mənim dəyərim" dəyəri olan bir simdir, lakin asanlıqla bir funksiya və ya bir obyekt ola bilər.

Digər kod nümunələrində, kod parçaları qısa və nöqtəyə çatmaq üçün modun etiketini və tərifini istisna edəcəyimi unutmayın.

Angular dəyəri yalnız bir dəfə alır

Diqqət yetirin ki, provayder nə qədər tez-tez enjekte edilməsindən asılı olmayaraq, bucaq dəyəri yalnız bir dəfə alır. Yəni yalnız bir dəfə $ get () çağırır, $ get () ilə verilən dəyəri saxlayır və hər dəfə eyni saxlanılan dəyəri verir.

Nə demək istədiyimi göstərmək üçün başqa bir nəzarətçi yaradacağam və provayderə başqa bir konsol təlimatı əlavə edəcəyəm ki, nə olacağını görə biləsən.

mod.provider ("myProvider", funksiya () {bu. $ get = funksiya () {console.log ("MyProviderFunction. }); mod.controller ("MyController", funksiya (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); mod.controller ("MyController2", funksiya (myProvider) {// Bu nəzarətçi konsolunu əlavə etdi. "(MyController2 - myProvider:" + myProvider);}); MyProviderFunction'ı Çıxarın. $ Get () adlanır. MyController - myProvider: mənim dəyərim MyController2 - myProvider: mənim dəyərim

JS Fiddle-də açın

Gördüyünüz kimi, $ get () funksiyası yalnız bir dəfə çağırıldı.

Diqqət yetirin ki, biz yalnız $ get () adlı bir metod yaratmaq üçün provayderə bir dəst kod yazdıq. Niyə başqa bir funksiyanı təyin edən bucaqlı bir funksiya vermək əvəzinə birbaşa yerinə yerinə yetirmək istədiyimiz funksiyanı verməyək? Yaxşı, Angular bir fabrik deyə bilər.

Bir fabrik

Bir fabrikdə siz sadəcə $ get metodu ilə bədəni təmin edirsiniz, qalanını isə Angular edir.Yeni kodun da göründüyü kimi, eyni etdiyini görürsünüz.

mod.factory ("myProvider", funksiya () {// "provayder" "zavod" konsoluna dəyişdirildi. "Fabrika funksiyası deyilir."; "Dəyərim";}); mod.controller ("MyController", funksiya (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); mod.controller ("MyController2", funksiya (myProvider) {console.log ("MyController2 - myProvider:" + myProvider);}); CONSOLE Çıxış Zavodu çağırıldı. MyController - myProvider: mənim dəyərim MyController2 - myProvider: mənim dəyərim

JS Fiddle-də açın

İndi daha az kodu olan bir fabrikdə edə bilsəniz, niyə provayderdən istifadə etməyiniz barədə sualınız yaranır. Daha sonra açacağım bir neçə səbəb var. Hal-hazırda bu yazının başlığına sadiq qalmaq və bu iki (satıcı və fabrik) və bir xidmət arasındakı fərqi həll etmək istəyirəm.

İndiyə qədər sadə bir simli dəyər qaytardıq, amma praktikada çox vaxt bir şeyi geri qaytarmaq istəyirik. Yaxşı, bu bizim nümunəmizi çox dəyişməzdi. Bir obyekt üçün geri qaytardığımızı asanlıqla mübadilə edə bilərik.

Məsələn, getValue () adlı bir funksiyanı ehtiva edən bir obyekti geri qaytarmaqla bunu edək. İndi JavaScript-də bir obyekt yaratmaq üçün bir neçə yol var. Obyekt konstruktoru yanaşmasından istifadə edirik, burada obyektləri xüsusiyyətləri və funksiyaları ilə dolduran və onu açmaq üçün yeni açar sözdən istifadə edən bir funksiya yaradırıq.

Funksiya MyObject () {// Obyekt konstruktorumuzu əlavə etdi this.getValue = function () {return "Mənim Dəyərim"; }; } mod.factory ("myProvider", funksiya () {console.log ("Fabrika funksiyası deyilir."); yeni MyObject (); // obyektimizin CREATE nümunəsini yarat}); mod.controller ("MyController", funksiya (myProvider) {console.log ("MyController - myProvider:" + myProvider.getValue ()); // getValue ()} çağırmaq üçün Dəyişdi; mod.controller ("MyController2", funksiya (myProvider) {console.log ("MyController2 - myProvider:" + myProvider.getValue ()); // getValue ()} çağırmaq üçün dəyişdirildi;) CONSOLE Çıxış Zavodu çağırıldı. MyController - myProvider: mənim dəyərim MyController2 - myProvider: mənim dəyərim

JS Fiddle-də açın

İndi bir az dəyişiklik etmək istəyirəm, çünki bu növbəti konsepsiyaya yaxşı aparacaqdır. Nümunəmizdə "Obyekt qurucusu" MyObject () funksiyasını yaradırıq. Ancaq bunları yalnız bir yerə yerləşdirdiyimiz üçün anonim bir funksiyadan istifadə edə bilərik.

Bu çox kiçik bir dəyişiklikdir. Bunun əvəzinə:

Funksiya MyObject () {this.getValue = function () {return "Mənim Dəyərim"; }; } mod.factory ("myProvider", funksiya () {console.log ("Fabrika funksiyası deyilir."); yeni MyObject ();}) qayıt;

Biz bunu edirik:

mod.factory ("myProvider", funksiya () {console.log ("Fabrikanın adı verilən funksiya."); yeni funksiyanı geri qaytarmaq () {// Bizim obyekt inşaatçımız bu.getValue = funksiya () {DƏYƏRİMİZDƏN "qaytar"; };};});

İndi bütün şey belə görünür:

mod.factory ("myProvider", funksiya () {console.log ("Fabrikanın adı verilən funksiya."); yeni funksiyanı geri qaytarmaq () {// obyekt inşaatçımıza bu.getValue = funksiya () {DƏYƏRİM DƏYİŞDİRMƏSİ; };};}); mod.controller ("MyController", funksiya (myProvider) {console.log ("MyController - myProvider:" + myProvider.getValue ());}); mod.controller ("MyController2", funksiya (myProvider) {console.log ("MyController2 - myProvider:" + myProvider.getValue ());});

JS Fiddle-də açın

Bütün fabrikimiz bir obyektdən ibarət olduğundan, bu əyləncəli görünüşlü fabriki yazmaq əvəzinə yalnız bucaqlı obyekt qurucusu funksiyasını verə bilsək yaxşı olmazdı. Şansınız var, bu bir xidmətdir.

Xidmətinizdədir

Budur, eyni kod, bir fabrik yerinə bir xidmət istifadə edildiyi istisna olmaqla.

mod.service ("myProvider", funksiya () {// "fabrika" "xidmət" olaraq dəyişdirildi // DİQQƏT: ötürülən yeganə funksiya əvvəl bu obyekt konstruktorudur.getValue = function () {return "Mənim Dəyərim";}; }); mod.controller ("MyController", funksiya (myProvider) {console.log ("MyController - myProvider:" + myProvider.getValue ());}); mod.controller ("MyController2", funksiya (myProvider) {console.log ("MyController2 - myProvider:" + myProvider.getValue ());}); SİZİN MƏNZİMLƏNMƏSİMƏ GÖRÜŞMƏK - myProvider: Dəyərim MyController2 - myProvider: Dəyərim

JS Fiddle-də açın

Təchizatçı vs fabrik vs xidmət

Xülasə, provayderlər, fabriklər və xidmətlər hamısı provayderlərdir. Bir provayderinizdə yalnız bir $ get () funksiyasına ehtiyacınız varsa, bir fabrik, bir provayderin xüsusi bir haldır. Daha az kodla yaza bilərsiniz. Daha az kod yazmağın eyni üstünlüyü ilə yeni bir obyekt nümunəsini geri qaytarmaq istədikdə bir xidmət, fabrikin xüsusi bir haldır.

Birini digərinə qarşı nə vaxt istifadə etməlisən?

Cavab budur ki, məqsədinizə çatacaq ən ixtisaslaşdırılmış versiyadan istifadə edirsiniz. Tutaq ki, başqa bir yerdə təyin olunan və konstruktor dəlillərini qəbul edən mövcud bir obyekti geri qaytaracaqsınız. Dəlilləri xidmətə ötürə bilməzsiniz, bunun əvəzinə zavodla zəng etmək istərdiniz.

mod.factory ("myProvider", funksiya () {console.log ("Fabrika funksiyası deyilir."); yeni SomeMessageBoxClass ("xüsusi arqument");}) qayıt;

Bir satıcı və bir fabrik arasında qərar verməyin əsas amillərindən biri, yaradılan obyektin yaranmazdan əvvəl konfiqurasiya edilməsini istəməyinizdir. Bunu modul.config () çağıraraq və provayderin özünə (provayder tərəfindən geri qaytarılmış obyekt əvəzinə) bir nümunə göndərməklə edirsiniz. Bunu enjekte etdikdə provayderinizin adının sonuna "provayder" əlavə etməklə bunu edirsiniz.

Bunu necə edəcəyinizə dair bir nümunə:

mod.provider ("myProvider", funksiya () {this.value = "Mənim dəyərim"; this.setValue = funksiya (newValue) {this.value = newValue;}; bu. $ get = funksiya () {bu qayıt. Dəyər;};}); mod.controller ("MyController", funksiya (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); mod.config (funksiya (myProviderProvider) {// ƏLAQƏ edilmiş konfiqurasiya bölməsi // Əlavə suffiksini "Provayder" myProviderProvider.setValue ("Yeni Dəyər");}) Qeyd;

Bu üç provayderi nə vaxt istifadə etməyi əhatə edir: provayder, fabrik və xidmət. Burada qeyd edilməyən əlavə bir provayder var ki, bu da başqa bir xüsusi haldır və bu dəyər təmin edəndir.

Yuxarıda fabrik provayderini ilk dəfə tanıtdığımızı xatırlayırsınızsa, bir simli dəyərin qaytarılmasının sadə nümunəsini verdik. Bu kimi görünürdü:

mod.factory ("myProvider", funksiya () {qayıtmaq "Dəyərim";});

Bəli, bunu həqiqətən dəyər provayderi ilə edə bilərdik, bu da öz növbəsində daha az kodu ilə edə biləcəyiniz üstünlüyə malikdir. Aşağıdakı kod yuxarıdakı kodla eyni edir:

mod.value ("myProvider", "Mənim dəyərim");

Birini digərinə qarşı nə vaxt istifadə edərdin? Dəyəri digər məlumatlara əsasən hesablamaq istəsəniz, ehtimal ki, zavod təminatçısından istifadə edərdiniz. B. Başqa bir dəyər təminatçısından və ya xarici mənbədən məlumat. Və / və ya dəyəri ilk dəfə tələb edildiyi zaman dəqiq hesablamaq istədiyiniz zaman. Bəzi nümunələr:

// Zavodun bir "dəyər" provayderindən asılı olduğu nümunə mod.value ("çox", 3); mod.factory ("dəyər", funksiya (çox) {qayıtmaq 10 * çox;}); // fabrikin xarici məlumatlardan asılı olduğu mod.factory ("dəyər", funksiya (çox) {var multiplikasiya = getDateFromExternalPage (); 10 * çox;});

Dəyərin yalnız digər təminatçı olduğunu ifadə etdimmi? Düzdü, yalan danışdım, dəyəri çox oxşar iki kiçik fərqlə başqa biri var. Bu provayder sabit adlanır.

Dəyər ilə sabit arasındakı fərq, sabit olan bir dəyərin konfiqurasiya mərhələsində mövcud olmasıdır. Əvvəllər xatırladığımızı xatırladım, provayderin konfiqurasiya mərhələsində əlçatan olduğunu, lakin Xidmət və Fabriki olmadığını söylədi.

Yaxşı, dəyəri və sabitliyi üçün eynidir. Konfiqurasiya mərhələsində sabitdir və dəyəri yoxdur. Digər fərq, adından da göründüyü kimi sabitin dəyərinin dəyişdirilə bilməməsidir. Ona təyin etdiyiniz ilk dəyər saxladığı dəyərdir. Daha sonra ona fərqli bir dəyər təyin etməyə çalışsanız, nəzərə alınmayacaqdır.

Bir nümunə:

mod.value ("myValue", "İlk tapşırıq"); mod.value ("myValue", "İkinci tapşırıq"); mod.constant ("myConstant", "İlk tapşırıq"); mod.constant ("myConstant", "ikinci tapşırıq"); mod.controller ("MyController", funksiya (myValue, myConstant) {console.log ("myValue:" + myValue); konsol.log ("myConstant:" + myConstant);}); MÖVZUSUNDA Çıxarın: ikinci tapşırıq myConstant: birinci tapşırıq

Hər birinin nə vaxt istifadə edilməsinin xülasəsi budur:

Dəyər

Sadə hərfi dəyəri göstərirsən.

mod.value ("myValue", 10);
    

Daimi

Konfiqurasiya mərhələsində bu dəyəri əldə edə bilməlisiniz. (.config ilə ())

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

Zavod

Göstərdiyiniz dəyəri digər məlumatlardan istifadə etməklə hesablamaq lazımdır.

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

Xidmət

Bir obyekti metodlarla qaytarsınız.

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

Təchizatçı

Konfiqurasiya mərhələsində, əvvəl yaradılmalı olan obyekti konfiqurasiya etmək istəyərsiniz.

mod. () {console.log ("Salam" + adı;};};};}); mod.config (funksiya (greeterProvider) {salamProvider.setName ("John");});
        

Nöqtəni son dəfə evə gətirmək üçün, burada işlənmiş iş, dəyər və xidmət hissələri ilə təminatçının şəkli var:


cavab 2:

Daxili olaraq, AngularJS bir xidmət obyekti yaratmaq üçün Fabrika və Fabrika obyekti yaratmaq üçün Provayderdən istifadə edir.

Bir fabrik edir

  1. Bir obyekt / instansiya yaradın Yaradılmış obyekt / instansiya qurun / başlatın, yaradılan obyekt / instansiya yarışın

Konteksti təyin etmək üçün bucaqlı fabrikanı mücərrəd bir zavod dizayn nümunəsi kimi düşünün. AngularJS fabrik metodundan istifadə edərək seçdiyiniz bir obyekt yaratmağa imkan verir. Yaradılmış obyekti geri qaytarırsınız ki, tətbiqiniz bir xidmət olaraq istifadə edə bilsin.

Aşağıdakı nümunədə, kod / kitabxananızdan istifadə edərək, iki ödəmə qapısı arasından birini seçə bilərsiniz. Zavod metodunuz, Paypal və ya Stripe obyektini yaratmağınıza qərar verə bilər. Bu mücərrəd fabrikə çox oxşardır. PaymentService istifadəçiləri ödəniş şlüzü üçün hansı xidmətdən istifadə edildiyini bilmirlər.

var myModule = burchak.module ('myModule', []); myModule.constant ("Ödəniş GatewayName", "Zolaq"); // və ya "Paypal" myModule.factory ('paymentService', funksiya (PaymentGatewayName) {var payService; //) iş tələblərinə əsasən hansı obyektin yaradılacağına qərar verirsiniz? StripeGateway və PaypalGateway JavaScript sinifləridır. Zolaq ") {payService = yeni StripeGateway (); // Zol qapısını işə salmaq üçün xüsusi kod} else (PaymentGatewayName == "Paypal") {paymentService = yeni PaypalGateway (); // Paypal-ı işə salmaq üçün xüsusi kod} // Ödəniş başlamaq üçün xüsusi koduService return payService;});

Bir xidmət kodu bu kimi görünürsə, "bu" sözünə diqqət yetirin. Bu o deməkdir ki, Angular Core artıq obyekti sizin üçün yaratdı və artıq obyekt yaratmasına nəzarət etmirsiniz.

var myModule = burchak.module ('myModule', []); myModule.service ('Cache', funksiya () {var localVariable = ""; // xaricində adlandırmaq olmaz. = funksiya (açar, dəyər) {...} this.get = funksiya (almaq) {qayıt ...}});

cavab 3:

AngularJS-də ən böyük sual: Xidmət vs Fabrika v / s Provider. Nə istifadə etməliyəm

İnternetdə mövzunu müzakirə edən saysız-hesabsız mənbələr var. Məlum oldu ki, bu sual hər həftə və ya daha çox fərqli kanallarda açılır və StackOverflow-dakı ilk on cavabı oxuduqdan sonra hələ də çox aydın deyil.

Onların oxşar olduğunu düşünürsənsə, haqlısan. Çox oxşardırlar. Əslində hamısı eynidir. Hamısı provayderdir.

Tam məqaləni oxuyun -> AngularJS: Xidmət / Fabrika / S Provayderi - 15 dəqiqə ərzində reportaj hazırlayın.