【JS案例】分页器——使用原生JavaScript实现

在使用vue编写完一个分页器组件后，我对分页器的底层逻辑产生了兴趣，想在此组件的基础上再深入了解一些分页器的底层逻辑，了解vue与原生js的区别。我在github上看了一些大神写的分页器，属实牛逼，之后自己也根据他们的编写逻辑，反复推敲了个七八遍，也算是对分页器的逻辑掌握的差不多了，以下则是小编对原生js编写的一些体会。
首先我们需要明白在编写js时，我们需要在页面中创建哪些标签？标签应该赋予什么属性？分页器需要哪些数据？需要哪些函数？函数需要传哪些参数？总之，需要考虑的问题非常多，从构建到渲染再到功能实现都需要亲力亲为的。

页面构建思路：
所有按钮用a标签表示，全部放在一个div盒子中
点击切换的按钮有正常使用的属性值（prevPage和nextPage）和禁用属性值（disabled）
数值页面按钮有选中时的属性值（current）和未选中的属性值

创建出来的html和css代码如下：
html代码：

<div class="page"></div>

css代码：

        a {text-decoration: none;}.page {display: table;margin: 100px auto;}.page a {cursor: default;display: inline-block;color: #00C9A6;background-color: #D9F7F2;height: 25px;font-size: 10pt;line-height: 25px;padding: 0 9px;border: 1px solid #D9F7F2;margin: 0 2px;border-radius: 4px;vertical-align: middle;}.page a:not(.disabled):not(.current):hover {border: 1px solid #00C9A6;cursor: pointer;}.page a.current {display: inline-block;font-size: 10pt;height: 25px;line-height: 25px;padding: 0 9px;margin: 0 2px;color: #fff;background-color: #00C9A6;border: 1px solid #00C9A6;border-radius: 4px;vertical-align: middle;}.page a.disabled {display: inline-block;font-size: 10pt;height: 25px;line-height: 25px;padding: 0 9px;margin: 0 2px;color: #ddd;background: #D9F7F2;border: 1px solid #D9F7F2;border-radius: 4px;vertical-align: middle;cursor: no-drop;}

功能实现思路：
创建一个分页器函数（Pagination），在它的原型链上编写分页器的功能函数，这样写的好处是可以让所有的对象都能共享原型上的方法，通过构造函数生成的实例所拥有的方法都指向一个函数的索引，节省内存。
创建分页器所需要的数据，并存放在一个对象上（pages）。
pageCount：页面总数
size：单页面数据量
pageNo：当前页
total：总数据量
创建函数：
初始化数据的方法（init）：参数（pages）
功能：将要使用的数据在init中初始化，并调用renderPage传入pages对象完成构建分页器
构建页面的方法（renderPage）：参数（pages对象）
功能：构建分页器按钮，并调用switchPage实现切换功能
切换页面的方法（switchPage）：无参数
功能：实现点击切换功能，调用gotoPage函数实现数值按钮的点击切换效果
跳转页面的方法（gotoPage）：参数（current）
功能：根据传入的current值跳转到对应的页面

创建出来的js代码如下：

function Pagination(obj){this.init(obj)}Pagination.prototype={pages:{pageCount:0,//页面总数size:10,//单页面数据量pageNo:1//当前页},//初始化页面数据,参数:objinit:function(obj){var pages=this.pagespages.total=obj.total//总数据量obj.pageCount=Math.ceil(obj.total/obj.size)//总页码数pages.container=obj.container//外部容器pages.pageNo=obj.pageNo//当前页pages.pageCount=obj.pageCount//总页码数pages.eleHtml=obj.eleHtml//标签内部值pages.prevPage=obj.prevPage || 'prevPage'//上一页按钮pages.nextPage=obj.nextPage || 'nextPage'//下一页按钮this.renderPage(pages)},//构建页面,参数:argsrenderPage(args){var pageContainer=this.selectEle(args.container)var pageStr='',start,end//构建左侧点击按钮if(args.pageNo>1){pageStr=`<a class="prevPage">上一页</a>`}else{pageStr=`<a class="disabled">上一页</a>`}//构建中间页面按钮区域if(args.pageCount<6){//当总页码数小于6时for(start=0;start<args.pageCount;start++){end=start+1if(end==args.pageNo){pageStr+='<a class="current">'+end+'</a>'}else{pageStr+='<a>'+end+'</a>'}}}else{//当总页码大于等于6时start=args.pageNo-1//确认遍历的起始位置为当前页的前一页end=args.pageNo+1//确认遍历的结束位置为当前页的后一页if(args.pageNo>2){pageStr+='<a>'+1+'</a>'}//当前页大于2时，将页面1按钮写死else {end =4}//当前页小于等于2时，将遍历的结束位置写死为4if(args.pageNo>args.pageCount-3){start=args.pageCount-3}//当前页为最后四个页面时，将遍历的起始位置写死为倒数第四个页面值if(args.pageNo>3){pageStr+='<a>...</a>'}//当前页大于第三个页面时，将省略号按钮展现出来//对中间按钮进行遍历for(;start<=end;start++){if(start<=args.pageCount && start>0){if(start==args.pageNo){pageStr+='<a class="current">'+start+'</a>'}else{pageStr+='<a>'+start+'</a>'}}}if(args.pageNo<args.pageCount-2){pageStr += '<a>...</a>'}//当前页面小于倒数第三个页面时，将省略号按钮展现出来if(args.pageNo<args.pageCount-1){pageStr+='<a>'+args.pageCount+'</a>'}//当前页面小于倒数第二个页面，将最后的页面按钮锁死}//构建右侧按钮if(args.pageNo<args.pageCount){pageStr+=`<a class="nextPage">下一页</a>`}else{pageStr+=`<a class="disabled">下一页</a>`}pageContainer.innerHTML=pageStrthis.switchPage()},//切换页面switchPage(){var pages=this.pages,g=thisvar aList=this.selectEle(pages.container+" a",true)//获取所有的a标签var current//定义一个当前页的标识//对所有的a标签遍历，绑定点击事件for(i in aList){if(i<aList.length){aList[i].addEventListener("click",function(){var eleHtml=this.innerHTML//定义一个属性值来获取数字按钮if(this.className==pages.prevPage){pages.pageNo>1 && (pageNo=pages.pageNo-1)}else if(this.className==pages.nextPage){pages.pageNo<pages.pageCount && (pageNo=pages.pageNo+1)}else{pageNo=parseInt(eleHtml)}pageNo && g.gotoPage(pageNo)})}}},//跳转页面,参数:currentgotoPage(current){this.pages.pageNo=currentthis.renderPage(this.pages)},//获取页面元素selectEle(select,all){return all ? document.querySelectorAll(select) : document.querySelector(select)}}var p=new Pagination({container: '.page',size: 10,pageNo: 1,total: 100})

代码解释：
实现该分页器的主要逻辑在renderPage函数中，在构建的时候，我们要考虑到当页面数据发生变化时，其样式也要随之变化
（1）首先构建左侧上一页按钮以及右侧下一页按钮，如果当前页面大于1或者小于页码最后一页，两个按钮正常使用，否则则禁用两个按钮
（2）构建中间的数字按钮
（2.1）总页码数小于6时，直接遍历展现出所有的数字按钮
（2.2）总页码数大于6时，令起始值为当前的页码数-1，结束值为当前的页码数+1，再遍历出所有的数字按钮
（2.2.1）当前页大于第二页或者当前页小于倒数第二个页面，分别将1按钮以及最后一个按钮写死。如果当前页小于等于2时，或者当前页为最后四个页面时，为了保证展示的按钮有三个，我们需要将初始值或者结束值写死
（2.2.2）当前页大于第三页或者当前页小于倒数第三个页面，分别展示左侧和右侧的省略号按钮

最后我们产生的页面如图所示:

通过对分页器采用原生js以及用vue，相比较之下我体会到了vue的优势在于：
1.提高了代码的可复用性，以及对代码的维护比较方便，例如，如果我们想添加一个输入框去选择我们想要跳转的页面，在vue中直接添加一个组件，而在原生js中我们需要在构建页面的函数中添加构建输入框的代码，维护性很差。
2.vue将一些常用的js操作封装起来供我们使用，例如v-for就是对js中的for循环进行封装，使用起来更加简便。
3.页面的灵活性更强，例如标签的类名我们可以动态进行赋值来应对页面的数据变化产生相应的样式变化。

【JS案例】分页器——使用原生JavaScript实现相关推荐

html原生js进度条圆形,原生 JavaScript 实现进度条
原生JavaScript特效 JavaScript实现进度进度条实现介绍使用JavaScript实现进度条功能. 原理:通过鼠标移动事件,获取鼠标移动的距离. 步骤: (1)html 中 div ...
非常不错的一款html5【404页面】,不含js脚本可以左右摆动,原生JavaScript实现日历功能代码实例(无引用Jq)...
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下成品显示,可左右切换月份 ...
animate用法 js原生_用原生Javascript 创建带动画的固顶导航菜单
当我们在网页中加入一个导航菜单的时候,需要考虑很多因素.如何确定它的位置?如何定义样式?还需要保证它具有良好的响应性.又或者你想为它添加一些炫酷的动画.这时你可能会对 jQuery 感兴趣,因为它会帮 ...
【实验小案例】原生JavaScript实现日历表
原生JavaScript打印日历表作者: 迷恋修改记录 2022年12月12日 BUG 已修改原代码的95行中,rows最多行数为5行,这是不对的,当一个大月的第一天是星期六,或者小月的第一天是 ...
原生Javascript 操作 css类名 - 踩坑篇
文章目录原生Javascript 操作 css类名效果图示下: 案例 · 代码如下: 重要代码提示: 其他无关参考: 官方参考: 原生Javascript 操作 css类名不建议用 .class ...
前端框架这么火，还有必要学好原生 JavaScript 吗？
作为一名前端工程师,JavaScript 你一定每天都在用.但是,即便工作 5 年以上的前端也不一定用得非常熟,甚至很多前端对 JavaScript 的掌握程度仅仅停留在会用的层面. 而且 Vue/R ...
java excel 插件_轻量级的原生JavaScript的Excel插件——JExcel
介绍 jExcel是一个轻量级的原生javascript插件,用于创建与Excel或任何其他电子表格软件兼容的基于Web的交互式表格和电子表格.可以从JS数组,JSON,CSV或XSLX文件创建在线电 ...
开源在线excel编辑器_轻量级的原生JavaScript的Excel插件——JExcel
介绍 jExcel是一个轻量级的原生javascript插件,用于创建与Excel或任何其他电子表格软件兼容的基于Web的交互式表格和电子表格.可以从JS数组,JSON,CSV或XSLX文件创建在线电 ...
html5支持原生js,HTML5怎么学原生的js？让你对前端有了新的认识
原标题:HTML5怎么学原生的js?让你对前端有了新的认识已经学习了HTML5两个月,第一个月主要学习HTML和CSS,第二个月学完了原生的js,学完原生的js后对前端有了新的认识,了解了前端并不是 ...

【JS案例】分页器——使用原生JavaScript实现

【JS案例】分页器——使用原生JavaScript实现相关推荐

最新文章

热门文章