全棧之路-雜篇-前端分頁封裝優化

　　分頁在項目中是很廣泛存在的，如何封裝才能讓使用者使用方便，讓代碼可讀性強，以前在寫代碼的過程當中，不多注意這方面的東西，可是隨着年齡的增大，做爲程序員，面子確定是要的，就像我想寫的一手好字，一樣，我也想寫出優雅的代碼！七月老師的風袖項目，這裏的場景是小程序中的分頁實現，裏面那個分頁的封裝很值得學習，簡單記錄一下！

1、微信小程序中分頁問題

微信小程序中分頁須要考慮哪些方面呢？如何才能作好一個分頁呢？如下這些方面存在的問題，你在作小程序中分頁的時候考慮到了嗎？反正我在作分頁的時候是沒有考慮這麼全面的，沒事，一直在學習的路上！

一、一條數據也沒有，爲空的狀況

二、是不是最後一頁，還有沒有更多數據

三、請求分頁數據的累加

這個不像PC端分頁，有嚴格的分頁按鈕來點擊，你點擊哪頁的數據，我來請求加載哪頁的數據就行，小程序中的分頁是用戶觸發上拉觸底事件，來進行更多也就是下一頁數據的加載的，這裏就存在分頁數據累加的問題，須要將已經請求的數據和請求的下一頁數據進行累加，而後使用setData()方法進行從新渲染，顯示出來，例如：總共有100條數據，第一次加載1-20，第二次加載21-40 顯示1-40數據 ... 直到100數據加載完成，提示用戶加載完成，沒有更多數據

四、分頁數據的加載狀態

　　非分頁數據  a 正在加載  b 空

　　分頁數據      a 正在加載  b 加載完成  c 空

五、上滑觸低，加載分頁數據，避免用戶重複發送過多請求，致使數據庫查詢次數過多，數據庫崩潰

2、代碼實現

將分頁相關的方法封裝成Paging類，調用使用方直接實例化Paging類。而後調用getMoreData()方法進行分頁數據的請求

一、paging類總體結構搭建（毛坯房）

（1）封裝類的時候首先明確需求，這裏的具體就是想要獲取到分頁數據，那麼Paging類中須要一個方法來實現這個需求

（2）getMoreData()方法 至關於Generator 生成器中的next方法

（3）參數如何處理 如何傳遞到Paging類中 這裏用到的是constructor 構造器 初始化一些必要的參數

 1 class Paging{
 2   start
 3   count
 4   url
 5 
 6   constructor(url, count, start){
 7     this.count = count
 8     this.start = start
 9     this.url = url
10   }
11   getMoreData(){
12     //生成器 generator
13   }
14 }

二、Paging類主方法簡單封裝（改水，改電，鋪地板）

（1）看看最重要的getMoreData()方法，如何進行數據的獲取 這裏首先須要考慮的就是數據鎖的問題，封裝_getLocker()和_releaseLocker()方法

（2）嘗試着將數據鎖加到getMoreData方法中

（3）新建一個真正的獲取數據的方法 _actualGetData()方法

 1 class Paging{
 2   start
 3   count
 4   url
 5   locker = false //建立locker屬性
 6 
 7   constructor(url, count, start){
 8     this.count = count
 9     this.start = start
10     this.url = url
11   }
12   getMoreData(){
13     //生成器 generator
14     if(!this._getLocker()){
15       return
16     }
17     this._actualGetData()
18     this._releaseLocker()
19   }
20 
21   _actualGetData(){
22     // 真實獲取數據的方法 須要調用Http的request方法 傳遞一個Object參數對象
23   }
24 
25   _getLocker(){
26     // 獲取鎖
27     if(this.locker){
28       return false
29     }
30     this.locker = true
31     return true
32   }
33   _releaseLocker(){
34     this.locker = false
35   }
36 }

三、獲取真實數據的方法封裝（刷白，吊天花板，吊燈）

（1）首先須要考慮的是 調用方須要傳遞請求參數、url、請求方式，須要封裝成一個Object對象 這裏就是req，將原來的url參數換成req

（2）url 例：v1/spu/latest?start=0&count=10 後面的參數須要進一步的封裝，才能使用方便 使用方只須要傳遞 url：v1/spu/latest 這種就行

（3）getCurrentReq() 方法中，當頻繁的進行調用的時候，咱們從this.req中取出url，可能致使url重複拼裝，最終獲得錯誤的url 解決方法是從新提取出url參數

（4）對返回結果的封裝，返回特定的一個數據結構

（5）對於moreData的判斷 寫在函數中，由於不少地方須要使用，這裏的處理方式是將moreData封裝成一個屬性

（6）處理累加器的accumulator 封裝爲一個屬性 寫一個累加的方法進行累加操做

（7）調用請求以前進行moreData的判斷

  1 import {
  2   Http
  3 } from "./http";
  4 class Paging {
  5   start
  6   count
  7   req
  8   locker = false //建立locker屬性
  9   url // 添加url屬性，解決url重複疊加問題
 10   moreData = true
 11 
 12   constructor(req, count, start) {
 13     this.count = count
 14     this.start = start
 15     this.req = req
 16     this.url = req.url
 17   }
 18   async getMoreData() {
 19     if(!this.moreData){
 20       return
 21     }
 22     //生成器 generator
 23     if (!this._getLocker()) {
 24       return
 25     }
 26     const data = await this._actualGetData()
 27     this._releaseLocker()
 28     return data
 29   }
 30 
 31   async _actualGetData() {
 32     // 真實獲取數據的方法 須要調用Http的request方法 傳遞一個Object參數對象
 33     const req = this._getCurrentReq()
 34     let paging = await Http.request(this.req)
 35     if (!paging) {
 36       return null
 37     }
 38     if (paging.total === 0) {
 39       // 不存在分頁數據
 40       return {
 41         empty: true,
 42         items: [],
 43         moreData: false,
 44         accumulator: []
 45       }
 46     }
 47     // 對moreData進行判斷 由於這個變量須要不少地方用 把這個屬性封裝成屬性
 48     this.moreData = this._moreData(paging.total_page, paging.page)
 49     if (this.moreData) {
 50       this.start += this.count
 51     }
 52     // 累加操做
 53     this._accumulate(paging.items)
 54     return {
 55       empty:false,
 56       items:paging.items,
 57       moreData:this.moreData,
 58       accumulator:this.accumulator
 59     }
 60   }
 61 
 62   _accumulate(){
 63     // 分頁數據累加的方法
 64     this.accumulator = this.accumulator.concat(items)
 65   }
 66 
 67   _moreData(totalPage, pageNum) {
 68     // 總頁數 當前頁碼
 69     return pageNum < totalPage - 1
 70   }
 71 
 72   _getCurrentReq() {
 73     // 封裝req參數
 74     let url = this.url
 75     const params = `start=${this.start}&count=${this.count}`
 76     if (url.includes('?')) {
 77       url += '&' + params
 78     } else {
 79       url += '?' + params
 80     }
 81     thi.req.url = url
 82     return this.req
 83   }
 84 }
 85 
 86 _getLocker() {
 87   // 獲取鎖
 88   if (this.locker) {
 89     return false
 90   }
 91   this.locker = true
 92   return true
 93 }
 94 _releaseLocker() {
 95   this.locker = false
 96 }
 97 }
 98 
 99 export {
100   Paging
101 }

四、封裝完成

其餘操做請自行完成！！！

 

 內容出處：七月老師《從Java後端到全棧》視頻課程

七月老師課程連接：https://class.imooc.com/sale/javafullstack