开始一个组件,毫无目的的写代码是一个不好的习惯,要经历分析=比;抽象=比;实现=比;应用四个阶段。
组件演示地址:https://github.com/CaptainLiao/zujian/tree/master/pagination
<>强分析需求
当前页码显示前后三页,以及在两端显示上一页,下一页
未显示的地方用“…”代替
举个栗子:
假设总共有30页
当前为第一页:1 2 3 4…30下一页
当前为第二页:上一页1 2 3 4 5…30下一页
当前为第三页:上一页1 2 3 4 5 6…30下一页
.
当前为第6页:上一页1…3 4 5 6 7 8 9…30下一页
.
当前为第29页:上一页1…26日27 28 29 30下一页
当前为第30页:上一页1…27 28 29 30
<>强抽象
分析上面的例子,发现决定输出的因素有两个:当前页码和总页数。
于是,我们设定一个函数用来表示当前页码的显示内容:
/* *
页面数量* @param{}当前页
* @param{号码}totalPage总页数
*/函数分页(页面,totalPage) {
var str=";//todo……
返回str;
}//运行函数,打印出值
var ret=分页(30)
console.log (ret)
之前
在上一页1 2 3 4 5 6 7…30下一页
<>强实现
输入和输出都有了,接着正式开始撸:
函数分页(页面,totalPage) {
var str=页面;//这里实现当前页面显示前后三项功能
(var i=1;i 1) {
str=我网站+‘+ str;
}
如果页面(+ i & lt;totalPage) {
str=str +的+ (+ i)页
}
}//以页面为中心,向左右扩展//向左,先判断当前向页左的第四个数是否大于1
如果(第4页比;1){
str='……' +页面;
}//继续向左判断
如果页面(在1){
str="上一页“+”…" + 1 + " " + str;
}//向右,判断当前页面向右的第四个数字是否小于totalPage
如果页面(+ 4 & lt;totalPage) {
str='……' + str;
}
如果页面(& lt;totalPage) {
str=str +‘+ totalPage +‘+’下一页”;
}
返回str;
}
之前
现在,我们可以执行下面的函数,取得我们想要的结果:
var=30;
(var i=1;i<总;我+ +){
var ret=showPage(我总);
console.log (ret)
}
之前
至此,我们已经实现了分页的逻辑。
<强>应用
接下来的应用就非常简单了,不外乎是给str加一些标签和类,于是我们就得到了一个分页组件:
HTML:
& lt; ul类id=皃agination-list”=癱learfix2”比;
& lt;/ul>
之前
javascript:
函数分页(页面,totalPage) {
var str=' & lt;李类=皃age-active”在“+页+ & lt;/li>;
(var i=1;i<=3;我+ +){
如果(页面——我比;1){
str=' & lt;李类=皃age-item”在“+(我)+“& lt;/li>”+“+ str;
}
如果页面(+ i & lt;totalPage) {
str=str + " " + " & lt;李类=皃age-item”在“+(页+ i) +“& lt;/li>”
}
}
如果(第4页的在1){
str=' & lt;李类=皃age-item”在…& lt;/li> ' + str;
}
如果页面(在1){
str=' & lt;李类=跋蛏戏场痹谏弦灰? lt;/li>‘+’‘+’& lt;李类=皃age-item”在1 & lt;/li>”+“+ str;
}
如果页面(+ 4 & lt;totalPage) {
str=str + ' & lt;李类=皃age-item”比;…& lt;/li>;
}
如果页面(& lt;totalPage) {
str=str + " " + " & lt;李类=皃age-item”在“+ totalPage +”& lt;/li>“+”、“+”& lt;李类=跋乱灰场弊４?下一页& lt;/li>”
}
返回str;
}
var totalPage=30;
var str=分页(1、totalPage);
var包=$ (" # pagination-list ");//这里引用了jQuery
wrap.html (str)
内(“点击”、“。page-item’,函数(){
var cur=方法($ ()。text ());
包装。html(分页(cur, totalPage));
});
之前
看看效果吧:
目前来说,进展顺利,但是!还有很多需要优化的地方:样式固定,不能自由更改;初始化和交互混杂在一起,没有对代码进行封装…
