Der Inhalt dieses Artikels befasst sich mit der Entwicklung einer unendlichen Ladeliste (Codebeispiel) mit der HOC-Technologie von Vue. Ich hoffe, dass er für Sie hilfreich ist.
In der Webentwicklung verwenden wir alle einen Paging-Lademechanismus für Daten. Eine Variante besteht darin, einen Schleifenlademechanismus auf der Seite zu verwenden Klicken Sie auf die Schaltfläche „Mehr laden“. Das Problem besteht darin, dass, wenn unterschiedliche Daten angezeigt werden sollen, viele solcher Listen geschrieben werden müssen, die Logik aber ähnlich ist.
Datensatz pflegen
Mehr Daten laden
Verwenden Sie die Daten entsprechend Komponenten anzeigen
Ladestatus usw. verwalten
Gibt es eine solche Komponente, um die gleiche Logik zu vervollständigen?
Es muss eine solche InfiniteList-Komponente vorhanden sein, die für die Verwaltung des Ladens und Verwaltens relevanter Daten und deren anschließende Anzeige in Form einer Liste verantwortlich ist, und Listenelemente müssen vom Aufrufer als Komponente bestimmt werden.
Das Konzept der Komponenten höherer Ordnung wird in React häufig erwähnt, ähnlich wie bei Funktionen höherer Ordnung.
Funktionen höherer Ordnung: (fn) => otherFn
Komponenten höherer Ordnung: component => otherComponent
Komponenten höherer Ordnung sind ein hervorragendes Werkzeug für die Wiederverwendung von Code. Sie sind hauptsächlich bei der Verarbeitung von Logik und Universalität wirksam.
Also habe ich beschlossen, HOC zu verwenden, um diese Anforderung zu erfüllen
Referenzartikel: http://hcysun.me/2018/01/05/%...
Conscience Blog
vue
Vues Renderfunktion
Ich verwende die Vue- und iview-UI-Bibliothek
Erstelle zuerst das UI-Framework. Ich verwende eine Vue-Datei, um die gesamte Komponente zu erstellen das Grundgerüst. Quellcodeadresse
HTML-Teil
<template>
<div>
<div>
<slot></slot>
</div>
<div>
<button>
{{loadButtonText}}
</button>
</div>
</div>
</template>Verwenden Sie einen Slot, um Elemente zu verteilen, die in einer Schleife gerendert werden sollen
js-Teil
Einige UI-bezogene Daten (nicht sehr wichtig)
props: {
loadTip: {
type: String,
default: "加载更多"
}
...
},
computed: {
loadButtonText() {},
tipIcon() {}
}Der wichtigste Teil dieses Teils ist nur eine Ereignisemission, die die konvertiert Verhalten beim Klicken auf die Schaltfläche in „Anforderung zum Laden von Daten“
handleClickLoad() {
// 发射 请求加载数据的 事件
this.$emit("on-load");
}CSS-Teil wird weggelassen
Der nächste Schritt ist Der wichtigste Teil ist das Schreiben von HOC
Zunächst müssen Sie verstehen, was Komponenten in Vue sind. Wenn wir beispielsweise eine Vue-Datei schreiben, wird ein Objekt exportiert. Wenn wir also jetzt HOC schreiben, müssen wir am Ende tatsächlich ein Objekt zurückgeben.
Also habe ich die folgende Funktion geschrieben, um HOC zu generieren
/**
* 使用高阶组件的办法实现了一个无限加载列表
* 可以根据数据循环渲染出特定的组件，并且管理加载状态
* @param component 具体项的组件 {props: {data}}
*/
function InfiniteList(listItem) {
return {
props:...
data(){}
...
}
}Und wenn wir rendern, verwenden wir natürlich die Renderfunktion von Vue
render(h) {
return h(component, data, children);
}Wir verwenden die Kombinationsmethode, die äußerste Ebene muss verwendet werden Die Vorlage, die wir in Schritt 1 geschrieben haben, haben wir importiert und registriert. Die Renderfunktion sollte für Programmierer, die mit React vertraut sind, nicht schwierig sein. Auf der offiziellen Website gibt es auch eine sehr detaillierte Einführung.
import InfiniteListTemplate from "./InfiniteListTemplate";
function InfiniteList(listItem) {
return {
...
components: {
InfiniteListTemplate // 列表框架的模板，这个模板里面只有ui表现
},
...
}
}Hier wird unsere Vorlage auf der äußersten Ebene (die sogenannte Vorlagenkomponente) gerendert und die Requisiten und Attribute des aktuellen HOC werden an die Vorlagenkomponente übergeben.
Die HOC-Daten werden hier erwähnt, sie sind sehr einfach, es sind zwei Zustände und ein Datenarrayrender(h) {
const self = this;
// 根据 data 的 dataList循环渲染子组件
const listItems = ...
return h(InfiniteListTemplate, {
props: {
...self.$props, // 传递所有参数
hasMore: self.hasMore, // 另外的hasMore和loading是这个HOC的state
loading: self.loading
},
attrs: self.$attrs,
on: {
// 监听加载按钮事件
"on-load": () => self.handleLoadData()
}
}, listItems);
},data() {
return {
hasMore: true,
loading: false,
dataList: []
}
}-Funktion zum Laden von Daten
für die Verwaltung übergeben. Wir definierenconst listItems = this.dataList.map(item => h(component, {
props: {
data: item
}
})
);return h(InfiniteListTemplate, {options}, listItems);on-loadNächstes Mal verwenden
props: {
tipColor,
loadTip,
loadingTip,
// 上面的数据都是为了传给模板（组件）
offset: {
type: Number,
default: 5
},
// 数据加载的函数，需要的是一个 (index, offset) => Promise
loadDataFunc: {
type: Function,
default() {
return (index, offset) => Promise.resolve(new Array(offset).map((o, i) => index + i));
}
}
},render(h) {
return h(InfiniteListTemplate, {
...
on: {
'on-load': () => self.handleLoadData()
}
}, listItems);
},
methods: {
/**
* 监听模板点出了加载按钮时的操作
* 调用数据加载函数加载数据
* @return {Promise<void>}
*/
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}条新数据`);
} else {
this.$Message.info(`已经获取了全部数据了`);
this.hasMore = false;
}
} catch (e) {
this.$Message.error("加载失败" + e.message);
} finally {
this.loading = false;
}
}
},</void>MyComponent.vue
Im Vordergrund- Am Ende des Entwicklungsprozesses ist HOC ein leistungsstarkes Tool für die Codenutzung, stellt jedoch hohe Abstraktionsanforderungen. Ich habe das Gefühl, ich bin in React verliebt ... Vue ist so nervig, dieses HOC zu implementieren
Das obige ist der detaillierte Inhalt vonWie die HOC-Technologie von Vue eine unendliche Ladeliste entwickelt (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
