Beispiel für die Implementierung eines Skeleton-Bildschirms mit Vue

Verwendung des Skelettbildschirms

• Als Belastung der Routenumschaltung in Spa wird es in Kombination mit dem Lebenszyklus der Komponente und dem Zeitpunkt der Rückgabe der Ajax-Anforderung verwendet. (Wird als Belastung verwendet). Als Frontend-Entwickler, der den engsten Kontakt mit Benutzern hat, ist die Benutzererfahrung das Thema, das die meiste Aufmerksamkeit verdient. Bei der Anzeige des Seitenladestatus gibt es zwei gängige Anzeigearten: Ladebild und Fortschrittsbalken. Darüber hinaus nutzen immer mehr Apps die „Skeleton Screen“-Methode, um entladene Inhalte anzuzeigen und den Benutzern so ein völlig neues Erlebnis zu bieten.
• Als Optimierung für die Darstellung auf dem ersten Bildschirm
  

Vue-Architektur-Skelett-Bildschirm

Ideenübersicht

• Definieren Sie eine abstrakte Komponente und erhalten Sie den Slot in der Renderfunktion der abstrakten Komponente
• Führen Sie eine tiefe Schleife durch die Slots durch und fügen Sie jedem Element den Klassennamen „gm-skeleton“ hinzu
• Vorab pausieren und Vnode-Textinhalt löschen, um sicherzustellen, dass der Standardtext nicht angezeigt wird, wenn der Skelettbildschirm angezeigt wird
• Rückgabeplätze
  

Definieren einer abstrakten Komponente

Was ist eine abstrakte Komponente? Eine Komponente, die beim Rendern übersprungen wird und nur Laufzeitoperationen ausführt.

    Standard exportieren {
      Name: 'GmSkeleton',
      abstract: true // Eigenschaften abstrakter Komponenten}

Holen Sie sich den Steckplatz und initialisieren Sie den Operationsskelettbildschirm

    rendern(h) {
      const slots = this.$slots.default || [h('')]
      dies.$nextTick().then(() => {
        dieses.handlerPrefix(Slots, dieses.showSpin ? dieses.addSkeletPrefix : dieses.removeSkeletPrefix)
      })

      gib Slots.Länge > 1 zurück? h('div', {
         staticClass: this.showSpin ? 'g-spinner' : ''
      }, Steckplätze) : Steckplätze
    }

Hier setzen wir die Slot-Verarbeitungsmethode in nextTick, da das HandlerPrefix den echten DOM abrufen muss. NextTick wird verwendet, um alle Methoden in der sortierten Aktualisierungswarteschlange auszuführen. Vor der Ausführung des Renderns wurde der RenderWatcher der GMSkeleton-Komponente in der Aktualisierungswarteschlange gesammelt. Daher kann die CallBack-Funktion von nextTick nach dem Rendern den gesamten echten DOM in den entsprechenden Slots abrufen. Wenn Sie das Prinzip von nextTick nicht verstehen, gehen Sie bitte zu dem, was Sie über nextTick nicht wissen.

Name der Zyklusslot-Operationsklasse

    handlerComponent(slot, handler/* addSkeletPrefix | removeSkeletPrefix */, init) {
      const originchildren = (((slot.componentInstance || {})._vnode || {}).componentOptions || {}).children
      const compchildren = ((slot.componentInstance || {})._vnode || {}).children
      !init && Handler(Steckplatz)
      wenn (compchildren) dies.handlerPrefix(compchildren, handler, false)
      wenn (Herkunftskinder) this.handlerPrefix(Herkunftskinder, Handler, false)
    },
    handlerPrefix(slots, handler, init = true) {
      slots.fürJeden(slot => {
        var children = slot.children || (slot.componentOptions || {}).children || ((slot.componentInstance || {})._vnode || {}).children
        wenn (slot.data) {
          wenn (!slot.componentOptions) {
            !init && Handler(Steckplatz)
          } sonst wenn (!this.$hoc_utils.getAbstractComponent(slot)) {
            ;(Funktion(Slot) {
              const handlerComponent = dies.handlerComponent.bind(dies, slot, handler, init)
              const einfügen = (slot.data.hook || {}).insert
              ;(slot.data.hook || {}).insert = () => { // Funktionsrefactoring, ändern Sie den ursprünglichen Komponenten-Hook und stellen Sie sicher, dass das Einfügen nur einmal ausgeführt wird insert(slot)
                handlerComponent()
              }
              ;(slot.data.hook || {}).postpatch = handlerKomponente
            }).rufen Sie (diesen, Steckplatz) auf.
          }
        }
        wenn (Slot && Slot.elm && Slot.elm.NodeType === 3) {
          wenn (diese.showSpin) {
            slot.memorizedtextContent = slot.elm.textContent
            slot.elm.textContent = ''
          } anders {
            slot.elm.textContent = slot.memorizedtextContent || slot.elm.textContent || slot.text
          }
        }
        Kinder && this.handlerPrefix(Kinder, Handler, false)
      })
    },

Schritt für Schritt Analyse:

1. Wir durchlaufen die Slots
2. Holen Sie sich die untergeordnete Sammlung unter dem aktuellen Vnode für die nächste Schleife
3. Bestimmen Sie, ob es sich um ein natives HTML-Element handelt. Nur die Komponente vnode verfügt über das Attribut componentOptions
4. Bestimmen Sie, ob es sich um eine abstrakte Komponente handelt. Wir wissen, dass abstrakte Komponenten wie Keep-Alive und Transition nicht in den echten DOMTree gerendert werden. Der Vnode jeder Komponente verfügt über einen einzigartigen Hook-Lebenszyklus: Init, Insert, Prepatch und Destroy. Jeder Lebenszyklus wird in unterschiedlichen Phasen ausgelöst. Kapern Sie Insert, behalten Sie die ursprüngliche Insert-Methode bei und rekonstruieren Sie dann die Insert-Methode des Vnode, um die HandlerComponent-Methode aufzurufen und den Klassennamen hinzuzufügen. Dies ähnelt dem Verwendungskonzept des oben gemounteten NextTick. Da HandlerComponent die Instanz der untergeordneten Komponente kennen muss, muss sie nach der Instanziierung aufgerufen werden. Die Init-Methode der Komponente instanziiert die Komponente und ruft direkt watcher.update(watcher.render()) auf, d. h. wenn wir die Insert-Methode aufrufen, erfolgt dies tatsächlich nach Update(render()), sodass die instanziierte untergeordnete Komponente hier abgerufen werden kann.
5. Bestimmen Sie, ob nodeType ein Textknoten ist. Wenn ja, speichern Sie textContent und löschen Sie ihn dann, um sicherzustellen, dass der Standardtext nicht angezeigt wird, wenn der Skelettbildschirm angezeigt wird. Wenn der Skelettbildschirm verschwindet, geben Sie den zuvor beibehaltenen Standardtext an vnode zurück, sodass Sie frei zwischen dem Anzeigen und Ausblenden des Skelettbildschirms wechseln können.
   

Der statische Klassenname für den Betriebssystem-Vnode

    addSkeletPrefix(Slot) {
      const rootVnode = slot.componentOptions ? (slot.componentInstance || {})._vnode || {} : Steckplatz;
      wenn (rootVnode.elm) {
        rootVnode.elm.classList.add(dieses.skeletPrefix)
      } anders {
        ;(rootVnode.data || {}).staticClass += ` ${this.skeletPrefix}`
      }
    },
    entferneSkeletPrefix(Slot) {
      const rootVnode = slot.componentOptions ? (slot.componentInstance || {})._vnode || {} : Steckplatz;
      wenn (rootVnode.elm) {
        rootVnode.elm.classList und rootVnode.elm.classList.entfernen(this.skeletPrefix)
      } sonst wenn (rootVnode.data.staticClass) {
        rootVnode.data.staticClass = rootVnode.data.staticClass.replace(` ${this.skeletPrefix}`, '')
      }
    }

addSkeletePrefix wird verwendet, um den GM-Skeleton-Klassennamen hinzuzufügen, während removeSkeletonPrefix verwendet wird, um den GM-Skeleton-Klassennamen zu löschen

Anwendung

  Vue von „vue“ importieren
  importiere GMSkeleton von 'Pfad/zu/GMSkeleton'
  
  Vue.use (GMSkeleton)

  <gm-skelett>
    <Komponente />
    <div></div>
    <div><span>Frontend Martin</span></div>
  </gm-skelett>

Übergeben von Werten

Die Wirkung ist wie folgt

Der spezifische Stil wird gemäß dem vom Entwickler geschriebenen Stil generiert und von GM-Skeleton umschlossen, wie oben gezeigt. Das Folgende ist ein einfaches Beispiel

Vollständige Adresse

80 Zeilen Code zur Implementierung des Vue-Skelettbildschirms

Oben sind die Einzelheiten des Beispiels zur Implementierung des Skeleton-Bildschirms mit Vue aufgeführt. Weitere Informationen zur Implementierung des Skeleton-Bildschirms mit Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!