全栈之路-杂篇-前端分页封装优化

　　分页在项目中是很普遍存在的，如何封装才能让使用者使用方便，让代码可读性强，之前在写代码的过程中，很少注意这方面的东西，但是随着年龄的增大，作为程序员，面子肯定是要的，就像我想写的一手好字，同样，我也想写出优雅的代码！七月老师的风袖项目，这里的场景是小程序中的分页实现，里面那个分页的封装很值得学习，简单记录一下！

一、微信小程序中分页问题

微信小程序中分页需要考虑哪些方面呢？如何才能做好一个分页呢？以下这些方面存在的问题，你在做小程序中分页的时候考虑到了吗？反正我在做分页的时候是没有考虑这么全面的，没事，一直在学习的路上！

1、一条数据也没有，为空的情况

2、是否是最后一页，还有没有更多数据

3、请求分页数据的累加

这个不像PC端分页，有严格的分页按钮来点击，你点击哪页的数据，我来请求加载哪页的数据就行，小程序中的分页是用户触发上拉触底事件，来进行更多也就是下一页数据的加载的，这里就存在分页数据累加的问题，需要将已经请求的数据和请求的下一页数据进行累加，然后使用setData()方法进行重新渲染，显示出来，例如：总共有100条数据，第一次加载1-20，第二次加载21-40 显示1-40数据 ... 直到100数据加载完成，提示用户加载完成，没有更多数据

4、分页数据的加载状态

　　非分页数据  a 正在加载  b 空

　　分页数据      a 正在加载  b 加载完成  c 空

5、上滑触低，加载分页数据，避免用户重复发送过多请求，导致数据库查询次数过多，数据库崩溃

二、代码实现

将分页相关的方法封装成Paging类，调用使用方直接实例化Paging类。然后调用getMoreData()方法进行分页数据的请求

1、paging类整体结构搭建（毛坯房）

（1）封装类的时候首先明确需求，这里的具体就是想要获取到分页数据，那么Paging类中需要一个方法来实现这个需求

（2）getMoreData()方法 相当于Generator 生成器中的next方法

（3）参数如何处理 如何传递到Paging类中 这里用到的是constructor 构造器 初始化一些必要的参数

class Paging{
  start
  count
  url

  constructor(url, count, start){
    this.count = count
    this.start = start
    this.url = url
  }
  getMoreData(){
    //生成器 generator
  }
}

2、Paging类主方法简单封装（改水，改电，铺地板）

（1）看看最重要的getMoreData()方法，如何进行数据的获取 这里首先需要考虑的就是数据锁的问题，封装_getLocker()和_releaseLocker()方法

（2）尝试着将数据锁加到getMoreData方法中

（3）新建一个真正的获取数据的方法 _actualGetData()方法

class Paging{
  start
  count
  url
  locker = false //创建locker属性

  constructor(url, count, start){
    this.count = count
    this.start = start
    this.url = url
  }
  getMoreData(){
    //生成器 generator
    if(!this._getLocker()){
      return
    }
    this._actualGetData()
    this._releaseLocker()
  }

  _actualGetData(){
    // 真实获取数据的方法 需要调用Http的request方法 传递一个Object参数对象
  }

  _getLocker(){
    // 获取锁
    if(this.locker){
      return false
    }
    this.locker = true
    return true
  }
  _releaseLocker(){
    this.locker = false
  }
}

3、获取真实数据的方法封装（刷白，吊天花板，吊灯）

（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的判断

import {
  Http
} from "./http";
class Paging {
  start
  count
  req
  locker = false //创建locker属性
  url // 添加url属性，解决url重复叠加问题
  moreData = true

  constructor(req, count, start) {
    this.count = count
    this.start = start
    this.req = req
    this.url = req.url
  }
  async getMoreData() {
    if(!this.moreData){
      return
    }
    //生成器 generator
    if (!this._getLocker()) {
      return
    }
    const data = await this._actualGetData()
    this._releaseLocker()
    return data
  }

  async _actualGetData() {
    // 真实获取数据的方法 需要调用Http的request方法 传递一个Object参数对象
    const req = this._getCurrentReq()
    let paging = await Http.request(this.req)
    if (!paging) {
      return null
    }
    if (paging.total === 0) {
      // 不存在分页数据
      return {
        empty: true,
        items: [],
        moreData: false,
        accumulator: []
      }
    }
    // 对moreData进行判断 因为这个变量需要很多地方用 把这个属性封装成属性
    this.moreData = this._moreData(paging.total_page, paging.page)
    if (this.moreData) {
      this.start += this.count
    }
    // 累加操作
    this._accumulate(paging.items)
    return {
      empty:false,
      items:paging.items,
      moreData:this.moreData,
      accumulator:this.accumulator
    }
  }

  _accumulate(){
    // 分页数据累加的方法
    this.accumulator = this.accumulator.concat(items)
  }

  _moreData(totalPage, pageNum) {
    // 总页数 当前页码
    return pageNum < totalPage - 1
  }

  _getCurrentReq() {
    // 封装req参数
    let url = this.url
    const params = `start=${this.start}&count=${this.count}`
    if (url.includes('?')) {
      url += '&' + params
    } else {
      url += '?' + params
    }
    thi.req.url = url
    return this.req
  }
}

_getLocker() {
  // 获取锁
  if (this.locker) {
    return false
  }
  this.locker = true
  return true
}
_releaseLocker() {
  this.locker = false
}
}

export {
  Paging
}

4、封装完成

其他操作请自行完成！！！

 

 内容出处：七月老师《从Java后端到全栈》视频课程

七月老师课程链接：https://class.imooc.com/sale/javafullstack