AngularJS中的緩存使用
緩存篇
一個(gè)緩存就是一個(gè)組件,它可以透明地儲(chǔ)存數(shù)據(jù),以便以后可以更快地服務(wù)于請(qǐng)求。多次重復(fù)地獲取資源可能會(huì)導(dǎo)致數(shù)據(jù)重復(fù),消耗時(shí)間。因此緩存適用于變化性不大的一些數(shù)據(jù),緩存能夠服務(wù)的請(qǐng)求越多,整體系統(tǒng)性能就能提升越多。
$cacheFactory與緩存對(duì)象
$cacheFactory是一個(gè)為Angular服務(wù)生產(chǎn)緩存對(duì)象的服務(wù)。要?jiǎng)?chuàng)建一個(gè)緩存對(duì)象,可以使用$cacheFactory通過一個(gè)ID和capacity。其中,ID是一個(gè)緩存對(duì)象的名稱,capacity則是描述緩存鍵值對(duì)的最大數(shù)量。舉個(gè)生動(dòng)的例子,$cacheFactory就是包租婆,她有一棟樓,里面有大大小小的房子可以出租,只要你給夠錢,包租婆就會(huì)把房子租給你(獲得緩存對(duì)象),這個(gè)房子包括了它的房號(hào)(ID)和房間的大小(capacity-容量)。
var myCache = $cacheFactory('myCache');
其中,緩存對(duì)象擁有以下幾種方法
1. myCache.info() 返回緩存對(duì)象的ID,尺寸和選項(xiàng)
2. myCache.put() 新值鍵值對(duì)并放入緩存對(duì)象中 myCache.put("name", "Ben")
3. myCache.get() 返回對(duì)應(yīng)的緩存值,若沒有找到則返回undefined myCache.get("name")
4. myCache.remove() 把鍵值對(duì)從對(duì)應(yīng)緩存對(duì)象中移除 myCache.remove("name")
5. myCache.remvoeAll() 清空該緩存對(duì)象
$http中的緩存
$http()方法允許我們傳遞一個(gè)cache參數(shù)。當(dāng)數(shù)據(jù)不會(huì)經(jīng)常改變的時(shí)候,默認(rèn)的$http緩存會(huì)特別有用。其中,默認(rèn)的$http緩存對(duì)象是 var cache = $cacheFactory('$http'); 可以這樣設(shè)置它
$http({
method: 'GET',
url: 'api/user.json',
cache: true
})
其中,緩存的鍵值為url, var userCache = cache.get('api/user.json')
自定義緩存
通過自定義的緩存來讓$http發(fā)起請(qǐng)求也很簡(jiǎn)單,只需把cache值設(shè)為對(duì)應(yīng)緩存對(duì)象名稱即可
$http({
method: 'GET',
url: 'api/user.json',
cache: myCache
})
或者通過config配置來設(shè)置每個(gè)$http請(qǐng)求的緩存對(duì)象,而不必像上面的例子中,往每一個(gè)$http請(qǐng)求中加入配置
app.config(function($httpProvider){
$httpProvider.defaults.cache = $cacheFactory('myCache',{capacity: 20})
其中,capacity會(huì)使用"近期緩存最久未使用算法",就是說,加如緩存容量為20,現(xiàn)在已經(jīng)緩存了緩存20個(gè),當(dāng)?shù)?1個(gè)想要被緩存的時(shí)候,最久最小未被使用的緩存鍵值對(duì)會(huì)被清除,以便騰出空間容納第21個(gè)緩存。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS實(shí)現(xiàn)動(dòng)態(tài)添加Option的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)動(dòng)態(tài)添加Option的方法,涉及AngularJS事件響應(yīng)及頁面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
AngularJS中$http服務(wù)常用的應(yīng)用及參數(shù)
大家都知道,AngularJS中的$http有很多參數(shù)和調(diào)用方法,所以本文只記錄了比較常用的應(yīng)用及參數(shù),方便大家以后使用的時(shí)候參考學(xué)習(xí),下面一起來看看吧。2016-08-08
AngularJS使用ngMessages進(jìn)行表單驗(yàn)證
這篇文章主要介紹了AngularJS使用ngMessages進(jìn)行表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2015-12-12
angular和BootStrap3實(shí)現(xiàn)購物車功能
這篇文章主要為大家詳細(xì)介紹了angular和BootStrap3實(shí)現(xiàn)購物車功能的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
Angular.js實(shí)現(xiàn)多個(gè)checkbox只能選擇一個(gè)的方法示例
這篇文章主要給大家介紹了利用Angular.js實(shí)現(xiàn)多個(gè)checkbox只能選擇一個(gè)的方法,文中給出了詳細(xì)的示例代碼,相信對(duì)大家具有一定的參考價(jià)值,下面來一起看看吧。2017-02-02
AngularJS實(shí)現(xiàn)路由實(shí)例
本文給大家分享的是使用angularjs路由框架實(shí)現(xiàn)的一個(gè)簡(jiǎn)單頁面跳轉(zhuǎn)功能,非常的實(shí)用,也很詳細(xì),有需要的小伙伴可以參考下2017-02-02
在Angular中使用NgTemplateOutlet創(chuàng)建可重用組件的流程步驟
在 Angular 中,使用 NgTemplateOutlet 而不是創(chuàng)建特定組件,可以使組件在不修改組件本身的情況下輕松修改為各種用例,在本文中,您將接受一個(gè)現(xiàn)有組件并重寫它以使用 NgTemplateOutlet,需要的朋友可以參考下2024-03-03
angularJS 發(fā)起$http.post和$http.get請(qǐng)求的實(shí)現(xiàn)方法
本篇文章主要介紹了angularJS 發(fā)起$http.post和$http.get請(qǐng)求的實(shí)現(xiàn)方法,分別介紹了$http.post和$http.get請(qǐng)求的方法,有興趣的可以了解一下2017-05-05

