分页组件的构成

废话不多说，我们先来分析一下一个分页组件结构，实际这个分析很关键，比真正的逻辑判断重要的多，下面先看图：

我们可以看到此分页组件：

《上一页》《下一页》 2 个 ： 2
《首页》《尾页》 2 个 ： 2
 省略号 2 个 ： 2
 当前页 1 个 ： 1
 当前页左右各2个 ：2 * 2
复制代码

所以这个分页组件一共是由 2 + 2 + 2 + 1 + 2 * 2 = 11 个 元素构成。记住这个数，先给他起个名字吧叫baseCount，待会要着重用它。分析到这逻辑实际已经完成74%了，是不是惊呆了？但是不要着急，我们继续分析一下分页组件需要哪些参数：

参数我已经标注好了，大家应该能知道这几个参数的意思，我就不解释了。好，说会刚才的那个baseCount，我们看看baseCount和组件变量有啥关系，发现只跟around有关系：baseCount = 2 + 2 + 2 + 1 + 2 * around。到这完成75%。

怎么使用baseCount

我们已经得到一个很简单的值：baseCount，但是它有什么用呢？实际上它很关键，我们能够用这个值来判断分页组件什么时候出现省略号。比如上面图中这个组件，除掉两边的上一页、下一页两个按钮，中间部分一共有11 - 2 = 9个元素，也就是说当分页的总数total小于等于9的时候，是不需要省略号的，因为位置够用，都能显示完全。

省略号的作用

先来看个小问题：1,...,3,4,5。这其中的省略号代表着啥？代表2吧。可是省略号这里直接用2不就行了吗，本身2也就占一个位置，用省略号岂不是多此一举。所以省略号的正确用法应该如这样：1,...,4,5,6。这里省略号代表2,3。因此省略号的作用就是最少代替2个元素。

接下来看分页组件省略号出现的位置，一般会有三种情况，上面的例子是一种，就是两边都出现省略号，还有两种（不会只出现在中间的）：

1、只出现在后面

a.先说只出现在后面的情况，根据刚刚得出的省略号的作用，也就是说它最少代替两个元素。所以我们就取这个最小值2，也就是当cur <= 首页(1) + 省略号最小值(2) + cur左边的值(2)的时候，前面并不会出现省略号，仅在后面出现省略号，因此可以确定省略号开始出现的位置：startPosition = 1 + 2 + 2。

b.同样的逻辑，我们还可以得出仅在前面出现省略号，后面不会出现省略号的一个临界位置：endPosition = 尾页(total) - 省略号最小值(2) - cur右边的值(2)。cur大于等于endPosition时只在前面出现省略号。

ok，逻辑分析已经完成了95%，还剩下一种两边都出现省略号的情况，我们不用分析了，除去刚才的两种情况就是它了，也就是当 startPosition < cur && cur < endPosition。

其他的位置怎么显示

分析完省略号的位置，其他的就超级简单了，还记得刚才那个很重要的baseCount吗，还是用它。 刚才得到的baseCount是11，因为上一页和下一页一直都会存在。我们可以先不用管这俩，只看中间实际用到的9个位置。

我们可以看到当省略号只出现在后面时，中间可用位置的最后两个一定是 ... 和 total。所以这个省略号前面的还剩下9 - 2 = 7个，给这个变量也取个名字叫surplus，就从1开始显示到surplus就好了。也是同样的道理，当省略号只出现在前面时，前面的两个位置一定是 1 和 ...。所以后面就是从 (total-surplus) 一直到 total 了。

还有就是两边都出现省略号，前面两个肯定是1 和 ...，后面两个又肯定是**... 和 total**。中间是cur以及其左右两边的各around个。

到此，分析就全部结束了，提功一个生成最终组件对饮的数组的方法给大家去验证：

/**
 * 
 * @param {Number} total 
 * @param {Number} cur 
 * @param {Numbre} around 
 */
const makeResult = (total,cur,around) => {
    let result = [];
    let baseCount = around * 2 + 1 + 2 + 2 + 2; //总共元素个数
    let surplus = baseCount - 4; //只出现一个省略号 剩余元素个数
    let startPosition = 1 + 2 + around,endPosition = total - 2 - around;

    if(total <= baseCount - 2){ //全部显示 不出现省略号
        result =  Array.from({length: total}, (v, i) => i + 1);
    }else{ //需要出现省略号
        if(cur <= startPosition){ //1.只有后面出现省略号
            result = [...Array.from({length: surplus}, (v, i) => i + 1),"...",total]
        }else if(cur >= endPosition) { //2.只有前边出现省略号
            result = [1,'...',...Array.from({length: surplus}, (v, i) => total - surplus + i + 1)]
        }else{ //3.两边都有省略号
            result = [1,'...',...Array.from({length: around * 2 + 1}, (v, i) => cur - around + i),'...',total]
        }
    }

    return result
}
复制代码

总结

听说用自己写的分页组件，ajax速度会比以前快3毫秒，所以学会了后赶紧自己也封装一个分页组件试一试吧，用react、vue或者源生js都可以，逻辑都是一样的。