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データ操作言語の例の詳細な説明

推薦する

よく使われる HTML タグとその特徴の完全なリスト

まず、HTML タグのいくつかの特性を知っておく必要があります。 1. 「<keyword&g...

Mysqlは隣接リスト(隣接リスト)を通じてツリー構造を保存します。

以下の内容では、隣接リストを使用してツリー構造を保存する MYSQL のプロセスとソリューションを紹...

AngularJSループオブジェクトプロパティで動的列を実装するアイデアの詳細な説明

動的な列を実現するための Angularjs ループ オブジェクト プロパティ利点: オブジェクトを...

http-proxy-middlewareを使用してNodeでプロキシクロスドメインを実装する方法と手順

目次1. プロキシモジュールをインストールする2. プロキシを設定する1. プロキシモジュールをイン...

CentOS 7.x に ZSH ターミナルをインストールする方法

1. 基本コンポーネントをインストールするまず、 yumコマンドを実行して、コードpullために必要...

Navicat による MySQL パーティショニングの実践

MySQLのパーティショニングは、非常に大きなテーブルを管理するのに役立ちます。MySQLのパーティ...

MySQL <> および <=> 演算子の紹介

<> 演算子機能: 等しくないことを示します。注: 「!=」演算子と同じ機能を持ちますが...

MySQL スロークエリログの設定と使用方法のチュートリアル

序文MySQL スロー クエリ ログは、日常業務でよく遭遇する機能です。MySQL スロー クエリ ...

キープアライブキャッシュをクリアする方法の詳細なグラフィック説明

目次オープニングシーンv-for を使用した直接レンダリングカスタムコンポーネントで直接レンダリング...

HTML チュートリアル: 順序なしリスト

<br />原文: http://andymao.com/andy/post/102.h...

ウェブデザイナーは3つの側面からウェブページを最適化する必要がある

<br />帯域幅の増加に伴い、Web ページ上のオブジェクトも増えているため、Web ...

将来的に人気のあるウェブサイトのナビゲーションの方向

<br />今は情報爆発の時代であるだけでなく、サービス爆発の時代でもあります。それはす...

DockerにELKをインストールしてJSON形式のログ分析を実装する方法

ELKとは何ですか? ELK は、Elastic が提供するログ収集およびフロントエンド表示ソリュー...

Vue+element ui はアンカーの配置を実現します

この記事では、アンカー配置を実現するためのVue +要素UIの具体的なコードを例として紹介します。具...