Vue ページ監視ユーザープレビュー時間機能実装コード

最近のビジネスでは、オンライントレーニングシステムが特定のオンラインプレビューページに対するユーザーのプレビュー時間を把握する必要があるという要件があります。当初は、Vue ページのライフサイクル機能でmountedとdestroyedを使用して、開始とクリアのタイミングのロジックを追加し、バックグラウンドインターフェイスを通じて対応するトレーニングマテリアルの時間データを報告することで目標を達成することを考えました。

アイデアを念頭に置いて、具体的なコードの計画を開始できます。

開始と終了のタイミング関数を定義する

dataでは、変数を介してタイマーを定義し、 this.timerを介してどこからでもアクセスできるようにしています。これは、後でページが破棄されるときにタイマーをクリアするのに便利です。

duration 、0 に初期化される期間のカウント変数です。単位は、タイマーの 2 番目の時間間隔パラメータに基づいて、秒またはミリ秒として決定できます。

エクスポートデフォルト{
  データ（） {
    戻る {
      タイマー: null、
      期間: 0
    }
  },
  メソッド: {
    スタートタイマー() {
      this.timer = setInterval(() => {
        console.log('視聴時間: ', this.duration)
        this.duration++
      }, 1000)
    },
    ストップタイマー() {
      クリア間隔(this.timer)
      this.updateViewHistory() // レポートデータインターフェース},
    ビュー履歴の更新（）{
    // インターフェイス ロジック コードを報告します....
    }
  }
}

startTimer関数では、表示される時間が正しいことを確認するために、 duration変数を出力します。

電話をかける方法と場所

開始メソッドと終了メソッドを定義した後、それらをどこで呼び出すかを考え始める必要があります。プレビューページのコンテンツは一意ではないため、詳細を取得するためにマテリアルのidに基づいてレンダリングされます。 mountedライフサイクルにstartTimerを記述すると、異なるidを持つページにアクセスしたときに、必要なロジックを正常に切り替えることができなくなります。

そこで、異なるページをプレビューするときに開始ロジックと終了ロジックを切り替えるために、ルート内のidパラメータをリッスンすることを選択しました。

時計：
    $ルート: {
      即時: true、
      ハンドラ(to, from) {
        if (to.params.id) this.trainingId = to.params.id
        this.startTimer()
      }
    }
  }

開始タイミングメソッドが呼び出され、最終的にconsole logに現在の期間の出力が表示されます。

次に、最後のステップとして、 stopTimer関数を呼び出してタイマーをクリアし、ページが破棄されたときにデータを報告する必要があります。

プレビューページはwindow.openを通じて開かれる独立したタブであるため、 destroyedライフサイクル関数を通じて監視されます。ルーティングメソッドを介してジャンプが行われた場合、ページを離れるときに、 destroyed介してリッスンする前に、そのページを破棄する必要があります。

マウント() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  破壊された() {
    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
  }

windowリスナーメソッドを介して間接的にstopTimerメソッドを呼び出す

メソッド: {
    beforeunloadHandler (e) {
      this.stopTimer()
    }
}

独自のロジックを分離して、 destroyed内の他のロジックと混ざらないようにするために、 destroyed内でstopTimerメソッドを直接呼び出さないのはなぜかと疑問に思う人もいるかもしれません。コードの可読性と保守性を向上させます。

コードを書くときは、機能を実装するだけでなく、さらに考える必要があります。これが一般人と専門家の違いです。

これで、Vue ページのユーザープレビュー時間の監視に関するこの記事は終了です。Vue のユーザープレビュー時間の監視に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: