十五分鐘--分頁邏輯--包學包會

分頁組件的構成

廢話很少說，咱們先來分析一下一個分頁組件的結構，實際這個分析很關鍵，比真正的邏輯判斷重要的多，下面先看圖：

咱們能夠看到此分頁組件：

《上一頁》《下一頁》 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的時候，是不須要省略號的，由於位置夠用，都能顯示徹底。

進度達到了80%，go on，那何時出現省略號呢？嗯，這是個好問題，不過咱們在肯定啥時候出現省略號以前最好先弄清楚省略號有啥做用，這是本篇文章第二個關鍵點，也是最重要的一個關鍵點。

省略號的做用

先來看個小問題：1,...,3,4,5。這其中的省略號表明着啥？表明2吧。但是省略號這裏直接用2不就好了嗎，自己2也就佔一個位置，用省略號豈不是畫蛇添足（實際不少分頁組件實現過程當中省略號最少只代替了一個元素，也並無大礙）。因此省略號的正確用法應該如這樣：1,...,4,5,6（省略號表明2,3）或者6,7,8,...,12（省略號表明9,10,11）。所以我的認爲省略號的做用就是最少代替2個元素。

接下來看分頁組件省略號出現的位置，通常會有三種狀況，最開始的例子是一種，就是兩邊都出現省略號，還有兩種以下：

一、只出如今後面

二、只出如今前面

出現省略號的前提條件是total > baseCount -2，由於此時可用位置不夠顯示徹底全部頁數，須要用省略號來代替。

a.先肯定只出如今後面的狀況（前面即將出現省略號），首先肯定何時前面恰好出現省略號？根據剛剛得出的省略號的做用，也就是說它最少代替兩個元素。因此咱們就取這個最小值2，此時是在前面剛剛出現省略號，省略號表明的越多則說明cur越日後。

這個時候cur的位置應該是在：首頁(1) + 省略號最小值(2) + cur左邊的值around(2)的下一個，即cur = 1 + 2 + around + 1，標記一下叫startPosition。所以當cur < startPosition時前面是不會出現省略號的，僅在後面出現省略號，因此就肯定了省略號開始出現時的位置：startPosition = 1 + 2 + around + 1。

b.一樣的邏輯，咱們還能夠得出只在前面出現，後面不會出現省略號的一個臨界位置：endPosition = 尾頁(total) - 省略號最小值(2) - cur 右邊的值(2) - 1。即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個。

當有省略號出現時，這種邏輯保證了分頁組件總共須要的元素的個數是固定的，且只跟around有關,around取值建議爲2或者3。到此，分頁邏輯分析就所有結束了，下面是一個生成分頁組件對應數組的方法，供各位小夥伴參考：

/** * * @param {Number} total * @param {Number} cur * @param {Numbre} around */
const makePage = (total,cur,around) => {
    let result = [];
    let baseCount = around * 2 + 1 + 2 + 2 + 2; //總共元素個數
    let surplus = baseCount - 4; //只出現一個省略號 剩餘元素個數
    let startPosition = 1 + 2 + around + 1;//前面出現省略號的臨界點
    let endPosition = total - 2 - around - 1;//後面出現省略號的臨界點

    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
}
makePage(8,2,2);//[1, 2, 3, 4, 5, 6, 7, 8]
makePage(20,3,2);//[1, 2, 3, 4, 5, 6, 7, "...", 20]
makePage(20,10,2);//[1, "...", 8, 9, 10, 11, 12, "...", 20]
makePage(20,19,2);//[1, "...", 14, 15, 16, 17, 18, 19, 20]
複製代碼

總結

能夠根據這個方法生成的數組來肯定分頁組件顯示哪些內容，用react、vue或者源生js均可以，邏輯都是同樣的，還能夠根據需求加上跳轉到第幾頁、是否顯示首頁尾頁等相關功能和邏輯。