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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueプロジェクトへのフロントエンド埋め込みの実装
  • Vue手動埋め込み設計方法の例

<<:  スタイルをより標準化するための CSS の書き方に関する 5 つのヒント

>>:  MySQLチュートリアルDMLデータ操作言語の例の詳細な説明

推薦する

Docker で FastDFS をデプロイする方法

Dockerにfastdfsをインストールするディレクトリをマウント-v /e/fdfs/トラッカー...

Linux システム ディスクのフォーマットとスワップ パーティションの手動追加

Windows: NTFS、FATをサポートLinux は次のファイル形式をサポートしています: C...

Vueでルーティング権限を動的に設定する主なアイデア

以前、インターネット上で動的ルーティング設定をいくつか見たことがありましたが、現在のプロジェクトとは...

MySQL無料インストール版のパスワード設定に関する詳細なチュートリアル

方法1: SET PASSWORDコマンドを使用する MySQL -u ルート mysql> ...

jQueryはアコーディオン効果を実装します

この記事では、アコーディオンを実装するためのjQueryの具体的なコードを参考までに紹介します。具体...

MySQL接続クエリにおけるととwhereの違いの簡単な分析

1. テーブルを作成する テーブル「学生」を作成( `id` int(11) NULLではない、 `...

CSS3 でテキストマーキーを実装するためのサンプルコード

背景何が起こったかというと、Luzhu は偶然、宇宙で最高の外部スピーカーを備えた携帯電話について知...

CSS のグリッドプロパティの使用に関する詳細な説明

グリッドレイアウト親要素に追加された属性グリッドテンプレートの列/グリッドテンプレートの行要素の行ま...

HTML でフォーム入力やその他のテキスト ボックスを読み取り専用にして編集不可にする方法

場合によっては、フォーム内のテキスト ボックスを読み取り専用にして、ユーザーがその中の情報を変更でき...

MySQLが正常にインストールされたかどうかを確認する方法

MySQL をインストールした後、DOS ウィンドウまたは MySQL 5.7 コマンドライン クラ...

Vue+element はローカル検索機能付きのドロップダウン メニューを実装します

必要:バックエンドは配列オブジェクトを返し、それがフロントエンドで配列に結合されます。配列は名前に従...

安全な構成のためにDockerでTLSを有効にする手順

序文以前、Docker の 2375 Remote API を有効にしていました。会社のセキュリティ...

Reactイベントスロットリング効果が失敗する理由と解決策

目次ここでの問題は次の通りです:解決策1:解決策2: コンストラクタで初期化を割り当てる採掘場の概要...

Dockerで新しいイメージを手動で構築する方法

この記事では、Docker で新しいイメージを手動で構築する方法を紹介し、皆さんと共有します。詳細は...