使用Vue的HOC技術(shù)開發(fā)一個(gè)無限加載列表

stefan 發(fā)布于2019-08-23 14:36 / 1354人閱讀

摘要：高階組件的概念，是里面經(jīng)常提到的，類似于高階函數(shù)。高階函數(shù)高階組件高階組件用是代碼復(fù)用的優(yōu)秀工具，主要在處理邏輯方面和普適性上，有著奇效。

前言

在web開發(fā)上，我們都對(duì)數(shù)據(jù)采用分頁加載的機(jī)制，一種變形就是在頁面采用循環(huán)加載的機(jī)制，拉到頁面最下方有個(gè)加載更多的按鈕。問題在于，當(dāng)不同的數(shù)據(jù)要展示時(shí)，就要寫很多這種列表，但是其中的邏輯都是相似的。

維護(hù)一組數(shù)據(jù)

加載更多數(shù)據(jù)

將數(shù)據(jù)用對(duì)應(yīng)的組件顯示出來

處理加載狀態(tài)等

那有沒有這么一個(gè)組件，來完成這一切相同的邏輯呢？

需求

需要有這么一個(gè)InfiniteList組件，它負(fù)責(zé)管理相關(guān)數(shù)據(jù)的加載和維護(hù)，然后以列表的形式顯示出來，而列表項(xiàng)必須是由調(diào)用方?jīng)Q定的組件。

HOC

高階組件的概念，是React里面經(jīng)常提到的，類似于高階函數(shù)。
高階函數(shù)：(fn) => otherFn
高階組件：component => otherComponent
高階組件用是代碼復(fù)用的優(yōu)秀工具，主要在處理邏輯方面和普適性上，有著奇效。

所以我決定用HOC來實(shí)現(xiàn)這個(gè)需求

參考文章：http://hcysun.me/2018/01/05/%...
良心博客

本文涉及的知識(shí)

vue

vue的render函數(shù)

實(shí)現(xiàn) 0

我使用的是vue和iview UI庫(kù)

先弄出UI框架先，我用一個(gè)vue文件來構(gòu)建整個(gè)組件的基本框架。源代碼地址

html部分

用一個(gè)slot來分發(fā)要循環(huán)渲染的項(xiàng)目

js部分

一些UI有關(guān)的數(shù)據(jù)（不是很重要）

 props: {
      loadTip: {
        type: String,
        default: "加載更多"
      }
      ...
    },
    computed: {
      loadButtonText() {},
      tipIcon() {}
    }

這部分比較重要的只有一個(gè)事件發(fā)射，將點(diǎn)按鈕的行為轉(zhuǎn)換為請(qǐng)求加載數(shù)據(jù)

handleClickLoad() {
        // 發(fā)射 請(qǐng)求加載數(shù)據(jù)的 事件
        this.$emit("on-load");
      }

css部分略

接下來就是最重要的部分，編寫HOC
首先要明白，Vue中的組件，到底是什么。像我們寫一個(gè)Vue文件，export出的是一個(gè)對(duì)象，所以我們現(xiàn)在寫HOC，其實(shí)也是要最后返回一個(gè)對(duì)象。
所以我寫了下面的函數(shù)來生成HOC

/**
 * 使用高階組件的辦法實(shí)現(xiàn)了一個(gè)無限加載列表
 * 可以根據(jù)數(shù)據(jù)循環(huán)渲染出特定的組件，并且管理加載狀態(tài)
 * @param component 具體項(xiàng)的組件 {props: {data}}
*/
function InfiniteList(listItem) {
    return {
        props:...
        data(){}
        ...
    }
}

而我們?nèi)绻秩灸?，?dāng)然是用Vue的render函數(shù)

render(h) {
    return h(component, data, children);
}

我們使用組合的方式，最外層需要用到我們第1步寫到的模板，于是導(dǎo)入它，并注冊(cè)它

import InfiniteListTemplate from "./InfiniteListTemplate";
function InfiniteList(listItem) {
    return {
        ...
        components: {
          InfiniteListTemplate  //  列表框架的模板，這個(gè)模板里面只有ui表現(xiàn)
        },
        ...
    }
}

render函數(shù)對(duì)于熟悉React的程序員來說應(yīng)該是不難的，官網(wǎng)也有很詳細(xì)的介紹。

render(h) {
      const self = this;
      // 根據(jù) data 的 dataList循環(huán)渲染子組件
      const listItems = ...

      return h(InfiniteListTemplate, {
        props: {
          ...self.$props, // 傳遞所有參數(shù)
          hasMore: self.hasMore,  // 另外的hasMore和loading是這個(gè)HOC的state
          loading: self.loading
        },
        attrs: self.$attrs,
        on: {
          // 監(jiān)聽加載按鈕事件
          "on-load": () => self.handleLoadData()
        }
      }, listItems);
    },

這里在最外層渲染我們的模板（且稱為模板組件），并將當(dāng)前HOC的props,attrs傳遞給模板組件。
這里提到了HOC的data，非常簡(jiǎn)單，就是兩個(gè)狀態(tài)和一個(gè)數(shù)據(jù)數(shù)組

data() {
      return {
        hasMore: true,
        loading: false,
        dataList: []
      }
    }

然后呢，循環(huán)渲染在哪？別急，render中的listItems就是我們循環(huán)渲染出來的組件，這里使用了map，相信使用React的人非常熟悉這種風(fēng)格

const listItems = this.dataList.map(item => h(component, {
            props: {
              data: item
            }
          })
        );

最終返回的就是

return h(InfiniteListTemplate, {options}, listItems);

在哪里維護(hù)數(shù)據(jù)呢？當(dāng)然是要傳入一個(gè)加載數(shù)據(jù)的函數(shù)來進(jìn)行管理，我們?cè)贖OC的props里面定義

props: {
      tipColor,
      loadTip,
      loadingTip,
      // 上面的數(shù)據(jù)都是為了傳給模板（組件）
      offset: {
        type: Number,
        default: 5
      },
      // 數(shù)據(jù)加載的函數(shù)，需要的是一個(gè) (index, offset) => Promise<[]>
      loadDataFunc: {
        type: Function,
        default() {
          return (index, offset) => Promise.resolve(new Array(offset).map((o, i) => index + i));
        }
      }
    },

然后我們還記得模板函數(shù)發(fā)射了個(gè)on-load事件么？我們需要在HOC里監(jiān)聽它并且處理邏輯

render(h) {
    return h(InfiniteListTemplate, {
        ...
        on: {
            "on-load": () => self.handleLoadData()
        }
    }, listItems);
},
methods: {
      /**
       * 監(jiān)聽模板點(diǎn)出了加載按鈕時(shí)的操作
       * 調(diào)用數(shù)據(jù)加載函數(shù)加載數(shù)據(jù)
       * @return {Promise}
       */
      async handleLoadData() {
        try {
          this.loading = true;
          let res = await this.loadDataFunc(this.dataList.length, this.offset);
          if (res && res.length) {
            this.dataList = this.dataList.concat(res);
            this.$Message.success(`成功獲取到${res.length}條新數(shù)據(jù)`);
          } else {
            this.$Message.info(`已經(jīng)獲取了全部數(shù)據(jù)了`);
            this.hasMore = false;
          }
        } catch (e) {
          this.$Message.error("加載失敗" + e.message);
        } finally {
          this.loading = false;
        }
      }
    },

完整InfiniteList.js代碼

接下來使用一遍

MyComponent.vue是個(gè)非常簡(jiǎn)單的組件

效果圖如下

總結(jié)

在前端開發(fā)過程中，HOC是代碼利用的利器，但是對(duì)抽象的要求高。
我覺得自己愛上了React...Vue實(shí)現(xiàn)這個(gè)HOC煩死了

GPU云服務(wù)器云服務(wù)器無限下拉列表郵件列表加載異常開發(fā)一個(gè)小程序的價(jià)格開發(fā)一個(gè)小程序的費(fèi)用

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100857.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

stefan

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#yyds干貨盤點(diǎn)#vspherer快照導(dǎo)致磁盤文件丟失，通過快照文件恢復(fù)

閱讀 1863·2021-11-25 09:43
開課吧Python全棧工程師培養(yǎng)計(jì)劃

閱讀 1378·2021-11-22 15:08
Windows環(huán)境下使用Python設(shè)計(jì)應(yīng)用軟件——【6】pyqt通過勾選框選擇對(duì)TableWidg

閱讀 3802·2021-11-22 09:34
進(jìn)入阿里做測(cè)試員遙不可及？這里或許有你想要的答案

閱讀 3261·2021-09-04 16:40
深度學(xué)習(xí)、機(jī)器學(xué)習(xí)畢業(yè)設(shè)計(jì) - 選題建議

閱讀 3210·2021-09-04 16:40
【學(xué)習(xí)筆記】CSS深入理解之margin

閱讀 573·2019-08-30 15:54
WebSocket網(wǎng)絡(luò)通信協(xié)議

閱讀 1362·2019-08-29 17:19
純CSS實(shí)現(xiàn)頁簽切換效果

閱讀 1790·2019-08-28 18:13

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

使用Vue的HOC技術(shù)開發(fā)一個(gè)無限加載列表

相關(guān)文章

02.react進(jìn)階指南

**基于 Vue.js 的移動(dòng)端組件庫(kù)mint-ui實(shí)現(xiàn)無限滾動(dòng)加載更多**

React 328道最全面試題(持續(xù)更新)

可靠React組件設(shè)計(jì)的7個(gè)準(zhǔn)則之SRP

**使用Vue2+webpack+Es6快速開發(fā)一個(gè)移動(dòng)端項(xiàng)目，封裝屬于自己的jsonpAPI和手勢(shì)響應(yīng)**

發(fā)表評(píng)論

0條評(píng)論

stefan

男|高級(jí)講師

TA的文章

#yyds干貨盤點(diǎn)#vspherer快照導(dǎo)致磁盤文件丟失，通過快照文件恢復(fù)

開課吧Python全棧工程師培養(yǎng)計(jì)劃

Windows環(huán)境下使用Python設(shè)計(jì)應(yīng)用軟件——【6】pyqt通過勾選框選擇對(duì)TableWidg

進(jìn)入阿里做測(cè)試員遙不可及？這里或許有你想要的答案

深度學(xué)習(xí)、機(jī)器學(xué)習(xí)畢業(yè)設(shè)計(jì) - 選題建議

【學(xué)習(xí)筆記】CSS深入理解之margin

WebSocket網(wǎng)絡(luò)通信協(xié)議

純CSS實(shí)現(xiàn)頁簽切換效果

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

使用Vue的HOC技術(shù)開發(fā)一個(gè)無限加載列表

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！