您的位置：首页 > Web前端 > AngularJS

angular源码剖析之Provider系列--CacheFactoryProvider

2019-05-22 20:28 2011 查看

CacheFactoryProvider 简介

源码里是这么描述的：
Factory that constructs {@link $cacheFactory.Cache Cache} objects and gives access to
them.
意思就是通过cacheFactory可以构造一个Cache对象来给予访问和执行权限。

这个Cache对象官方文档是这么说的：
A cache object used to store and retrieve data, primarily used by $http and the script directive to cache templates and other data.
用我自己的话来说就是提供存储和访问缓存对象的服务,angular内部主要被$http,script指令用于
缓存template和其他数据。我们自己可以在Controller内部使用。

CacheFactoryProvider 用法

<!doctype html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="js/angular.js"></script>
</head>
<body>
<div ng-controller="MyController">
</div>
<script >
var app=angular.module('myapp',[]);
app.controller('MyController',function($scope,$cacheFactory){
var myCache = $cacheFactory("myCache",{capacity: 6});
//var myCache1 = $cacheFactory("myCache",{capacity: 6}); //会报错
myCache.put("name","john");
myCache.put("name1","wonder");
myCache.put("name","john");
});

app.controller('getCacheController',['$scope','$cacheFactory',
function($scope,$cacheFactory){
var cache = $cacheFactory.get('myCache');
var name = cache.get('name');
console.log(name);  //打印john
}]);
</script>
</body>
</html>

看了上面这个一个简单的例子，读者可能会产生如下疑惑：

不是名为CacheFactoryProvider吗，怎么在代码里只看到cacheFactory呢？
cacheFactory是怎么存储对象的？
下面我们来依次解答这两个问题

$cacheFactory的注入

我们首先来看第一个问题，这个问题要牵涉到angular里面的依赖注入机制，我们前面的分析也讲过，
angular会在启动之前通过调用

publishExternalAPI

函数先发布一些扩展API,同时定义ng
模块，在定义ng模块的时候就传入了注入provider的方法

angularModule('ng', ['ngLocale'], ['$provide',
//通过参数注入$provide
function ngModule($provide) {
///部分代码省略
$provide.provider({
$cacheFactory: $CacheFactoryProvider,
});
}])

$cacheFactory出现了，它是通过javascript的键值对象作为键传给provider方法。那么它是如何存储
对象的呢？首先我们看它的定义：

CacheFactoryProvider的定义

内部定义了依赖注入核心的

$get

方法,

$get

方法返回cacheFactory方法(也就是上面实例代码里的

$cacheFactory

参数)。

function $CacheFactoryProvider() {
//定义$get方法供依赖调用
//controller中获取cacheFactory时会调用此方法
//这个$get方法也是获取provider的关键方法
this.$get = function() {
var caches = {};//闭包的一个运用

function cacheFactory(cacheId, options) {
//部分代码省略
//可以用if来判断
if (cacheId in caches) {//如果caches中已经存在cacheId
//实例代码里抛出的错误就在此处、
//统一调用minErr函数
throw minErr('$cacheFactory')('iid', "CacheId '{0}' is already taken!"
, cacheId);
}

var size = 0,
//把options 和{id:cacheId} 放入{} 中 不是深拷贝
stats = extend({}, options, {id: cacheId}),
data = createMap(),//通过Object.create(null) 创建个空对象
capacity = (options && options.capacity) || Number.MAX_VALUE,
lruHash = createMap(),
freshEnd = null,
staleEnd = null;
//返回caches中的一个对象
return caches[cacheId] = {
//省略部分代码
//存储里讲解
put:function(key,value){
},
get: function(key) {
},
remove: function(key) {
},
removeAll: function() {
},
destroy: function() {
},
info: function() {
}
}
//刷新节点次序
function refresh(entry) {
}
//
function link(nextEntry, prevEntry) {

}
}

//所有的缓存
cacheFactory.info = function() {
var info = {};
forEach(caches, function(cache, cacheId) {
info[cacheId] = cache.info();
});
return info;
};

cacheFactory.get = function(cacheId) {
return caches[cacheId];
};

return cacheFactory;
}
}

CacheFactoryProvider的存储

存储分为这几个核心方法:

put

refresh

remove

link

put函数

value会放入data对象中，key会放入lruHash链表

put: function(key, value) {
if (isUndefined(value)) return;
//如果设定的capcity小于maxvalue
if (capacity < Number.MAX_VALUE) {
//lruHash 存了当前的key 还有可能是 p 和n  (previous和next)
var lruEntry = lruHash[key] || (lruHash[key] = {key: key});
//刷新各节点的次序
refresh(lruEntry);//把当前entry放入链表末尾
}
//如果key 在data里不存在 那么增加size
if (!(key in data)) size++;
data[key] = value;
//当大于capacity时 会清除最早加入的那个
if (size > capacity) {
this.remove(staleEnd.key);//移除淘汰节点stableEnd
}
return value;
}

get函数

Retrieves named data stored in the {@link $cacheFactory.Cache Cache} object
获取存储在cache对象中的指定数据

get: function(key) {
if (capacity < Number.MAX_VALUE) {
var lruEntry = lruHash[key];
if (!lruEntry) return;
// 获取first的时候 因为staleEnd为first 所以会让staleEnd指向 second
// 内部会执行link 使得 second.p = null
// first.p =  third  third.n = first
//stableEnd为 second freshEnd为first
refresh(lruEntry);
}
return data[key];
}

remove函数

Removes an entry from the {@link $cacheFactory.Cache Cache} object.
从cache对象删除一个entry

remove: function(key) {
//如果capacity小于maxvalue
if (capacity < Number.MAX_VALUE) {
//先取出当前key的entry
var lruEntry = lruHash[key];
if (!lruEntry) return;
//第一次超过时 freshEnd 为third  lryEntry为first
if (lruEntry == freshEnd) freshEnd = lruEntry.p;
//第一次超过时 staleEnd 为first  lryEntry为first
//所以 会让 stalEnd 指向second 以便于下次移除时
if (lruEntry == staleEnd) staleEnd = lruEntry.n;
//把淘汰节点的一个节点选中
//第一次超过时 lryEntry.n为 second  lryEntry.p 为null
//执行结果为 second.p = null
link(lruEntry.n,lruEntry.p);
//把当前key从lruHash中删除
delete lruHash[key];
}
if (!(key in data)) return;
delete data[key];
size--;
}

refresh函数

makes the

entry

the freshEnd of the LRU linked list。
把entry 放入链表的末尾

function refresh(entry) {
if (entry != freshEnd) {
if (!staleEnd) { //staleEnd为空那么就让他指向当前entry
staleEnd = entry;
} else if (staleEnd == entry) {
//如果淘汰节点等于当前节点
staleEnd = entry.n; //用于把 当前的下一个节点 用作淘汰节点
}
//放入第一个元素时 entry.n,entry.p都为undefined
link(entry.n, entry.p); //当前的上一个节点 和当前的下一个节点
link(entry, freshEnd); // 当前的节点 和 最新的末尾节点
freshEnd = entry;
freshEnd.n = null;
//第一次执行完 结果为: freshEnd = first  staleEnd为first
//first.p=null first.n=null
//第二次执行完 结果为：freshEnd = second staleEnd为first
// first.p=null first.n= second
// scecond.p = first scecond.n = null
//第三次执行完 freshEnd = third staleEnd为first first.p=null
//first.n= second
// second.p = first second.n = null
// third.p = second third.n = null
}
}

link函数

bidirectionally(双向链表) links two entries of the LRU linked list
双向链接链表里的两个元素。

function link(nextEntry, prevEntry) {
//undefined 不等于undefined
if (nextEntry != prevEntry) {
//
if (nextEntry) nextEntry.p = prevEntry;
//p stands for previous, 'prev' didn't minify
if (prevEntry) prevEntry.n = nextEntry;
//n stands for next, 'next' didn't minify
}
}

欢迎关注我的公众号，获取最新源码解析文章！

参考资料：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航