Vueエンジニアがカプセル化しなければならない埋め込み命令の知識のまとめ

序文

最近、プロジェクトにトラッキング機能を実装する必要がありました。製品のトラッキングドキュメントを整理したところ、クリックトラッキングのシナリオがたくさんあることがわかりました。ポイントを追跡するために Alibaba Cloud SLS ログサービスを使用しているため、ポイントを追跡するには手動の侵入コードを使用します。埋め込み形式を決定した後、技術的な実装方法はたくさんあります。どれがより良いのでしょうか?

ちょっと考えてみました...

追跡命令をカプセル化することにしました。この命令は粒度が細かく、重要なポイントを直接ヒットできるため、より便利に使用でき、上記のビジネスシナリオに非常に適しています。

指導の基本

その前に、vueカスタムの手順を復習しておきましょう。ここではよく使われる基礎知識のみ紹介します。より詳しい紹介については、公式ドキュメントを参照してください。

フック機能

bind: ディレクティブが要素に最初にバインドされるときに 1 回だけ呼び出されます。
挿入: バインドされた要素が親ノードに挿入されたときに呼び出されます。
update: コンポーネントの VNode が更新されたときに呼び出されます。

フック関数のパラメータ

el: ディレクティブがバインドされる DOM 要素。
バインディング: 次のプロパティを含むオブジェクト:
- value: ディレクティブのバインディング値。たとえば、v-my-directive="1 + 1" の場合、バインディング値は 2 です。
- arg: コマンドに渡されるパラメータ（オプション）。たとえば、v-my-directive:foo の場合、パラメーターは "foo" です。
vnode: 命令がバインドされている現在のコンポーネント vnode。

ここでちょっとしたコツをシェアします。フック関数のパラメータには現在のインスタンスを直接取得できるパラメータはありませんが、vnode.context を通じて取得することができます。これは以前の vue スキルの記事でもシェアしています。興味があれば、ぜひチェックしてみてください。

文章

では、本題に入りましょう。以下では、追跡指示の使用方法と、それが内部でどのように実装されるかを紹介します。

使い方とアイデア

通常、何かをカプセル化するときは、まずそれをどのように使用するかを決定し、次に使用方法に基づいてカプセル化を開始します。これにより、全体的なアイデアがより明確になり、使用方法を定義するときに使いやすさも考慮できるため、カプセル化後に使用方法が不十分なためにやり直しが必要になることを避けることができます。

追跡ポイントによって報告されるデータは、公開データ（各追跡ポイントによって報告される必要があるデータ）とカスタムデータ（公開データと一緒に報告されるオプションの追加データ）に分けられます。そうすると、パブリックデータは内部で均一に処理され、カスタムデータは外部からインポートする必要があります。したがって、2 つの使用法があります。

一般的な使用法

<div v-track:clickBtn></div>

カスタムデータ

<div v-track:clickBtn="{other:'xxx'}"></div>

追跡イベントが引数の形式で渡されていることがわかります。これより前に、友人が追跡イベントを値の形式でカプセル化しているのも見ました。しかし、個人的には、対応する埋め込みイベントが何であるかを一目で確認しやすい arg 形式を好みます。

さらに、報告されたデータ構造はおおよそ次のようになります。

{   
    イベント名: 'clickBtn'
    ユーザーID: 1,
    ユーザー名: 'xxx',
    データ： {
        その他: 'xxx'
    }
}

eventName は埋め込みポイントに対応するイベント名です。パブリックデータはこれと同じレベルにあり、カスタムデータは data に配置されます。

成し遂げる

track.jsファイルを定義する

'js-sls-logger' から SlsWebLogger をインポートします。

関数 getSlsWebLoggerInstance (オプション = {}) {
  新しいSlsWebLoggerを返します({
    ホスト： '***'、
    プロジェクト： '***'、
    ログストア: `***`,
    時間: 10,
    カウント: 10,
    ...オプション
  })
}

エクスポートデフォルト{
  インストール (Vue、{baseData = {}、slsOptions = {}) {
    const slsWebLogger = getSlsWebLoggerInstance(slsOptions)
    // パブリックデータを取得するメソッド let getBaseTrackData = typeof baseData === 'function' ? baseData : () => baseData
    baseTrackData = null とします
    定数トラック = {
      名前: 'トラック',
      挿入された（el、バインディング）{
        el.addEventListener('クリック', () => {
          if (!binding.arg) {
            console.error('トラックslsWebLoggerイベント名が無効です')
            戻る
          }
          ベーストラックデータの場合
            ベーストラックデータ = getBaseTrackData()
          }
          baseTrackData.eventName = バインディング引数
          // カスタムデータ let trackData = binding.value || {}
          const submitData = Object.assign({}, baseTrackData, {data: trackData})
          // レポート slsWebLogger.send(submitData)
          process.env.NODE_ENV === '開発'の場合{
            console.log('slsWebLogger を追跡', submitData)
          }
        })
      }
    }
    Vue.directive(トラック名、トラック)
  }
}

カプセル化は比較的単純で、主に 2 つのことを行います。まず、命令にバインドされた DOM にクリックイベントを追加し、次に、報告されたデータを処理します。追跡指示をカプセル化する場合、パブリックデータは baseData を通じて渡され、汎用性が向上します。2 番目のパラメーターは、レポートプラットフォームのいくつかの構成パラメーターです。

初期化時にディレクティブを登録します。

'src/store' からストアをインポートします
'Lib/directive/track' からトラックをインポートします

関数 getBaseTrackData() {
  userInfo = store.state.User.user_info とします。
  // パブリックデータ const baseTrackData = {
    userId: userInfo.user_id, // ユーザーID
    userName: userInfo.user_name // ユーザー名}
  baseTrackDataを返す
}

Vue.use(トラック、{baseData: getBaseTrackData})

Vue.use が呼び出されると、呼び出すインストール関数が自動的に検索され、最終的にディレクティブがグローバルに登録されます。

汎用性を高める

クリックトラッキングに加えて、滞在トラッキングなどのシナリオがある場合、上記の手順は適用されません。この目的のために、手動呼び出しフォームを追加できます。

エクスポートデフォルト{
  インストール (Vue、{baseData = {}、slsOptions = {}) {
    // ...
    Vue.directive(トラック名、トラック)
    // 手動で呼び出す Vue.prototype.slsWebLogger = {
      送信 (トラックデータ) {
        トラックデータイベント名の場合
          console.error('トラックslsWebLoggerイベント名が無効です')
          戻る
        }
        const 送信データ = Object.assign({}, getBaseTrackData(), trackData)
        slsWebLogger.send(送信データ)
        process.env.NODE_ENV === '開発'の場合{
          console.log('slsWebLogger を追跡', submitData)
        }
      }
  }
}

プロトタイプにマウントするこの方法は、各コンポーネントインスタンスで this を介して簡単に呼び出すことができます。

エクスポートデフォルト{
    // ...
    作成された（）{
        this.slsWebLogger.send({
            //...
        })
    }
}

要約する

この記事では、追跡命令をカプセル化するプロセスについて説明します。カプセル化は難しくありません。主に 2 つの形式があります。クリックトラッキングは、DOM クリックイベントをバインドしてクリックレポートをリッスンしますが、他のシナリオでは手動呼び出しが提供されます。主にカプセル化の考え方とその使い方を記録したいと思います。追跡ポイントの実装も業務に合わせて調整されています。たとえば、登録追跡ポイント指示は、レポートプラットフォームの構成パラメータを受け入れることができます。結局のところ、人間は生きていて、コードは死んでいるのです。ビジネスニーズを満たし、メンテナンスが可能な限り、お客様にとって快適な方法でご利用いただけます。

以上で、Vue エンジニアがカプセル化しなければならないトラッキング命令の知識まとめの記事は終了です。より関連性の高い Vue カプセル化トラッキング命令については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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