用原生js封装一个分页器
起因：这次项目还是用原生的js来写的，我负责的是后台，分页是后台最常见的一个功能了，于是干脆封装一下,废话少说，直接上代码
这里是基本的样式
.pagination {display: flex;width: 600px;height: 35px;margin: 0 auto;margin-left: 275px;/* border: 1px solid red; */
}.pagination span a {box-sizing: border-box;text-decoration: none;color: black;
}.pagination span {/* border: 1px solid red; */text-align: center;width: 40px;height: 35px;line-height: 35px;margin: 0px 2px;
}.pagination span i {font-size: 10px;font-weight: 100;
}.pagination span img {width: 30px;height: 25px;
}.pagination .pageStyle a {display: block;text-align: center;width: 40px;height: 35px;line-height: 35px;/* background-color: bisque; */border: 1px solid #ccc;border-radius: 5px;
}.pagination .pageStyle a:hover {border: 1px solid rgb(27, 129, 121);
}.pagination .active {background-color: cadetblue;
}这个是在js里面定义的一个分页器类
class PageClass { //定义一个分页器类 constructor(ele, pageNum, page, cb) { //需要传入4个参数，第一个容器元素，第二个页面总数，第三个当前页面数，第四个为回调函数this.ele = ele; //定义属性this.pageNum = pageNum;this.page = page;this.cb = cb;this.renderPage(); //执行渲染的方法this.operate(); //给实例化对象绑定各种操作的方法}renderPage() { //在类的原型上定义一个渲染的方法let str = '';if (this.pageNum > 5) { //判断当前分页的页面总数是否超过5页if (this.page <= 4) { //如果页面总数大于5 ，再判断当前页是否小于或者等于第四页for (let i = 0; i < 5; i++) { //如果当前页是小于等于4以内的页数 ，遍历1到5if ((i + 1) == this.page) { //判断当前页是否等于 当前 索引值（索引值从0开始） + 1str += `<span class="pageStyle" myPage="${i + 1}"><a href="javascript:;" class="active">${i + 1}</a></span>`;//等于的话说明渲染的是当前页，给当前页一个active的类名进行渲染} else { //如果渲染的不是当前页str += `<span class="pageStyle" myPage="${i + 1}"><a href="javascript:;">${i + 1}</a></span>`;//普通渲染就行了}}str += `<span><i>•••</i></span><span class="pageStyle" myPage="${this.pageNum}"><a href="javascript:;">${this.pageNum}</a></span>`;//最后渲染一个最末尾页} else if (this.page > 4 && this.page < this.pageNum - 3) { //判断当前页是否大于第四页，且小于最大页数减去 3 str += `<span class="pageStyle" myPage="1"><a href="javascript:;">1</a></span><span><i>•••</i></span>`; //渲染一个首页for (let i = this.page - 3; i < this.page + 2; i++) {if ((i + 1) == this.page) { //判断当前正在渲染的是否为当前页str += `<span class="pageStyle" myPage="${i + 1}"><a href="javascript:;" class="active">${i + 1}</a></span>`;//如果是当前页，给一个active类名进行渲染} else {str += `<span class="pageStyle" myPage="${i + 1}"><a href="javascript:;">${i + 1}</a></span>`;//如果不是，普通渲染就行}}str += `<span><i>•••</i></span><span class="pageStyle" myPage="${this.pageNum}"><a href="javascript:;">${this.pageNum}</a></span>`;//渲染一个尾页} else if (this.page >= this.pageNum - 3) {//如果当前页数大于或者等于最大页数 - 3 str += `<span class="pageStyle" myPage="1"><a href="javascript:;">1</a></span><span><i>•••</i></span>`; //渲染一个首页for (let i = this.pageNum - 5; i < this.pageNum; i++) {//从倒数第5页开始渲染if ((i + 1) == this.page) { //如果渲染的是当前页str += `<span class="pageStyle" myPage="${i + 1}"><a href="javascript:;" class="active">${i + 1}</a></span>`;//增加一个active类名，进行渲染} else {str += `<span class="pageStyle" myPage="${i + 1}"><a href="javascript:;">${i + 1}</a></span>`;//否则普通渲染}}}} else { //如果最大页数小于等于5for (let i = 0; i < this.pageNum; i++) { //直接渲染到当前最大页数if ((i + 1) == this.page) { //判断渲染的是否为当前页数str += `<span class="pageStyle" myPage="${i + 1}"><a href="javascript:;" class="active">${i + 1}</a></span>`;//如果是增加一个active类名，进行渲染} else {str += `<span class="pageStyle" myPage="${i + 1}"><a href="javascript:;">${i + 1}</a></span>`;//否则普通渲染就行了}}}//将所有内容渲染到容器盒子里//第一页//上一页//中间页面//下一页//最后一页this.ele.innerHTML = `<span class="first"><a href="javascript:;"> <img src="/public/img/index.png" alt=""></a></span><span class="prev"><a href="javascript:;"><img src="/public/img/before.png" alt=""></a></span>${str}<span class="next"><a href="javascript:;"><img src="/public/img/after.png" alt=""></a></span><span class="last"><a href="javascript:;"><img src="/public/img/end.png" alt=""></a></span>` ;}operate() { //在类原型上定义一个operate的方法，给这个类绑定点击事件const _that = this; //申明一个常量接收thislet firstEle = this.ele.querySelector(".first"); //获取第一页的元素let lastEle = this.ele.querySelector(".last"); //获取最后一页的元素let nextEle = this.ele.querySelector(".next"); //获取下一页的元素let prevEle = this.ele.querySelector(".prev"); //获取上一页的元素let pageStyleEles = this.ele.querySelectorAll(".pageStyle"); //获取所有的中间页面的元素firstEle.onclick = function () { //当点击第一页时_that.page = 1; //让page属性重新赋值为1_that.cb(_that.page); //并将page属性通过回调函数cb传递出去}lastEle.onclick = function () { //当点击最后一页时_that.page = _that.pageNum; //让page属性重新赋值为页面最大值_that.cb(_that.page); //并将page属性通过回调函数cb传递出去}nextEle.onclick = function () { //当点击下一页时if (_that.page < _that.pageNum) { //先判断当前页是否小于最大页_that.page = _that.page + 1; //如果没有超过，给page属性自增1_that.cb(_that.page); //并将page属性通过回调函数cb传递出去}}prevEle.onclick = function () { //当点击上一页时if (_that.page > 1) { //先判断当前页是否大于第一页_that.page = _that.page - 1; //如果是大于第一页的话，page属性自减1_that.cb(_that.page); //并将page属性通过回调函数cb传递出去}}pageStyleEles.forEach(function (pageStyleEle) { //遍历获取到中间页面的所有元素pageStyleEle.onclick = function () { //当点击其中一页时_that.page = parseInt(this.getAttribute("myPage")); //获取这个元素自定义属性，myPage，属性值是当前页 ，并将当前页赋值给page属性_that.cb(_that.page); //将page属性通过回调函数cb传递出去}});}}在html页面中
只需要防止这样的一个盒子就行了
<div class="pagination"> </div>使用的时候，js里面这样写
let pageEle = document.querySelector(".pagination"); //获取页面渲染的容器
ready(1); //调用渲染容器的方法，传递初始页面为1
function ready(page) { // 定义一个方法用来渲染容器new PageClass(pageEle, 1000, page, function (page) { //new 一个PageClass类，传递容器元素，总页面数，当前页面，以及回调函数console.log(page, '看看点击Page的时候页面是否会发生变化');ready(page); //回调函数调用渲染容器的方法getAllUsers(10, page);//这个是自定义的页面变化的时候获取页面数据的渲染表格的方法});
}整个跑起来大致就是这个样子
至于显示的这个回到首页，上一页，下一页，回到最后一页的图片，可以去阿里妈妈图标库去看看，挑选自己喜欢的。分享到这里就结束了
学技术的话，看到这里就行。
我是分割线
个人的小感悟
很多人可能会选择在过年或者是期末的时候进行总结，那为什么会选择现在进行来一波回忆杀呢？
因为，距离我去年将要加入未来软件工作室就不到4天的时间了。
对我来说，这一年的成长，也许，技术也许是次要的，心理的成长占了绝大部分。
去年的这个时候，来大学快一个月的时间了，对学校的基本情况了解的差不多了，知道了未来是学校最强的小组，一股劲儿的想要来到这里，找到了当时小组大三的学姐，然后学姐把我拉进了未来软件工作室的招新群，等待工作室正式开始招新投简历，然后面试，分到未来五组当中，融入新的团体.......这就是梦的开始，也是很多事情的开始，若要究其根本，命运的齿轮究竟是从什么时候开始转动的 ? 可能是偷偷改志愿学计算机，可能是报考之后在贴吧四处找寻学校信息从此多了一位师父照拂，可能是在知乎找到了熟知学校信息的计算机学姐，从此多了一位领路人，一切的一切，把大学的画卷铺开在我面前......
去年这一年
有难关面前，能成为家人依靠的成就感
有熬夜到凌晨3，4点，连续3天睡眠时间不超过10个小时但依然活力满满的冲劲儿
有趁着水课多，连着整整睡了4，5天的疲惫
有被一次一次的抛弃，再一次一次的振作
有用自己学到的东西解决问题时候的喜悦
更有无数个加一个瞬间把自己从堕落中拉出来
专研自己的热爱
从书中寻找共鸣
去西安看看那富贵迷人眼
看那没被污染前的海
......
一些事情到此完成闭环。
我看到的，我感受的，
回忆太多，可是，经历过的千千万，都抵不过当下这一瞬间的永恒。
