摘要：是一個組件庫目前擁有的組件語法編寫，無依賴原生模塊化，以上支持，請開啟靜態服務器預覽效果，靜態服務器傳送門采用變量配置樣式辛苦造輪子，歡迎來倉庫四月份找工作，求內推，坐標深圳寫在前面去年年底項目中嘗試著寫過一個分頁的組件，然后就有了寫的想法

QingUI是一個UI組件庫

目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, Checkbox, Radio, Switch, InputNumber, Input

ES6語法編寫，無依賴

原生模塊化，Chrome63以上支持，請開啟靜態服務器預覽效果，靜態服務器傳送門

采用CSS變量配置樣式

辛苦造輪子，歡迎來github倉庫star：https://github.com/veedrin/qing

四月份找工作，求內推，坐標深圳

去年年底項目中嘗試著寫過一個分頁的Angular組件，然后就有了寫QingUI的想法

過程還是非常有意思的

接下來我會用幾篇文章分別介紹每個組件的大概思路，請大家耐心等待

這一篇介紹Paginator分頁

最重要的，求star，求fork，求內推

repo: QingUI

一般的需求是，我有一個列表，但是我不想一下讓用戶看這么多，一次看一點，再想看，翻到下一頁

當然現在有無限滾動，只要滾動到一定距離，就給你加載新的數據，這個我們不考慮

分頁也有兩種做法，一種是一次性加載所有數據，前端做分頁；一種是每次加載一部分，點擊分頁就是觸發再次加載的動作

第一種做法應該很少見了吧，首次加載的壓力太大

頁面初始加載的時候向后臺請求數據，請求哪些數據呢？要顯示的列表信息，還有當前是第幾頁

如果每頁顯示多少條是可配置的，那么還需要每頁顯示多少條和總條數

初始加載肯定是第一頁

然后用戶看完第一頁，往下翻，可能是翻到第二頁，也可能是翻到后面的任一頁，無所謂

我們獲取到用戶想翻到第幾頁的信息以后，傳給后端，后端再把相應頁的列表信息傳過來，前端展示

注意，這個時候分頁是要變的，用戶點擊的那一頁要高亮，之前那一頁去掉高亮，如果頁數比較多，省略號的位置也要根據規則發生變化

所以我們得出一個重要信息，分頁組件展示頁碼的那一塊每次點擊都是要重新渲染的

$bar就是展示頁碼的容器，展示頁碼的模板封裝到另一個函數里

一開始能想到這個，后面就不需要推倒重來了，你猜我有沒有推倒重來 :)

tpl += `
    
﹤
    

    
﹥
`;

如果我們把展示邏輯放到模板渲染函數里，那模板渲染函數會變得非常繁雜

我們可以分成兩步，第一步構建數據模型，第二步根據數據模型生成模板

我仔細的觀察過GitHub（GitHub已經非常優美了）的分頁邏輯，QingUI的分頁邏輯就是根據GitHub來的

我總結了一下，代碼注釋里也有：

首頁和尾頁必須展示

如果有省略號則首尾只展示一條，當前頁前后各展示兩條共五條，一邊沒有空間則疊加到另一邊

首尾頁與當前頁五條可以重合

跨度大于等于兩條才出現省略號，省略號用0表示

哦，忘了解釋，數據模型是怎么映射的

分頁都是從1開始，最大隨意（一般不會太大），所以我們構建一個數組，1到正無窮就代表1到正無窮頁，0代表省略號

1到7頁之間可以完全展示，為什么？

首尾各1頁，中間共5頁，加起來就是7頁，超過7頁就會有省略號

不是說跨度大于等于2頁才會有省略號嗎？

因為首頁和中間的5頁是可以重合的，如果有8頁，前面5頁和最后1頁中間正好隔了2頁

所以1到7頁之間可以完全展示

for (let i = 1; i <= c; i++) {
    this.model.push(i);
}

如果當前頁小于4，至少要保證當前頁加左右至少有5頁，所以這種情況要多帶帶拎出來

后面再加一個省略號，以及尾頁

for (let i = 1; i <= 5; i++) {
    this.model.push(i);
}
this.model.push(0, c);

這種情況就是首頁和中間5頁不重合的情況，所以for循環不需要寫死

同樣，后面再加一個省略號，以及尾頁

for (let i = 1; i <= p + 2; i++) {
    this.model.push(i);
}
this.model.push(0, c);

這種情況就是距離首頁的跨度大于等于2，距離尾頁的跨度也大于等于2，于是前后都有省略號

this.model.push(1, 0);
for (let i = p - 2; i <= p + 2; i++) {
    this.model.push(i);
}
this.model.push(0, c);

這種情況是說后面沒有省略號了，但是也不至于和尾頁產生重合

this.model.push(1, 0);
for (let i = p - 2; i <= c; i++) {
    this.model.push(i);
}

中間5頁與尾頁產生重合了，至少要保證渲染出5頁，所以for循環寫死

this.model.push(1, 0);
for (let i = c - 4; i <= c; i++) {
    this.model.push(i);
}

6種情況：

沒有省略號

前面有省略號但是中間5頁與首頁重合

前面有省略號且中間5頁與首頁不重合

前面和后面都有省略號

后面有省略號且中間5頁與尾頁不重合

后面有省略號但是中間5頁與尾頁重合

還是挺有規律的是吧

數據模型代碼

buildModel() {
    // 每次重新初始化
    this.model = [];
    const c = this.pageCount, p = this.position;
    if (c < 8) {
        for (let i = 1; i <= c; i++) {
            this.model.push(i);
        }
    } else {
        if (p < 4) {
            for (let i = 1; i <= 5; i++) {
                this.model.push(i);
            }
            this.model.push(0, c);
        } else if (p < 6) {
            for (let i = 1; i <= p + 2; i++) {
                this.model.push(i);
            }
            this.model.push(0, c);
        } else {
            if (p < c - 4) {
                this.model.push(1, 0);
                for (let i = p - 2; i <= p + 2; i++) {
                    this.model.push(i);
                }
                this.model.push(0, c);
            } else if (p < c - 1) {
                this.model.push(1, 0);
                for (let i = p - 2; i <= c; i++) {
                    this.model.push(i);
                }
            } else {
                this.model.push(1, 0);
                for (let i = c - 4; i <= c; i++) {
                    this.model.push(i);
                }
            }
        }
    }
}

如果你不喜歡GitHub分頁規則，或者自己有特殊的需求

可以根據上面的規律自己定制一套分頁邏輯

真的，往上套就可以了

數據模型都構建出來了，渲染就簡單了

for (const item of this.model) {
    if (item > 0) {
        if (this.position !== item) {
            tpl += `
${item}
`;
        } else {
            tpl += `
${item}
`;
        }
    } else {
        tpl += "
···
";
    }
}

在某些情況，我們要讓用戶知道往前或者往后點擊是無效的，要進行置灰處理

規則也挺簡單的

if (this.position === 1) {
    this.$prev.classList.add("disabled");
    this.$next.classList.remove("disabled");
}

if (this.position === this.pageCount) {
    this.$next.classList.add("disabled");
    this.$prev.classList.remove("disabled");
}

if (this.position === this.pageCount) {
    this.$prev.classList.remove("disabled");
    this.$next.classList.remove("disabled");
}

這種情況很容易被忽略

如果總共只有1頁，那左右都點不了，而且立即返回

if (this.pageCount === 1) {
    this.$prev.classList.add("disabled");
    this.$next.classList.add("disabled");
    return;
}

這里主要是注意一個問題

假如現在的當前頁是比較靠后的位置

然后我增加每頁顯示的條數，那勢必總頁數就變小了

有可能總頁數變的比當前頁還小

那么這個時候就只能強制改變當前頁，讓它變成最后1頁了

這就是一個輸入框，加keyup監聽Enter鍵的事件

Paginator比較核心的邏輯就在這里了

最有意思的是構建數據模型的那一段，挺費腦子的

下一篇文章介紹Tree，敬請期待

最后，求star，求fork，求內推

repo: QingUI