关于Ajax请求的数据进行分页处理，以及数据缓存池的具体操作和讲解

前言：前端工作的一个部分就是异步请求，通过对接后端提供的接口，进行数据获取以及渲染。那么在数据渲染过程中，具体的页面样式就要根据设计稿或者甲方的需求进行开发了。可能页面会有 分页、上拉加载、下拉刷新等各种需求。今天记录一下我对数据分页的处理，以及对数据存储的操作。

css

			* {
				margin: 0;
				padding: 0;
			}
			.main {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.content_box {
				width: 300px;
				height: 500px;
				background: skyblue;
			}
			ul {
				list-style: none;
			}
			.ul_page {
				display: flex;
			}
			.ul_page_item {
				width: 60px;
				height: 60px;
				text-align: center;
				line-height: 60px;
				background-color: lightgray;
				border-radius: 50%;
				cursor: pointer;
				transition: background-color 1s; 
			}
			.ul_page_item:hover {
				transition: background-color 1s; 
				background-color: #888888;
			}
			.ul_content {
				display: flex;	
				flex-direction: column;
				height: 100%;
			}
			.ul_content_item {
				display: flex;
				flex-grow: 1;
				justify-content: center;
				align-items: center;
				transition: background-color 1s; 
			}
			.ul_content_item:hover {
				transition: background-color .8s; 
				background-color: #007AFF;
			}

html

<div class="main">
			<div class="content_box">
				<ul class="ul_content">
				</ul>
			</div>
			<ul class="ul_page">
				<li class="ul_page_item">1</li>
				<li class="ul_page_item">2</li>
				<li class="ul_page_item">3</li>
				<li class="ul_page_item">4</li>
				<li class="ul_page_item">5</li>
			</ul>
		</div>

这里我来讲解一下分页和数据缓存的思路吧 （以下是页面的样式效果）


分页：当我每次点击按钮，Ajax请求到 所有 json数据之后，调用模板引擎，并在模板中根据请求的页数和行数进行判断，然后再渲染。简单来说就是每次点击后，获取8条数据放在页面显示(这里要说一下，我没有在数据文件里面进行处理，请求到所有数据之后，才在模板中进行筛选。让后端工程师写的话，可以直接在调用接口的时候传入参数，筛选数据。)
缓存：请求完数据后加一步操作，把这些数据存储在cacheArr数组中。在Ajax请求之前，判断在cacheArr数组中是否存在某个索引，和当前点击按钮的索引相同，有的话，则直接从本地的数组中拿到数据，否则发出Ajax请求去拿数据。

初次练习可以先完成分页，了解代码逻辑后，再做缓存。

记得引用jQuery、art-template模板引擎（文件地址记得换成自己的）

		<script src="../js/jquery-3.4.1.min.js"></script>
		<script src="../js/template-web.js"></script>

		//此处使用了art-template模板引擎。也可以用传统的字符串连接的方式用来创建dom元素
		<script id="contentTpl" type="text/html">
			{{each res}}
				{{if $value.id >= ((page * col) - 7) && $value.id <= (page * col)}}
					<li class="ul_content_item">{{$value.name}}</li>
				{{/if}}
			{{/each}}
		</script>

		<script>
			/*
			 * row  每次请求的数据  行
			 * page 页数
			 * (也就是说一页8行数据)
			 * cacheArr  用来存储ajax请求到的数据 ( 将数据放在本地，如果要请求的数据在本地已经存在，就不用再通过异步请求了 )
			*/
			var lis = $(".ul_page_item"),
				ul_content = $(".ul_content"),
				row = 8,
				page = 1;
			var cacheArr = [];

			$(function() {
				lis.click(function() {
					getData($(this));
				})
			})

			function getData(obj) {
				if (obj.index() in cacheArr) {
					$(`.ul_content li:nth-child(-n + ${row})`).remove();
					ul_content.append(cacheArr[obj.index()]);
				} else {
					page = obj.index() + 1;
					$.ajax({
						url: '../json/data.json',
						type: 'get',
						success: function(res) {
							renderData(res, page, row);
						}
					})
				}
			}

			function renderData(res, page, col) {
				var html = template('contentTpl', {
					res: res,
					page: page,
					col: col
				});
				cacheArr[page-1] = html;
				console.log(cacheArr);
				// 此处逻辑为  先移除后添加  ，否则ul_content的子元素的个数将一直为 0
				$(`.ul_content li:nth-child(-n + ${row})`).remove();
				ul_content.append(html);
			}
		</script>

json数据

[
	{
		"id": "1",
		"name": "一一一"
	},
	{
		"id": "2",
		"name": "二二二"
	},
	{
		"id": "3",
		"name": "三三三"
	},
	{
		"id": "4",
		"name": "四四四"
	},
	{
		"id": "5",
		"name": "五五五"
	},
	{
		"id": "6",
		"name": "六六六"
	},
	{
		"id": "7",
		"name": "七七七"
	},
	{
		"id": "8",
		"name": "八八八"
	},
	{
		"id": "9",
		"name": "九九九"
	},
	{
		"id": "10",
		"name": "十十十"
	},
	{
		"id": "11",
		"name": "十一"
	},
	{
		"id": "12",
		"name": "十二"
	},
	{
		"id": "13",
		"name": "十三"
	},
	{
		"id": "14",
		"name": "十四"
	},
	{
		"id": "15",
		"name": "十五"
	},
	{
		"id": "16",
		"name": "十六"
	},
	{
		"id": "17",
		"name": "十七"
	},
	{
		"id": "18",
		"name": "十八"
	},
	{
		"id": "19",
		"name": "十九"
	},
	{
		"id": "20",
		"name": "二十"
	},
	{
		"id": "21",
		"name": "二十一"
	},
	{
		"id": "22",
		"name": "二十二"
	},
	{
		"id": "23",
		"name": "二十三"
	},
	{
		"id": "24",
		"name": "二十四"
	},
	{
		"id": "25",
		"name": "二十五"
	},
	{
		"id": "26",
		"name": "二十六"
	},
	{
		"id": "27",
		"name": "二十七"
	},
	{
		"id": "28",
		"name": "二十八"
	},
	{
		"id": "29",
		"name": "二十九"
	},
	{
		"id": "30",
		"name": "三十"
	},
	{
		"id": "31",
		"name": "三十一"
	},
	{
		"id": "32",
		"name": "三十二"
	},
	{
		"id": "33",
		"name": "三十三"
	},
	{
		"id": "34",
		"name": "三十四"
	},
	{
		"id": "35",
		"name": "三十五"
	},
	{
		"id": "36",
		"name": "三十六"
	},
	{
		"id": "37",
		"name": "三十七"
	},
	{
		"id": "38",
		"name": "三十八"
	},
	{
		"id": "39",
		"name": "三十九"
	},
	{
		"id": "40",
		"name": "四十"
	}
]

本次记录就是这样。各位有什么问题可以直接在下方留言，我看到之后会马上回复解答。