<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <script type="text/javascript">
// 需求：
// 要實現一個創建緩存的函數：createCache()
// 1 對緩存進行讀取
// 2 對緩存進行添加
// 3 對緩存進行修改
// 4 緩存的數量要控制在某個范圍之內
// 5 每調用一次創建緩存的函數，就會創建一個緩存出來
// 並且多個緩存之間相互不影響！
// 配置屬性或者配置文件
var cacheLength = 3;
// 分析：
function createCache() {
var cache = {};
// 作用：用來記錄存儲到緩存中key的順序
var keyArr = [];
// 作用：對緩存進行增刪改查
return function(key, value) {
// 1 先處理參數的個數
// 如果是一個參數：表示讀取
// 如果是兩個參數：表示設置
// a. value === undefined
// b. arguments.length
if(value === undefined) {
return cache[key];
}
// 以下代碼來處理設置緩存
// 1 修改
// 2 添加
// cache[key] === undefined
// 如果判斷為：true， 說明是 添加
// 否則，就是修改
if(cache[key] !== undefined) {
cache[key] = value;
} else {
// 以下代碼來處理添加的邏輯
// 1 緩存的長度超過了限制
// 2 緩存的長度沒有超過限制
// arr.length > 50
//
// 如果是先給數據中添加數據，判斷的時候，就是：> 限制的數值
// 如果是先判斷后添加的數據，判斷的時候，就是：>= 限制的數值
keyArr.push(key);
if(keyArr.length > cacheLength) {
// 刪除，問題：刪除哪一條數據
// 刪除的是：數組中最開始添加進來的數據
// 也就是：索引號為：0 的值
var deleteKey = keyArr.shift();
delete cache[deleteKey];
}
// 不管刪除還是不刪除數據，都要往緩存中添加數據
cache[key] = value;
}
};
}
// LVHA => LV hao
// :linked
// :visited
// :hover
// :active
// 調用
var typeCache = createCache();
// 添加緩存：
typeCache("class", ".cls");
typeCache("id", "#dv");
typeCache("tag", "div, p");
typeCache("tag", "span");
typeCache(":even", "dddd");
// 讀取：
console.log(typeCache("class")); // .cls
console.log(typeCache("id")); // #dv
console.log(typeCache("tag")); // span
console.log(typeCache(":even")); // span
var strCache = createCache();
</script> -->
<script type="text/javascript">
var cacheLength = 3;
// 優化代碼
function createCache() {
// 作用：用來記錄存儲到緩存中key的順序
var cache = {},
// 作用：對緩存進行增刪改查
keyArr = [];
return function(key, value) {
if(value === undefined) {
return cache[key];
}
if(cache[key] === undefined) {
// push 方法的返回值：添加數據之后的長度
if(keyArr.push(key) > cacheLength) {
delete cache[ keyArr.shift() ];
}
}
cache[key] = value;
};
}
// 調用
var typeCache = createCache();
// 添加緩存：
typeCache("class", ".cls");
typeCache("id", "#dv");
typeCache("tag", "div, p");
typeCache("tag", "span");
typeCache(":even", "dddd");
// 讀取：
console.log(typeCache("class")); // undefined
console.log(typeCache("id")); // #dv
console.log(typeCache("tag")); // span
console.log(typeCache(":even")); // dddd
</script>
</body>
</html>
