前言
上星期寫的任務裡面有需要進行分頁的處理，git搜尋了一番，沒有覺得合適的，於是自己臨時寫了個分頁的演算法。
然後等閒下來的時候，決定把分頁進行優化並推廣。於是乎，乙個適合前後端分離的頁碼生成器就這樣出來了。
先別廢話了，直接上 git 位址 和 demo 位址。看官果斷點選進去瞧瞧看。專案主頁的 readme 文件的自動排版將更好。
先講講設計思想
整個開發流程圍繞事件繫結進行開發。
脫離 callback **這種**方法，直接使用 事件 方式觸發換頁前後的動作，方便解耦。
既然使用這種方式進行**，就使用全域性變數掛載分頁的資料，方便**時候進行分頁資料的訪問。
庫的依賴
由於開發庫的時候，並沒有使用原生的語法進行元素或者事件繫結的操作，因此需要依賴某個庫。
現階段，經過測試支援 zepto 以及 jquery （二選一）。
css 方面，建議還是直接自己寫或者使用 bootstrap 的庫，源**裡面有從 bootstrap 裡面抽出來的分頁 css **。
簡潔demo
由於分頁就必須知道分頁資料大小，因此必須傳輸配置物件。
var pageconfig =;
配置之後，進行呼叫
//執行即可分頁
pagebuilder(pageconfig);
這樣子就能進行分頁了。
**的書寫
**的書寫雖然放在了呼叫分頁的主函式後面，但是記得在呼叫分頁之前就定義這些事件，因為一旦呼叫分頁函式，就馬上觸發分頁**，寫在後面了，就會忘記了剛分頁時候的事件**了。
首先是分頁前的**，分頁之前會觸發 window 下面乙個自定義分頁之前的事件 beforepagechange ，因此要觸發處理分頁前的動作，就這樣處理：
//提前定義好分頁之前的動作，可選
$(window).on('beforepagechange', function
() )
同樣道理，分頁之後的**差不多：
//提前定義好分頁之後的動作，可選
$(window).on('afterpagechange', function
() )
特別說明
乙個頁面只適合使用乙個分頁例項。分頁的動作將在 hashchange 觸發之後進行分頁。
裡面監控頁碼變化的函式：
//繫結換頁的事件
$(window).on('hashchange', function
() }
else
if (hash === "#page=next")
else
if (hash === "#page=prev")
})
因為 hashchange 只支援 ie8+，
所以，該外掛程式只適合 ie8+，甚至ie8的怪異模式不支援 hashchange 事件。
結束語
這個庫還有很多可以優化的地方，例如頁碼快取，還有作用域優化之類的，還沒進行優化。
乙個vue go echo前後端分離的專案的上線
這是乙個web前後端分離專案的上線過程。解決了跨域問題 前端用的axios,一定會遇到跨域的問題。這裡先說一下axios的乙個坑，傳送post請求的時候,如果不是發json資料,一定要先設定一下 複製 新增引數為 var params new urlsearchparams axios then 複...
如何搭建乙個前後端分離的專案
如下 動態請求，client nginx tomcat nginx client 靜態請求，client nginx client nginx作用 1 處理靜態請求 2 負載均衡 3 解決跨域問題 自定義標識 呼叫controller請求時都加上乙個字首，比如 con nginx處理請求時，請求如果...
如何做乙個前後端分離專案
程式設計師工作 4.前後端整合測試 前後端請求流程 專案是基於前後端分離的架構進行開發，前後端分離架構總體上包括前端和服務端，通常是多人協作並行開發，對於不同職位的人來說，有不同的側重點。1 需求分析 梳理使用者的需求，分析業務流程 2 介面定義 根據需求分析定義介面 3 服務端和前端並行開發 依據...