简单的分页

原文链接

编程，很重要的一个技能就是抽象能力，就是现实中的琐事，我怎么用代码来表示。

一、简单的分页需求

1. 当前页码前后显示3页，然后需要显示第一页以及最后一页

2. 未显示的页码用省略号'...'表示

举例如下：

• 当前页码为1，那么显示1 2 3 4 ... 110 下一页

• 当前页码为2，那么显示上一页 1 2 3 4 5 ... 110 下一页

• 当前页码为3，那么显示上一页 1 2 3 4 5 6 ... 110 下一页

• 当前页码为4，那么显示上一页 1 2 3 4 5 6 7 ... 110 下一页

• 当前页码为5，那么显示上一页 1 2 3 4 5 6 7 8 ... 110 下一页

• 当前页码为6，那么显示上一页 1 ... 3 4 5 6 7 8 9 ... 110 下一页

• ...

• 当前页码为100，那么显示上一页 1 ... 97 98 99 100 101 102 103 ... 110 下一页

• ...

• 当前页码为109，那么显示上一页 1 ... 106 107 108 109 110 下一页

• 当前页码为110，那么显示上一页 1 ... 106 107 108 109 110

二、思路分析

不考虑超链接，我们可以将需求抽象出来。可以将这个需求简单成一个字符输出问题

要求：

1. 输入两个参数，当前页数page以及总页数total

2. 输出符合上述要求的字符串

可以考虑先定义一个函数showPage

function showPage(page, total){

}

过程：

1. 首先，我们来解决最普遍的需求：页数左右各添加3个页码

function showPage(page, total){
  var str = page; //首先记录传入的页码数字

  for(var i = 1; i <= 3; i++){

    if(page - i > 1){ //判断所传页码之前添加的页码数
      str = page - i + ' ' + str;
    }

    if(page + i < total){ //判断所传页码之后添加的页码数
      str = str + ' ' + (page+i);
    }
  }
}

1. 再来解决左边是否添加...

function showPage(page, total){
  var str = page; //首先记录传入的页码数字

  for(var i = 1; i <= 3; i++){

    if(page - i > 1){ //判断所传页码之前添加的页码数
      str = page - i + ' ' + str;
    }

    if(page + i < total){ //判断所传页码之后添加的页码数
      str = str + ' ' + (page+i);
    }
  }

  if(page - 3 > 1){ //判断页码左边是否添加'...'
    str = '... ' + str;
  }

  if(page + 3 < total){
    str = str + '... ';
  }

  return str;
}

1. 好像遗漏了什么。。。哦，我想起来了，我们忘记添加第一页跟最后一页了！

function showPage(page, total){
  var str = page; //首先记录传入的页码数字

  for(var i = 1; i <= 3; i++){

    if(page - i > 1){ //判断所传页码之前添加的页码数
      str = page - i + ' ' + str;
    }

    if(page + i < total){ //判断所传页码之后添加的页码数
      str = str + ' ' + (page+i);
    }
  }

  if(page - 3 > 1){ //判断页码左边是否添加'...'
    str = '... ' + str;
  }

  if(page > 1) {
    str = '上一页 ' + '1 ' + str;
  }

  if(page + 3 < total){
    str = str + '...';
  }

  if(page < total){
    str = str + ' ' + total + ' 下一页';
  }

  return str;
}

咦，看上去好了。但总感觉缺点什么~~~

三、测试用例

哦，想起来了，我们忘记写测试用例了。那我们来一个简单粗暴的吧~

var total = 110;
for(var i = 1; i <= total; i++){
  var ret = showPage(i, total);
  console.log(ret);
}