Implementierungscode der Funktion zur Benutzervorschauzeitüberwachung der Vue-Seite

In einem aktuellen Unternehmen besteht die Anforderung, dass das Online-Schulungssystem die Vorschauzeit des Benutzers für eine bestimmte Online-Vorschauseite kennen muss. Um das Ziel zu erreichen, dachten wir zunächst daran, die Lebenszyklusfunktionen der Vue-Seite zu verwenden, mounted und destroyed , die Logik für das Starten und Löschen des Timings hinzuzufügen und die Zeitdaten des entsprechenden Trainingsmaterials über die Hintergrundschnittstelle zu melden.

Wenn wir eine Idee im Kopf haben, können wir mit der Planung des spezifischen Codes beginnen.

Definieren Sie die Start- und Endzeitfunktionen

In data definieren wir den Timer über eine Variable, sodass über this.timer überall darauf zugegriffen werden kann, was praktisch ist, um ihn zu löschen, wenn die Seite später zerstört wird.

duration ist eine Zählvariable für die Dauer, die auf 0 initialisiert wird. Die Einheit kann anhand des zweiten Zeitintervallparameters des Timers als Sekunden oder Millisekunden bestimmt werden.

Standard exportieren {
  Daten() {
    zurückkehren {
      Timer: null,
      Dauer: 0
    }
  },
  Methoden: {
    startTimer() {
      dieser.timer = setzeInterval(() => {
        console.log('Beobachtungszeit: ', this.duration)
        diese.Dauer++
      }, 1000)
    },
    stopTimer() {
      Intervall löschen(dieser.Timer)
      this.updateViewHistory() // Berichtsdatenschnittstelle},
    updateViewHistory() {
    // Code der Meldeschnittstellenlogik...
    }
  }
}

In der Funktion startTimer drucken wir die duration aus, um zu überprüfen, ob die angezeigte Zeit korrekt ist.

Wie und wo anrufen

Nachdem wir die Start- und Endmethoden definiert haben, müssen wir darüber nachdenken, wo sie aufgerufen werden. Da der Inhalt der Vorschauseite nicht eindeutig ist, wird er basierend auf der Material- id gerendert, um Details zu erhalten. Wenn wir startTimer in den mounted Lebenszyklus schreiben, können wir beim Besuch von Seiten mit unterschiedlichen id nicht wie gewohnt zur gewünschten Logik wechseln.

Daher habe ich mich entschieden, auf den id -Parameter in der Route zu hören, um die Start- und Endlogik beim Vorschauen verschiedener Seiten umzuschalten.

betrachten:
    $route: {
      sofort: wahr,
      Handler(zu, von) {
        wenn (to.params.id) diese.trainingId = to.params.id
        dies.startTimer()
      }
    }
  }

Die Startzeitmethode wird aufgerufen und schließlich können wir die aktuelle Dauerausgabe log console

Dann müssen wir als letzten Schritt stopTimer aufrufen, um den Timer zu löschen und die Daten zu melden, wenn die Seite zerstört wird.

Da unsere Vorschauseite ein unabhängiger Tab ist, der über window.open geöffnet wird, wird sie über die Lebenszyklusfunktion destroyed überwacht. Wenn der Sprung über die Routing-Methode erfolgt, müssen wir ihn beim Verlassen der Seite zerstören, bevor wir ihn über destroyed abhören können.

montiert() {
    window.addEventListener('vor dem Entladen', e => this.beforeunloadHandler(e))
  },
  zerstört() {
    window.removeEventListener('vor dem Entladen', e => this.beforeunloadHandler(e))
  }

Rufen Sie stopTimer -Methode indirekt über die window -Methode auf

Methoden: {
    vor dem EntladenHandler (e) {
      dies.stopTimer()
    }
}

Einige Leute fragen sich vielleicht, warum stopTimer nicht direkt in destroyed aufgerufen wird, damit die einzigartige Logik getrennt und nicht mit anderer Logik in destroyed vermischt werden kann. Verbessern Sie die Lesbarkeit und Wartbarkeit des Codes.

Beim Schreiben von Code müssen wir nicht nur die Funktion implementieren, sondern auch mehr darüber nachdenken. Dies ist der Unterschied zwischen normalen Menschen und Experten.

Dies ist das Ende dieses Artikels über die Benutzervorschauzeit der Vue-Seitenüberwachung. Weitere relevante Inhalte zur Benutzervorschauzeit der Vue-Überwachung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!