angular 服務(wù)的單例模式(依賴注入模式下)詳解
angular官方文檔單例服務(wù)的說明
單例模式就不要說了,懂點(diǎn)設(shè)計(jì)模式的都懂得,真有不明白的自行百度。
(解釋下angular的命名,angular就是angular2+,angular1叫angularjs,至于angular2,3,4,5,6只是angular的版本,通稱angular,希望小伙伴不要叫錯(cuò)了)
單例模式如何在angular的服務(wù)中使用呢,angular的官方文檔中有這么一段話:
單例服務(wù)
服務(wù)在每個(gè)注入器的范圍內(nèi)是單例的。 在任何一個(gè)注入器中,最多只會(huì)有同一個(gè)服務(wù)的一個(gè)實(shí)例。
這里只有一個(gè)根注入器,而 UserService 就是在該注入器中注冊的。 所以,在整個(gè)應(yīng)用中只能有一個(gè) UserService 實(shí)例,每個(gè)要求注入 UserService 的類都會(huì)得到這個(gè)服務(wù)實(shí)例。
不過,Angular DI 是一個(gè) 多級注入系統(tǒng),這意味著各級注入器都可以創(chuàng)建它們自己的服務(wù)實(shí)例。 Angular 總會(huì)創(chuàng)建多級注入器。
籠統(tǒng),并不知道依賴注入服務(wù)單例模式怎么用,要想弄明白很簡單,簡單的寫個(gè)例子實(shí)驗(yàn)一下就可以了,下面我會(huì)給大家說一下我的實(shí)驗(yàn)總結(jié),幫助小伙伴節(jié)約一些這種乏味的探索時(shí)間。
實(shí)驗(yàn)樣例代碼
服務(wù)代碼
import { Injectable } from '@angular/core'; @Injectable( //{providedIn: 'root'} ) export class SingletonServiveTestService { private _name = "primaryName"; constructor() { } setName (name){ this._name = name; } getName(){ return this._name; } }
小伙伴可能會(huì)說了,這TM怎么會(huì)是單例模式。小伙伴不要激動(dòng),我也是這么想的,怎么TM怎么會(huì)是單例。不過在angular的依賴注入中,有幾種寫法確實(shí)會(huì)使這種代碼以單例模式的方式運(yùn)行。
解釋下{providedIn: 'root'},一開始認(rèn)為只要傳入這個(gè)對象,讓服務(wù)以root的方式提供給子module,子組件,然后這個(gè)服務(wù)就是單例的,后臺(tái)發(fā)現(xiàn),這個(gè)對象和單例沒有半毛錢關(guān)系,它只是app.module中引入服務(wù)的另一種寫法,除了這個(gè)用處,沒有別的用處,所以下文中我們就不說添加和不添加{providedIn: 'root'}的情況了
注入代碼
注入分為Module.providers和Component.providers兩種;實(shí)驗(yàn)的module是實(shí)現(xiàn)懶加載的。
上面代碼的測試結(jié)果(module都是懶加載的)
這三個(gè)結(jié)果已經(jīng)代表各種情況了,如果小伙伴還想知道其他一些情況的下的結(jié)果,小伙伴可以自己動(dòng)手寫個(gè)例子,或者給我留言
- 在app.module.providers或者app.component.providers中依賴面進(jìn)去這個(gè)服務(wù),在子component和子module中的component中的構(gòu)造函數(shù)中國呢注入進(jìn)去這個(gè)服務(wù),這個(gè)服務(wù)的表現(xiàn)特征是 單例 的。
- 在懶加載的子module.providers 中依賴進(jìn)去這個(gè)服務(wù),在這個(gè)module下面的component中的構(gòu)造函數(shù)中注入進(jìn)去這個(gè)服務(wù),這個(gè)服務(wù)表現(xiàn)特征是 單例 的。
- 在component.providers中依賴進(jìn)去這個(gè)服務(wù),然后在component的構(gòu)造函數(shù)中依賴注入進(jìn)去這個(gè)服務(wù),這個(gè)服務(wù)表現(xiàn)特征是 非單例 的.
單例不都通過靜態(tài)屬性來實(shí)現(xiàn)的嗎?
我認(rèn)為單例就是實(shí)現(xiàn)屬性方法的保持一個(gè)實(shí)例,而angular中想用到單例多是實(shí)現(xiàn)一些數(shù)據(jù)整個(gè)項(xiàng)目通用,按照設(shè)計(jì)模式上講上面和下面的代碼都不是標(biāo)準(zhǔn)的單例模式的寫法,但是在實(shí)際使用中確實(shí)是達(dá)到了單例模式的目的,上嗎的有angular的官方文檔做背書,所以我就寫了上嗎那種在angular中可以是單例模式,至于下面這中我就叫靜態(tài)屬性單一模式,ts靜態(tài)屬性被編譯成正常的js,就是構(gòu)造函數(shù)上的屬性而已,概念高大上,原理矮小low。
import { Injectable } from '@angular/core'; @Injectable() export class SingletonServiveTestService { private static _name = "primaryName"; constructor() { } setName (name){ SingletonServiveTestService._name = name; } getName(){ return SingletonServiveTestService._name; } }
這個(gè)實(shí)驗(yàn)著在各種情況下都能表現(xiàn) 單例 特征
這種方法萬金油,單例就用這中不久ok了,小伙伴寫代碼要考究,莫要粗放。結(jié)合上面代碼代碼的單例實(shí)現(xiàn)根據(jù)具體使用場景來選擇用那種方式。
真正嚴(yán)格的用單例模式的話是用不上angular服務(wù)的依賴注入的這套機(jī)制的。至于要不要使用單例拋掉依賴注入,看業(yè)務(wù)場景了。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于angular js_$watch監(jiān)控屬性和對象詳解
下面小編就為大家?guī)硪黄P(guān)于angular js_$watch監(jiān)控屬性和對象詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04AngularJS基礎(chǔ) ng-focus 指令簡單示例
本文主要介紹AngularJS ng-focus 指令,這里整理了ng-focus的一些基礎(chǔ)資料,并附一個(gè)實(shí)例代碼,有需要的小伙伴參考下2016-08-08基于angular中的重要指令詳解($eval,$parse和$compile)
下面小編就為大家?guī)硪黄赼ngular中的重要指令詳解($eval,$parse和$compile)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10AngularJS中controller控制器繼承的使用方法
這篇文章主要介紹了AngularJS中controller控制器繼承的使用方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11AngularJS之自定義服務(wù)詳解(factory、service、provider)
本篇文章主要介紹了AngularJS之自定義服務(wù)詳解(factory、service、provider),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-04-04詳解使用KeyValueDiffers檢測Angular對象的變化
這篇文章主要為大家介紹了KeyValueDiffers檢測Angular對象的變化使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04詳細(xì)介紹RxJS在Angular中的應(yīng)用
本篇文章主要介紹了詳細(xì)介紹RxJS在Angular中的應(yīng)用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09