简单封装分页功能pageView.js

分页是一个很简单，通用的功能。作为一个有经验的前端开发人员，有义务把代码中类似这样公共的基础性的东西抽象出来，一来是改善代码的整体质量，更重要的是为了将来做类似的功能或者类似的项目，能减少不必要的重复工作量。在实际项目中，尤其是网站类型的项目中，分页部分的设计总是个性化比较强，基本上都不会长的一样，所以可能之前抽象出来的东西，如果写的不够灵活的话，对这些个性化强的项目来说，可能直接应用的时候也得做些调整才行。本文尝试提供一个尽量满足这两方面要求的分页组件。

先介绍下写这个东西的背景：一直以来，我都想写一个相对比较灵活简单的列表组件，去年写过一个版本，后来改了几次，现在已经用到好几个项目里面去了，重构起来也有不少的工作量，因为应用到的页面已经把比较多了，所以就没有轻易地去做这个事情。最近的工作，涉及到一个相对简单的列表页面，然后给的时间也比较多，于是我准备趁这个时候把我一直想写的列表组件给写出来。现有的那个列表管理组件，没有做好职责分离，列表的管理跟分页的管理是揉在一起的，代码也比较乱，所以这次我打算先从分页组件下手。因为分页组件与列表之间并没有太多耦合的逻辑，所以当把它们分离出来的时候，代码会更加清晰，独立，将来要维护也方便些。前端虽然做不到像后台那样，考虑那么多的设计模式，但要是能把代码写的更让人容易理解的话，对团队对公司来说，真的是一件很好的事情。

虽然网上有不少的分页插件，但是都不值得去用，一来是有轻微的学习成本，二来是不符合自己的封装的思想，看着别扭；而且像这样简单的封装，最适合自己动手去写，加强面向对象编程的锻炼了。

下面就开始这个分页组件的内容。

基本思想

先来说下我的基本想法。分页这个部分，从内容上可能包括有：上一页，首页，下一页，尾页以及具体页；页码输入跳转；分页大小；记录总数；记录范围等；从结构上，必须知道分页大小，当前页的索引以及记录总数才能构造所有的内容；从操作上：改变分页大小，或者是点击上一页，首页，下一页，尾页以及具体页，或者是直接输入页码，都会引发外部分页内容的拉取。对外部来说，不管分页部分做什么操作，只要在这些操作之后，通知外部去拉取即可，分页只需要提供一个简单的api给外部，告诉它们当前的分页大小和页码；但是在外部拉取到新的内容之后，还得做一件事情，就是要根据最新的记录总数，去更新分页部分的UI，前面说分页的内容需要记录总数，页码和分页大小才能构造出来。由于页码跟分页大小都属于分页内部管理的，所以外部更新分页UI的时候，只需要告诉分页最新的记录数就够了。以上就是分页组件跟外部功能互相交互时候的唯一场景，基于这些，就可以把所以把分页相关的东西都封装起来，给外部提供几个简单的api来实现它们之间的调用关系，最终完成我们需要的分离的目的。

效果演示

方便大家看到这个东西的实际用法跟效果，我模拟真实的场景，写了一个简单的demo，一起来看看。

demo效果：

demo地址：

http://liuyunzhuge.github.io/blog/form/dist/html/pageView.html

pageView相关css：

https://github.com/liuyunzhuge/blog/blob/master/form/src/css/page_view.css

pageView.js源码：

https://github.com/liuyunzhuge/blog/blob/master/form/src/js/mod/pageView.js

demo相关的源码：

https://github.com/liuyunzhuge/blog/blob/master/form/src/js/app/pageView.js

源码部分也可以直接打开demo地址，通过chrome的开发者工具来查看，因为这些代码放在git上面，是跟我以前的代码放在一块的，怕不知道的人还以为这么个小东西，还需要写那么多个文件。再补充下其它方面的说明：这些代码都是用seajs管理的，然后整个pageView.js是用我自己之前写的一个用来做js的面向对象编程的模块class.js方式开发的，可能没了解过的人，不知道它是做什么用，关于它的介绍都在下面这篇文章里面：

详解Javascript的继承实现

DEMO解析

直接看我在demo里，完成那个页面的核心代码：

从上面的代码也能看出，这个分页组件最核心的api也就是下面几个：

getParams（）：它是一个实例方法，返回组件的分页大小跟页码，至于这两个值的参数名字，可以通过option来修改；

refresh（total）：这也是一个实例方法，外部传给它一个最新的记录总数，分页组件再根据它重新渲染UI；

onChange：这是一个函数类型的回调，它可以作为一个option在创建实例的时候传入，所有分页操作都会反馈到这个回调里面来，通常只要把外部拉取内容的动作绑定它上面即可。

考虑到要控制分页的重复操作问题，还另外加了一个disable和enable的api，这个比较好理解了。当分页被disable的时候，会显示禁用的样式，cursor为not-allowed，所有分页操作都将无效。

实际上，我在最近的一个项目中， 写类似demo的一个简单分页功能，就是这么写的，业务代码很少，逻辑也比较清晰，虽然说列表管理，比如渲染那一块，还可以再封装一下，但是在这种简单场景中，不再去封装，也是可以的，因为它本身已经很简单，再想办法封装，也增加不了多少的灵活性。

现在还有不少的公司在采用没有封装的代码，分页的功能在不同的页面都写一遍，每个位置都定义五六个function，比如goFirst goPrev goLast goNext goPage这种，从结果上来说没啥不好，就是在做重复的事情的时候效率不高，不好维护。要是都能封装起来，相信能给团队带来不少好处。

概要说明

先从option说起，以下是pageView.js定义的所有option及默认值：

var DEFAULTS = {  defaultIndex: 1,//默认页  defaultSize: 10,//默认分页大小  pageIndexName: 'page',//分页参数名称  pageSizeName: 'page_size',//分页大小参数名称  onChange: $.noop,//分页改变或分页大小改变时的回调  onInit: $.noop,//初始化完毕的回调  allowActiveClick: true,//控制当前页是否允许重复点击刷新  middlePageItems: 4,//中间连续部分显示的分页项  frontPageItems: 3,//分页起始部分最多显示3个分页项，否则就会出现省略分页项  backPageItems: 2,//分页结束部分最多显示2个分页项，否则就会出现省略分页项  ellipseText: '...',//中间省略部分的文本  prevText: '上一页',  nextText: '下一页',  prevDisplay: true,//是否显示上一页按钮  nextDisplay: true,//是否显示下一页按钮  firstText: '首页',  lastText: '尾页',  firstDisplay: false,//是否显示首页按钮  lastDisplay: false,//是否显示尾页按钮};

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：简单封装分页功能pageView.js

关键词：JS