要说谁在网站、web APP等前端应用中起到越来越重要的作用，那绝对很多人第一时间想到的就是：【缓存】！
面对越来越要求高质量、快应用的前端，缓存越来越成为当之无愧的“无冕之王”！与其相关的，一直活跃在前端“视野”中的有两个非常重要的应用：
- 【享元模式】中的对象池
- Ajax分页中的信息缓存
请诸位随笔者一探究竟：
笔者曾经提到过 Java 中 的 String 对象池，下面就来学习这种共享的技术：对象池维护一个装载空闲对象的池子，如果需要对象的时候，不是直接 new，而是转从对象池里获取。如果对象池里没有空闲对象，则创建一个新的对象，当获取出的对象完成它的职责之后， 再进入池子等待被下次获取。
对象池的原理很好理解，比如我们组人手一本《JavaScript权威指南》，从节约的角度来讲，这并不是很划算，因为大部分时间这些书都被闲置在各自的书架上，所以我们一开始就只买一本，或者一起建立一个小型图书馆（对象池），需要看书的时候就从图书馆里借，看完了之后再把书还回图书馆。如果同时有三个人要看这本书，而现在图书馆里只有两本，那我们再马上去书店买一本放入图书馆。
对象池技术的应用非常广泛，HTTP 连接池和数据库连接池都是其代表应用。在 Web 前端开发中，对象池使用最多的场景大概就是跟 DOM 有关的操作。很多空间和时间都消耗在了 DOM节点上，如何避免频繁地创建和删除 DOM 节点就成了一个有意义的话题。
比如：我们经常会在百度地图的页面上看到一个一个的小气泡，网上将它们称之为“toolTip”，我们也暂且这么称呼。它们的作用是标记地址。
在地图上搜索我家附近的时候，页面里出现了 2 个小气泡。当我再搜索附近的漯河高中时，页面中出现了 3个小气泡。按照对象池的思想，在第二次搜索开始之前，并不会把第一次创建的2 个小气泡删除掉，而是把它们放进对象池。这样在第二次的搜索结果页面里，我们只需要再创建 1 个小气泡而不是 3 个。。。
通用对象池的实现：
var objectPoolFactory=function(createObjFn){
var objectPool=[]; //toolTip对象池
return {
create:function(){
var obj=objectPool.length===0 ? createObjFn.apply(this,arguments) : objectPool.shift();
return obj;
},
recover:function(obj){
objectPool.push(obj); //对象池回收dom
}
}
};
//利用objectPoolFactory来装载一些iframe的对象：
var iframeFactory=objectPoolFactory(function(){
var iframe=document.createElement('iframe');
document.body.appendChild(iframe);
iframe.onload=function(){
iframe.onload=null; //防止iframe重复加载的bug
iframeFactory.recover(iframe); //iframe加载完成后回收节点
}
});
使用如：
for(var i=0,src,iframeN;src=['http:// baidu.com','http:// QQ.com','http:// 163.com'][i++],iframeN=i;){
var iframeN=iframeFactory.create();
iframeN.src=src;
}
对象池是另外一种性能优化方案，它跟享元模式有一些相似之处，但没有分离内部状态和外部状态这个过程。本章用享元模式完成了一个文件上传的程序，其实也可以用对象池+事件委托来代替实现。
下面该说说著名的“Ajax分页缓存”了，近两年这个可是个“明星人物”。它基于这样一个背景：当你点击某一页时，网站会想后台发一个请求，接收到返回数据后跳过去（局部刷新）。这时，如果没有设置缓存，那么原来页面的数据就不会被浏览器“记住”，当你返回这个页面时浏览器会再一次发送请求，甚至当你中途退出后再进来，又回到原来的下标了。这大大加重了浏览器和服务器的负担！
实现【分页缓存】的方式有不少种，这里说比较简单的一种：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ajax分页缓存·试验</title>
<style>
/* ... */
</style>
</head>
<body>
<div class="wrap flex_column">
<div class="content flex_column"></div>
<div class="page">
<ul class="flex_row">
<!-- <li></li> -->
</ul>
</div>
</div>
<script src="./ajax.js"></script>
<script>
var oContent=document.querySelector('.content');
var oPages=document.querySelector('.page ul li');
var cache={};
changePage();
setInterval(function(){
cache={};
},1000);
function changePage(){
for(let i=0,len=oPages.length;i<len;i++){ //这里实际要换成从后端ajax过来的长度
oPages[i].onclick=function(){
var page=i+1;
if(page in cache){
addDom(cache[page]);
console.log('已经存在了数据');
}else{
goTo(page);
console.log('数据还没有，正在加载中...');
}
console.log(cache);
}
}
}
goTo(1);
function goTo(page){
Ajax({
url:'https://route.showapi.com/181-1',
method:'GET',
data:{
showapi_appid:'30603',
showapi_sign:'98960666afeb4992ae91971d13494090',
num:8,
page:page
},
success:function(res){
var result=JSON.parse(res);
var dataList=result.showapi_res_body.newslist;
//先获取到我们的数据数组
addDom(dataList);
cache[page]=dataList;
}
});
}
function addDom(result){
var dataList=result;
var dataLength=dataList.length;
var str='';
for(var i=0;i<dataLength;i++){
str+=`
<a href="${dataList[i].url}" class="items flex_row">
<div class="img">
<img src="xxx" alt="" />
</div>
<div class="bd">
<p class="label">${dataList[i].title}</p>
</div>
</a>`
}
oContent.innerHTML=str;
}
</script>
</body>
</html>
第二个代码中笔者使用的ajax模块是自己封装的（笔者提倡能自己封装一下，这样感触更深一些），已总结成文，链接如下：
原生JS封装ajax方法（支持jsonp）
