摘要：是一個(gè)組件庫(kù)目前擁有的組件語(yǔ)法編寫(xiě)，無(wú)依賴原生模塊化，以上支持，請(qǐng)開(kāi)啟靜態(tài)服務(wù)器預(yù)覽效果，靜態(tài)服務(wù)器傳送門(mén)采用變量配置樣式辛苦造輪子，歡迎來(lái)倉(cāng)庫(kù)四月份找工作，求內(nèi)推，坐標(biāo)深圳寫(xiě)在前面去年年底項(xiàng)目中嘗試著寫(xiě)過(guò)一個(gè)分頁(yè)的組件，然后就有了寫(xiě)的想法

QingUI是一個(gè)UI組件庫(kù)

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

ES6語(yǔ)法編寫(xiě)，無(wú)依賴

原生模塊化，Chrome63以上支持，請(qǐng)開(kāi)啟靜態(tài)服務(wù)器預(yù)覽效果，靜態(tài)服務(wù)器傳送門(mén)

采用CSS變量配置樣式

辛苦造輪子，歡迎來(lái)github倉(cāng)庫(kù)star：https://github.com/veedrin/qing

四月份找工作，求內(nèi)推，坐標(biāo)深圳

去年年底項(xiàng)目中嘗試著寫(xiě)過(guò)一個(gè)分頁(yè)的Angular組件，然后就有了寫(xiě)QingUI的想法

過(guò)程還是非常有意思的

接下來(lái)我會(huì)用幾篇文章分別介紹每個(gè)組件的大概思路，請(qǐng)大家耐心等待

這一篇介紹Paginator分頁(yè)

最重要的，求star，求fork，求內(nèi)推

repo: QingUI

一般的需求是，我有一個(gè)列表，但是我不想一下讓用戶看這么多，一次看一點(diǎn)，再想看，翻到下一頁(yè)

當(dāng)然現(xiàn)在有無(wú)限滾動(dòng)，只要滾動(dòng)到一定距離，就給你加載新的數(shù)據(jù)，這個(gè)我們不考慮

分頁(yè)也有兩種做法，一種是一次性加載所有數(shù)據(jù)，前端做分頁(yè)；一種是每次加載一部分，點(diǎn)擊分頁(yè)就是觸發(fā)再次加載的動(dòng)作

第一種做法應(yīng)該很少見(jiàn)了吧，首次加載的壓力太大

頁(yè)面初始加載的時(shí)候向后臺(tái)請(qǐng)求數(shù)據(jù)，請(qǐng)求哪些數(shù)據(jù)呢？要顯示的列表信息，還有當(dāng)前是第幾頁(yè)

如果每頁(yè)顯示多少條是可配置的，那么還需要每頁(yè)顯示多少條和總條數(shù)

初始加載肯定是第一頁(yè)

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

我們獲取到用戶想翻到第幾頁(yè)的信息以后，傳給后端，后端再把相應(yīng)頁(yè)的列表信息傳過(guò)來(lái)，前端展示

注意，這個(gè)時(shí)候分頁(yè)是要變的，用戶點(diǎn)擊的那一頁(yè)要高亮，之前那一頁(yè)去掉高亮，如果頁(yè)數(shù)比較多，省略號(hào)的位置也要根據(jù)規(guī)則發(fā)生變化

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

$bar就是展示頁(yè)碼的容器，展示頁(yè)碼的模板封裝到另一個(gè)函數(shù)里

一開(kāi)始能想到這個(gè)，后面就不需要推倒重來(lái)了，你猜我有沒(méi)有推倒重來(lái) :)

tpl += `
    
﹤
    

    
﹥
`;

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

我們可以分成兩步，第一步構(gòu)建數(shù)據(jù)模型，第二步根據(jù)數(shù)據(jù)模型生成模板

我仔細(xì)的觀察過(guò)GitHub（GitHub已經(jīng)非常優(yōu)美了）的分頁(yè)邏輯，QingUI的分頁(yè)邏輯就是根據(jù)GitHub來(lái)的

我總結(jié)了一下，代碼注釋里也有：

首頁(yè)和尾頁(yè)必須展示

如果有省略號(hào)則首尾只展示一條，當(dāng)前頁(yè)前后各展示兩條共五條，一邊沒(méi)有空間則疊加到另一邊

首尾頁(yè)與當(dāng)前頁(yè)五條可以重合

跨度大于等于兩條才出現(xiàn)省略號(hào)，省略號(hào)用0表示

哦，忘了解釋?zhuān)瑪?shù)據(jù)模型是怎么映射的

分頁(yè)都是從1開(kāi)始，最大隨意（一般不會(huì)太大），所以我們構(gòu)建一個(gè)數(shù)組，1到正無(wú)窮就代表1到正無(wú)窮頁(yè)，0代表省略號(hào)

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

首尾各1頁(yè)，中間共5頁(yè)，加起來(lái)就是7頁(yè)，超過(guò)7頁(yè)就會(huì)有省略號(hào)

不是說(shuō)跨度大于等于2頁(yè)才會(huì)有省略號(hào)嗎？

因?yàn)槭醉?yè)和中間的5頁(yè)是可以重合的，如果有8頁(yè)，前面5頁(yè)和最后1頁(yè)中間正好隔了2頁(yè)

所以1到7頁(yè)之間可以完全展示

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

如果當(dāng)前頁(yè)小于4，至少要保證當(dāng)前頁(yè)加左右至少有5頁(yè)，所以這種情況要多帶帶拎出來(lái)

后面再加一個(gè)省略號(hào)，以及尾頁(yè)

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

這種情況就是首頁(yè)和中間5頁(yè)不重合的情況，所以for循環(huán)不需要寫(xiě)死

同樣，后面再加一個(gè)省略號(hào)，以及尾頁(yè)

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

這種情況就是距離首頁(yè)的跨度大于等于2，距離尾頁(yè)的跨度也大于等于2，于是前后都有省略號(hào)

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

這種情況是說(shuō)后面沒(méi)有省略號(hào)了，但是也不至于和尾頁(yè)產(chǎn)生重合

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

中間5頁(yè)與尾頁(yè)產(chǎn)生重合了，至少要保證渲染出5頁(yè)，所以for循環(huán)寫(xiě)死

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

6種情況：

沒(méi)有省略號(hào)

前面有省略號(hào)但是中間5頁(yè)與首頁(yè)重合

前面有省略號(hào)且中間5頁(yè)與首頁(yè)不重合

前面和后面都有省略號(hào)

后面有省略號(hào)且中間5頁(yè)與尾頁(yè)不重合

后面有省略號(hào)但是中間5頁(yè)與尾頁(yè)重合

還是挺有規(guī)律的是吧

數(shù)據(jù)模型代碼

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分頁(yè)規(guī)則，或者自己有特殊的需求

可以根據(jù)上面的規(guī)律自己定制一套分頁(yè)邏輯

真的，往上套就可以了

數(shù)據(jù)模型都構(gòu)建出來(lái)了，渲染就簡(jiǎn)單了

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

在某些情況，我們要讓用戶知道往前或者往后點(diǎn)擊是無(wú)效的，要進(jìn)行置灰處理

規(guī)則也挺簡(jiǎn)單的

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頁(yè)，那左右都點(diǎn)不了，而且立即返回

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

這里主要是注意一個(gè)問(wèn)題

假如現(xiàn)在的當(dāng)前頁(yè)是比較靠后的位置

然后我增加每頁(yè)顯示的條數(shù)，那勢(shì)必總頁(yè)數(shù)就變小了

有可能總頁(yè)數(shù)變的比當(dāng)前頁(yè)還小

那么這個(gè)時(shí)候就只能強(qiáng)制改變當(dāng)前頁(yè)，讓它變成最后1頁(yè)了

這就是一個(gè)輸入框，加keyup監(jiān)聽(tīng)Enter鍵的事件

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

最有意思的是構(gòu)建數(shù)據(jù)模型的那一段，挺費(fèi)腦子的

下一篇文章介紹Tree，敬請(qǐng)期待

最后，求star，求fork，求內(nèi)推

repo: QingUI