js頁碼生成庫，一個適合前后端分離的頁碼生成器

前言

上星期寫的任務里面有需要進行分頁的處理，git搜索了一番，沒有覺得合適的，於是自己臨時寫了個分頁的算法。

然后等閑下來的時候，決定把分頁進行優化並推廣。於是乎，一個適合前后端分離的頁碼生成器就這樣出來了。

先別廢話了，直接上 git 地址 和 demo 地址。看官果斷點擊進去瞧瞧看。項目主頁的 readme 文檔的自動排版將更好。

 

先講講設計思想

整個開發流程圍繞事件綁定進行開發。

脫離 callback 回調這種回調方法，直接使用 事件 方式觸發換頁前后的動作，方便解耦。

既然使用這種方式進行回調，就使用全局變量掛載分頁的數據，方便回調時候進行分頁數據的訪問。

 

庫的依賴

由於開發庫的時候，並沒有使用原生的語法進行元素或者事件綁定的操作，因此需要依賴某個庫。

現階段，經過測試支持 zepto 以及 jquery （二選一）。

css 方面，建議還是直接自己寫或者使用 bootstrap 的庫，源代碼里面有從 bootstrap 里面抽出來的分頁 css 代碼。

 

簡潔demo

由於分頁就必須知道分頁數據大小，因此必須傳輸配置對象。

var pageConfig = {
  // 每頁顯示的數據長度，必填，而且 >1
  prePageLenght: 10,
  // 數據的總長度，必填，而且 >1
  dataLength: 30,
  // 現在的頁碼，默認 1
  pageNow: 1,
  // 渲染分頁 html 的容器，一般框架的容器即可
  renderBox: $('.pagination-box')
};

配置之后，進行調用

 

// 運行即可分頁
pageBuilder(pageConfig);

 

這樣子就能進行分頁了。

回調的書寫

回調的書寫雖然放在了調用分頁的主函數后面，但是記得在調用分頁之前就定義這些事件，因為一旦調用分頁函數，就馬上觸發分頁回調，寫在后面了，就會忘記了剛分頁時候的事件回調了。

首先是分頁前的回調，分頁之前會觸發 window 下面一個自定義分頁之前的事件 beforePageChange ，因此要觸發處理分頁前的動作，就這樣處理：

// 提前定義好分頁之前的動作，可選
$(window).on('beforePageChange', function() {
  // callback
  // todo
  // 獲取當前頁碼，可以從 pageBuilder.page.pageNow 取得，注意此時的值為未分頁之前的舊頁碼。
})

同樣道理，分頁之后的回調差不多：

// 提前定義好分頁之后的動作，可選
$(window).on('afterPageChange', function() {
  // callback
  // todo
  // 獲取當前頁碼，可以從 pageBuilder.page.pageNow 取得
})

特別說明

一個頁面只適合使用一個分頁實例。分頁的動作將在 hashchange 觸發之后進行分頁。

里面監控頁碼變化的函數：

    // 綁定換頁的事件
    $(window).on('hashchange', function() {
      var hash = location.hash;
      var pageTemp = 0;
      if (/^#page=\d+$/.test(hash) === true) {
        // 直接是頁碼的
        pageTemp = hash.substring(6) | 0;
        if (defaultConfig.pageNow !== pageTemp) {
          defaultConfig.pageNow = pageTemp;
          $(window).trigger("renderPagination");
        }

      } else if (hash === "#page=next") {
        // 下一頁的
        location.hash = "page=" + ( defaultConfig.pageNow + 1 );
      } else if (hash === "#page=prev") {
        // 上一頁的
        location.hash = "page=" + ( defaultConfig.pageNow - 1 );
      }
    })

因為 hashchange 只支持 IE8+，

所以，該插件只適合 IE8+，甚至IE8的怪異模式不支持 hashchange 事件。

 

 

結束語

這個庫還有很多可以優化的地方，例如頁碼緩存，還有作用域優化之類的，還沒進行優化。

 

希望大家喜歡。喜歡的話，點個推薦吧，如果使用上了，記得 star 下哦。