国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

AngularJS應用開發思維之依賴注入3

2019-11-20 09:12:31
字體:
來源:轉載
供稿:網友

找不到的API?
AngularJS提供了一些功能的封裝,但是當你試圖通過全局對象angular去 訪問這些功能時,卻發現與以往遇到的庫大不相同。

$http
比如,在jQuery中,我們知道它的API通過一個全局對象:$ 暴露出來,當你需要 進行ajax調用時,使用$.ajax()就可以了。這樣的API很符合思維的預期。

AngularJS也暴露了一個全局對象:angular,也對ajax調用進行封裝提供了一個 $http對象,但是,但是,當你試圖沿用舊經驗訪問angular.$http時,發現不是 那么回事!

仔細地查閱$http的文檔,也找不到一點點的線索,從哪里可以把這個$http拿到。

依賴注入/DI
事實上,AngularJS把所有的功能組件都以依賴注入的方式組織起來:

在依賴注入的模式下,所有的組件必須通過容器才能相互訪問,這導致了在AngularJS中, 你必須通過一個中介才能獲得某個組件的實例對象:

var injector = angular.injector(['ng']);injector.invoke(function($http){//do sth. with $http});

這個中介,就是依賴注入模式中的容器,在AngularJS中,被稱為:注入器。

在→_→的示例中,我們可以看到,我們已經拿到了$http對象,它其實是一個函數。

注入器/injector
注入器是AngularJS框架實現和應用開發的關鍵,這是一個DI/IoC容器的實現。

AngularJS將功能分成了不同類型的組件分別實現,這些組件有一個統稱 - 供給者/provider, 下圖中列出了AngularJS幾個常用的內置服務:

AngularJS的組件之間不可以互相直接調用,一個組件必須通過注入器才 可以調用另一個組件。這樣的好處是組件之間相互解耦,對象的整個生命周期的管理 甩給了注入器。

注入器實現了兩個重要的功能:

集中存儲所有provider的配方
配方其實就是:名稱+類構造函數。AngularJS啟動時,這些provider首先使用其配方在注入器 內注冊。比如,http請求服務組件封裝在$httpProvider類內,它通過'$http'這個名字在注入 器內注冊。

按需提供功能組件的實例
其他組件,比如一個用戶的控制器,如果需要使用http功能,使用'$http'這個名字 向注入器請求,就可以獲得一個http服務實例了。

試著修改→_→的代碼,查看下$compile服務到底是什么?

注冊服務組件
從injector的角度看,組件就是一個功能提供者,因此被稱為供給者/Provider。 在AngularJS中,provider以JavaScript類(構造函數)的形式封裝。

服務名稱通常使用一個字符串標識,比如'$http'代表http調用服務、'$rootScope'代表根 作用域對象、'$compile'代表編譯服務...

Provider類要求提供一個$get函數(類工廠),injector通過調用該函數, 就可以獲得服務組件的實例。

名稱和類函數的組合信息,被稱為配方。injector中維護一個集中的配方庫, 用來按需創建不同的組件。這個配方庫,其實就是一個Hash對象,key就是服務名稱,value 就是類定義。

在→_→的示例中,我們定義了一個簡單的服務類,這個服務類的實例就是一個字符串:“hello,world!”。 我們使用'ezHello'作為其服務名在注入器里注冊,并通過注入器將這個實例顯示出來。

獲得注入器對象
要使用AngularJS的功能,必須首先獲取注入器。有兩種方法取得注入器。

創建一個新的注入器
可以使用angular.injector()創建一個新的注入器:

angular.injector(modules, [strictDi]); 獲取已經創建的注入器
如果AngularJS框架已經啟動,那么可以使用DOM對象的injector()方法獲 得已經創建的注入器:

var element = angular.element(dom_element);
var injector = element.injector();

通過注入器調用API
注入器有兩個方法可供進行API調用:invoke()和get()。

invoke()
使用注入器的invoke()方法,可以直接調用一個用戶自定義的函數體,并通過函數參數 注入所依賴的服務對象,這是AngularJS推薦和慣例的用法:

angular.injector(['ng']).invoke(function($http){//do sth. with $http}); get()

也可以使用注入器的get()方法,獲得指定名稱的服務實例:

var my$http = angular.injector(['ng']).get('$http');//do sth. with my$http

→_→的示例這次使用了get()方法直接獲取一個服務實例,感受一下!

注入的方式和原理
有兩種方法告知注入器需要注入的服務對象:參數名注入和依賴數組注入。

參數名注入
AngularJS在執行invoke()函數時,將待注入函數定義轉化為字符串,通過 正則表達式檢查其參數表,從而發現并注入所所依賴的服務對象:

//myfunc通過參數表聲明這個函數依賴于'$http'服務var myfunc = function($http){//do sth. with $http};injector.invoke(myfunc);//myfunc的定義將被轉化為字符串進行參數名檢查

這樣有一個問題,就是當我們對JavaScript代碼進行壓縮處理時,$http可能會被 變更成其他名稱,這將導致注入失敗。

依賴數組注入
AngularJS采用依賴項數組的方法解決代碼壓縮混淆產生的問題。這時傳入invoke()的 是一個數組,數組的最后一項是實際要執行的函數,其他項則指明需要向該函數注入 的服務名稱。注入器將按照數組中的順序,依次向函數注入依賴對象。

采用這種方法,待注入函數的參數表的名稱就無關緊要了:

//myfunc依賴于'$http'和'$compile'服務var myfunc = ['$http','$compile',function(p1,p2){//do sth. with p1($http),p2($compile)}];injector.invoke(myfunc);

→_→的實例這次采用依賴數組的方法注入了ezHello服務實例,可以改改參數名稱 看有沒有影響結果?

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 香格里拉县| 呼图壁县| 方山县| 鱼台县| 于田县| 华容县| 吴旗县| 昂仁县| 海晏县| 宾阳县| 依安县| 宁都县| 玉林市| 吉水县| 潜山县| 长泰县| 张北县| 巴楚县| 毕节市| 交城县| 和静县| 临夏县| 武宁县| 赣州市| 彭州市| 顺义区| 定南县| 铜陵市| 云安县| 凤庆县| 芜湖县| 六枝特区| 无棣县| 安仁县| 宿迁市| 黄平县| 宜川县| 凌海市| 全南县| 六安市| 安溪县|