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 プログラムを書く

推薦する

MySQLシリーズ マルチテーブル結合クエリ92および99構文例詳細チュートリアル

目次1. デカルト積現象2. 接続クエリの知識ポイントのまとめ1) 結合クエリとは何ですか? 2) ...

MySQLフィールド定義でnullを使用しない理由の分析

NULL が頻繁に使用されるのはなぜですか? (1)Javaのnull Java の NullPoi...

入力が正しいにもかかわらず、MySQL 8.0 でアクセスが拒否される問題を解決する

最近、MySQL を学び始めました。インストールはスムーズに進み、インターネット上の既成のチュートリ...

LinuxにPHP7をインストールする方法の詳細な説明

Linux に PHP7 をインストールするにはどうすればいいですか? 1. 依存パッケージをインス...

CSSポジショニングによる階層関係の問題の詳細な説明

絶対、相対、固定位置の位置決めabsolue: 絶対配置。上、下、左、右を使用して、配置先の親要素に...

MySQL 5.6 ルートパスワード変更チュートリアル

1. MySQL 5.6をインストールした後、正常に有効化できないMySQL の圧縮バージョンは、解...

共有サイドバーを実装するためのネイティブJS

この記事では、ネイティブ JS で実装された共有サイドバーを紹介します。効果は次のとおりです。 以下...

JSはプログレスバーのスムーズバージョンの詳細な計画を実装します

進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...

6つのレイアウトでのFrameLayoutの使用

序文前回はLinearLayoutについて説明しました。今回はFrameLayoutの使い方を説明し...

JavaScript Alert関数の実行順序の詳細な説明

目次質問分析する解決するAlert() 関数を置き換えるsetTimeOut関数まとめ質問数日前、J...

MySQL 5.7.18 無料インストール版ウィンドウ設定方法

初めてのブログです。データベースの勉強を始めた頃のことを書いています。自分でダウンロードしたのですが...

JavaScript DOMContentLoaded イベントのケーススタディ

DOMContentLoaded イベント文字通り、DOM がロードされた後に実行されます。 win...

Windows 7 環境での Docker 高速ビルドと Alibaba Cloud コンテナ高速化構成の詳細な説明

前回の Docker に関する記事では、MAC システムでの構築について説明しました。この記事では、...

mysql5.7 以降で my.ini を設定するための詳細な手順

Windows 64 ビット版 MySQL 5.7 以降の解凍パッケージにデータディレクトリ、my-...

vue-cli 設定では Vuex の完全なプロセスレコードを使用します

目次序文インストールと使用方法モジュラー管理Vuex の状態永続性要約する序文Vue 開発では、ユー...