Vueでスケルトンスクリーンを実装する例

Vueでスケルトンスクリーンを実装する例

スケルトンスクリーンの使用

  • spa におけるルート切り替えのローディングとして、コンポーネントのライフサイクルと ajax リクエストの戻りのタイミングと組み合わせて使用​​します。(ローディングとして使用)ユーザーと最も密接な関係を持つフロントエンド開発者にとって、ユーザーエクスペリエンスは最も注意を払うべき問題です。ページの読み込み状況の表示に関しては、読み込み画像と進行状況バーの 2 つが主流です。さらに、ますます多くのアプリが「スケルトン スクリーン」方式を使用してアンロードされたコンテンツを表示し、ユーザーにまったく新しい体験を提供しています。
  • 最初の画面レンダリングの最適化として

Vueアーキテクチャスケルトンスクリーン

アイデアの概要

  • 抽象コンポーネントを定義し、抽象コンポーネントのレンダリング関数のスロットを取得します。
  • スロットを深くループし、各要素にgm-skeletonのクラス名を追加します。
  • スケルトン画面が表示されたときにデフォルトのテキストが表示されないように、事前に一時停止して vnode textContent をクリアします。
  • リターンスロット

抽象コンポーネントの定義

抽象コンポーネントとは何ですか? レンダリング中にスキップされ、実行時操作のみを実行するコンポーネントです。

    エクスポートデフォルト{
      名前: 'GmSkeleton'、
      abstract: true // 抽象コンポーネントのプロパティ}

スロットを取得し、操作スケルトン画面を初期化する

    レンダリング(h) {
      const スロット = this.$slots.default || [h('')]
      this.$nextTick().then(() => {
        this.handlerPrefix(スロット、this.showSpin ? this.addSkeletPrefix : this.removeSkeletPrefix)
      })

      スロットの長さが1より大きい場合、h('div', {
         静的クラス: this.showSpin ? 'g-spinner' : ''
      }, スロット) : スロット
    }

ここでは、handlerPrefix が実際の DOM を取得する必要があるため、スロット処理メソッドを nextTick に配置します。NextTick は、ソートされた更新キュー内のすべてのメソッドを実行するために使用されます。レンダリングを実行する前に、GMSkeleton コンポーネントの renderWatcher が更新キューに収集されています。そのため、nextTick CallBack 関数は、レンダリング後に対応するスロット内のすべての実際の DOM を取得できます。nextTick の原理がわからない場合は、nextTick についてわからないことを参照してください。

サイクルスロット操作クラス名

    handlerComponent(スロット、handler/* addSkeletPrefix | removeSkeletPrefix */、init) {
      const originchildren = (((slot.componentInstance || {})._vnode || {}).componentOptions || {}).children
      const compchildren = ((slot.componentInstance || {})._vnode || {}).children
      !init && ハンドラ(スロット)
      if (compchildren) this.handlerPrefix(compchildren, handler, false)
      if (originchildren) this.handlerPrefix(originchildren, handler, false)
    },
    handlerPrefix(スロット、ハンドラー、init = true) {
      スロット.forEach(スロット => {
        var children = slot.children || (slot.componentOptions || {}).children || ((slot.componentInstance || {})._vnode || {}).children
        if (スロットデータ) {
          スロットコンポーネントオプションの場合
            !init && ハンドラ(スロット)
          } そうでない場合 (!this.$hoc_utils.getAbstractComponent(スロット)) {
            ;(関数(スロット) {
              const handlerComponent = this.handlerComponent.bind(this, slot, handler, init)
              const 挿入 = (slot.data.hook || {}).挿入
              ;(slot.data.hook || {}).insert = () => { // 関数のリファクタリング、元のコンポーネントフックを変更し、挿入が 1 回だけ実行されるようにします insert(slot)
                ハンドラコンポーネント()
              }
              ;(slot.data.hook || {}).postpatch = handlerComponent
            }).call(this, スロット)
          }
        }
        (スロット&& slot.elm && slot.elm.nodeType === 3)の場合{
          if (this.showSpin) {
            slot.memorizedtextContent = slot.elm.textContent
            slot.elm.textContent = ''
          } それ以外 {
            slot.elm.textContent = slot.memorizedtextContent || slot.elm.textContent || slot.text
          }
        }
        children && this.handlerPrefix(children, handler, false)
      })
    },

ステップバイステップの分析:

  1. スロットを反復処理する
  2. 次のループのために現在のvnodeの下の子コレクションを取得します。
  3. ネイティブHTML要素かどうかを判断します。コンポーネントvnodeのみがcomponentOptions属性を持ちます。
  4. 抽象コンポーネントかどうかを判断します。キープアライブやトランジションなどの抽象コンポーネントは、実際のDOMTreeにレンダリングされないことがわかっています。各コンポーネントのvnodeには、init、insert、prepatch、destroyという独自のフックライフサイクルがあります。各ライフサイクルは、さまざまな段階でトリガーされます。挿入をハイジャックし、元の挿入メソッドを保持してから、vnodeの挿入メソッドを再構築して、handlerComponentメソッドを呼び出してクラス名を追加します。これは、上記のマウントされたnextTickの使用概念に似ています。handlerComponentは子コンポーネントのインスタンスを知る必要があるため、インスタンス化後に呼び出す必要があります。コンポーネントのinitメソッドは、コンポーネントをインスタンス化し、watcher.update(watcher.render())を直接呼び出します。つまり、挿入メソッドを呼び出すと、実際にはupdate(render())の後であるため、インスタンス化された子コンポーネントをここで取得できます。
  5. nodeType がテキスト ノードかどうかを判断します。テキスト ノードである場合は、textContent を保存してから削除し、スケルトン画面が表示されたときにデフォルトのテキストが表示されないようにします。スケルトン画面が消えたら、以前に保持したデフォルトのテキストを vnode に戻します。これにより、スケルトン画面の表示と非表示を自由に切り替えることができます。

vnodeを操作するための静的クラス名

    addSkeletPrefix(スロット) {
      const rootVnode = slot.componentOptions ? (slot.componentInstance || {})._vnode || {} : スロット;
      (ルートノード.elm)の場合{
        rootVnode.elm.classList.add(this.skeletPrefix)
      } それ以外 {
        ;(rootVnode.data || {}).staticClass += ` ${this.skeletPrefix}`
      }
    },
    スケルトンプレフィックスを削除します(スロット) {
      const rootVnode = slot.componentOptions ? (slot.componentInstance || {})._vnode || {} : スロット;
      (ルートノード.elm)の場合{
        rootVnode.elm.classList && rootVnode.elm.classList.remove(this.skeletPrefix)
      } そうでない場合 (rootVnode.data.staticClass) {
        rootVnode.data.staticClass = rootVnode.data.staticClass.replace(` ${this.skeletPrefix}`, '')
      }
    }

addSkeletePrefixはgm-skeletonクラス名を追加するために使用され、removeSkeletonPrefixはgm-skeletonクラス名を削除するために使用されます。

使い方

  'vue' から Vue をインポートします
  'path/to/GMSkeleton' から GMSkeleton をインポートします
  
  Vue.use(GMSkeleton)
  <gm-スケルトン>
    <コンポーネント />
    <div></div>
    <div><span>フロントエンド マーティン</span></div>
  </gm-スケルトン>

値の受け渡し

物件名価値説明する
スピンを表示ブールスケルトン画面を開くかどうか。デフォルトはtrueです。
スケルトンプレフィックススケルトンスクリーンクラス名。デフォルトは gm-skeleton です。

効果は以下のとおりです

特定のスタイルは、開発者が書いたスタイルに従って生成され、上記のようにgm-skeletonでラップされます。以下は簡単な例です。

完全な住所

Vue スケルトン スクリーンを実装するための 80 行のコード

以上がvueでスケルトン画面を実装した例の詳細です。vueでスケルトン画面を実装する方法の詳細については、123WORDPRESS.COMの他の関連記事にも注目してください!

以下もご興味があるかもしれません:
  • Vueプロジェクトのスケルトンスクリーンインジェクションの実践についての簡単な説明
  • vue-skeleton-webpack-plugin に基づくスケルトン スクリーンの練習
  • Vueモバイル端末にスケルトン画面を注入する設定方法
  • VUEシングルページアプリケーションスケルトンスクリーンソリューションの詳細な説明
  • vue-cli を使用してスケルトン スクリーンを構築する方法の例
  • Vueページのスケルトン画面の実装方法
  • Vue ページ スケルトン スクリーン インジェクション メソッド
  • Vueシングルページスケルトン画面実践記録について

<<:  MySQL 5.7.20 の解凍バージョンをインストールするための詳細な手順 (2 つの方法)

>>:  Linux で Scala 環境を構築し、簡単な Scala プログラムを書く

推薦する

Docker はすべてのコンテナをバッチ起動して閉じます

Dockerの場合すべてのコンテナコマンドを開始する docker を起動します $(docker ...

JavaScriptの動作メカニズムの詳細な説明とイベントループについての簡単な説明

目次1. JavaScript がシングルスレッドなのはなぜですか? 2. タスクキュー3. イベン...

MySQLのトランザクションとデータ一貫性処理の問題を分析する

この記事では、セキュリティ、使用方法、同時処理などを通じて、MySQL トランザクションとデータの一...

Docker を使用してスタンドアロン Pulsar とクラスター化された Redis をデプロイする方法 (開発アーティファクト)

目次1. はじめに: 2. ドッカー: 1 カスタムネットワーク2 展開を開始する3 ネットワークを...

RGBAアルファ透明度変換計算表

IEでのRGBAとフィルター値の変換RGBA 透明度値IE フィルター値0.1 19 0.2 33 ...

Vueカスケードドロップダウンボックスの設計と実装

目次1. データベース設計2. フロントエンドページ3. 完全なデモフロントエンド開発では、カスケー...

Tomcat9 のダウンロード、インストール、設定 + Eclipse への統合に関する詳細なチュートリアル

トムキャット公式サイトtomcatはローカルサーバーと同等であり、Webページを開くことができます設...

Centos 7.4 サーバーの時刻同期設定方法 [NTP サービスに基づく]

この記事では、CentOS 7.4 サーバーで時刻同期を構成する方法について説明します。ご参考までに...

Linux の grep コマンドと egrep コマンドの詳細な説明

反復/egrep構文: grep [-cinvABC] 'word' ファイル名-c...

HTML テーブル マークアップ チュートリアル (5): ライト ボーダー カラー属性 BORDERCOLORLIGHT

表では、左上の境界線の色を個別に定義したり、セルの右下の境界線の色を定義したりできます。これら 2 ...

データベース接続のURLの詳細な説明と概要

データベース接続のURLの詳細な説明と概要JDBC URL = プロトコル名 + サブプロトコル名 ...

Nodejs は JSON 文字列を JSON オブジェクトに変換するエラー解決法

JSON 文字列を JSON オブジェクトに変換するにはどうすればいいですか? JSON.parse...

nginx共有メモリの仕組みの詳細な説明

Nginx の共有メモリは、高いパフォーマンスを実現できる主な理由の 1 つであり、主にファイル キ...

MySQLで判定文を書く方法のまとめ

MySQL で判断文を書く方法:方法1. CASE関数case関数の構文: CASE条件 値1の場合...

HTML pre タグ内の自動改行

このとき、overflow:auto;(コードがコンテナの境界を超えたときにスクロールボックスを表示...