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

原文: 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 下哦。