原生 JS實現一個簡單分頁插件

最近作的一個 PC端的需求，這個需求中有一個小點，頁面底部有一塊列表區域，這個列表的數據量比較大，須要進行分頁控制，切換頁碼的時候，發送一個 ajax請求，在頁面無刷新的狀況下，實現列表數據的刷新，因此就涉及到了前端分頁功能，到網上看了一圈，發現那些開源的相關插件要麼有各類依賴，要麼太複雜用不上，要麼上手有點困難，因此就想着應該也不太難，本身寫個得了。

關於這種分頁功能，平時很常見，不過須要本身動手作的需求卻不多，因此一直停留在知道應該就是那麼回事，但實際上本身歷來沒怎麼探究過的層面上，知道應該會涉及到一些邏輯判斷，不會實現起來應該沒什麼難度，然而，真的等到本身着手實現的時候，才知道什麼叫想得美。

---

簡單介紹

先上效果圖：

有點相似於 Github搜索結果頁的底部分頁，可能部分邏輯有點出入，但整體應該差很少

代碼使用 ES6語法，這個插件實際上是一個 class，babel打包後可兼容到 IE9，原生js無任何依賴。

整個插件類代碼 SimplePagination加上空行註釋什麼的共約 200行左右，不過其中有部分代碼是輔助代碼，例如初始化、選擇器、增刪類等方法，再除去空行註釋，最後剩下的核心代碼也就不到 100行的樣子。

主要的判斷邏輯都在 gotoPage這個方法中，由於須要考慮到各類狀況，因此裏面寫了不少的 if.. else...判斷，沒寫下這些代碼以前，我以爲這個東西充其量也就幾個判斷差很少了，可是沒想到會有這麼多，每次的頁碼切換都對應着不一樣的判斷分支，比較繁瑣。

---

核心代碼簡要分析

核心方法是 gotoPage，乍一看，此方法中處處都是 if...else..判斷，彷佛無從下手，可是不論頁碼如何變，也不論是如何切換到某個頁碼的，只須要記住一點，那就是切換到某個頁碼時，這個頁碼對應的整個分頁組件的狀態是肯定的，這一點很重要，只要把握住了這點，那一連串的 if...else...判斷的意義其實也就清晰了。

此方法最外層的一個 if...else...判斷是針對頁碼是否須要顯示省略號佔位符的，若是頁碼總數小於頁面上課同時存在的頁碼數，那麼就不須要省略符號佔位了，就是一種比較簡單的分頁，例以下面這種：

對於這種狀況，只須要在切換頁碼的時候，變換 active的頁碼便可。

至於另外那種須要省略號佔位的狀況，纔是複雜的地方，而這個分支裏，最外層有 3個判斷，這 3個判斷包括了全部頁碼切換的狀況。

第一個判斷是針對分頁組件左邊不須要出現省略號佔位符的狀況，例以下面這種：

第二個判斷是針對分頁組件右邊不須要出現省略號佔位符的狀況，例以下面這種：

第三個判斷是針對分頁組件兩邊都須要出現省略號佔位符的狀況，例以下面這種：

整個分頁組件的全部狀態，確定都被包括在這三種狀態中，因此接下來的邏輯判斷只須要針對這三個狀態就好了。

---

用法

首先 new這個類，而後調用 init方法，傳入相應的參數便可，例如：

const slp = new SimplePagination(12)
slp.init({
  container: '.box',
  maxShowBtnCount: 3,
  onPageChange: state => {console.log('pagination change:', state.pageNumber)}
})
複製代碼

其中，在 new實例化 SimplePagination類的時候，須要傳入 1個參數，即總頁數(totalPageCount)，分頁插件須要根據此值來進行頁碼元素的繪製。

調用 init方法時，爲了方便傳參，此方法接收一個對象，對象中存在如下屬性：

參數名	類型	default	說明	是否必填
container	string	body	一個DOM元素的選擇器，id 或者 class都可，表示分頁的容器	否
maxShowBtnCount	number	5	不包括開頭和結尾的兩個固定按鈕外，中間最多展現幾個數字頁碼按鈕	否
pCName	string	page-li	全部的分頁頁碼元素的統一類名，包括上一頁、下一頁	否
activeCName	string	page-active	當選中頁碼時添加的類名class	否
dataNumberAttr	string	頁碼元素上的一個屬性，其值爲頁碼元素所表示的頁碼	data-number	否
prevCName	string	page-prev	上一頁 按鈕的類名class	否
nextCName	string	page-next	下一頁 按鈕的類名class	否
disbalePrevCName	string	no-prev	禁用 上一頁 按鈕的可用性時給此按鈕添加的類名class	否
disbaleNextCName	string	no-next	禁用 下一頁 按鈕的可用性時給此按鈕添加的類名class	否
pageNumberCName	string	page-number	不包括 上一頁 下一頁、省略號佔位符按鈕以外的全部頁碼元素統一類名	否
swEvent	string	click	觸發切換頁面的事件	否
onPageChange	string	-	頁碼切換時的回調函數	否

除了根據頁面上的頁碼和上一頁、下一頁按鈕進行頁碼切換外，插件還有一個 gotoPage方法可用，此方法接收一個類型爲 number的參數，調用此方法，就會跳到此參數指定的頁碼上，例如，跳轉到頁碼 9上：

slp.gotoPage(9)
複製代碼

若是傳入的參數不是合法的頁碼，則不會進行任何操做。

本文的可運行示例代碼已經放到 Github上了，有興趣的能夠看下~

SimplePagination這個類主要在於頁碼切換的邏輯判斷，外加簡單地組裝了 DOM結構，我在示例代碼中隨便寫了個樣式，若是你不喜歡這個樣式徹底能夠本身重寫。