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)
      })
    },

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

スロットを反復処理する
次のループのために現在のvnodeの下の子コレクションを取得します。
ネイティブHTML要素かどうかを判断します。コンポーネントvnodeのみがcomponentOptions属性を持ちます。
抽象コンポーネントかどうかを判断します。キープアライブやトランジションなどの抽象コンポーネントは、実際のDOMTreeにレンダリングされないことがわかっています。各コンポーネントのvnodeには、init、insert、prepatch、destroyという独自のフックライフサイクルがあります。各ライフサイクルは、さまざまな段階でトリガーされます。挿入をハイジャックし、元の挿入メソッドを保持してから、vnodeの挿入メソッドを再構築して、handlerComponentメソッドを呼び出してクラス名を追加します。これは、上記のマウントされたnextTickの使用概念に似ています。handlerComponentは子コンポーネントのインスタンスを知る必要があるため、インスタンス化後に呼び出す必要があります。コンポーネントのinitメソッドは、コンポーネントをインスタンス化し、watcher.update(watcher.render())を直接呼び出します。つまり、挿入メソッドを呼び出すと、実際にはupdate(render())の後であるため、インスタンス化された子コンポーネントをここで取得できます。
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 です。