Zusammenfassung des Wissens über Einbettungsanweisungen, die Vue-Ingenieure kapseln müssen

Vorwort

Vor kurzem musste ich in meinem Projekt eine Tracking-Funktion implementieren. Nachdem ich die Tracking-Dokumente des Produkts sortiert hatte, stellte ich fest, dass es viele Szenarien für das Klick-Tracking gibt. Da wir den Alibaba Cloud SLS-Protokolldienst zum Verfolgen von Punkten verwenden, nutzen wir manuellen Einbruchscode zum Verfolgen von Punkten. Nachdem Sie sich für eine Einbettungsform entschieden haben, stehen Ihnen viele technische Implementierungsmethoden zur Verfügung. Welche ist besser?

Ein kleiner Gedanke ...

Ich habe mich dazu entschieden, eine Tracking-Anweisung zu kapseln, die bequemer zu verwenden ist, da die Anweisung eine feine Granularität aufweist und die wichtigsten Punkte direkt treffen kann, was für die oben genannten Geschäftsszenarien gut geeignet ist.

Unterrichtsgrundlagen

Lassen Sie uns vorher die benutzerdefinierten Anweisungen von Vue überprüfen. Hier stellen wir nur die allgemein verwendeten Grundkenntnisse vor. Eine ausführlichere Einführung finden Sie in der offiziellen Dokumentation.

Hook-Funktion

• binden: Wird nur einmal aufgerufen, wenn die Direktive zum ersten Mal an ein Element gebunden wird.
• eingefügt: wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird.
• update: Wird aufgerufen, wenn der VNode der Komponente aktualisiert wird.

Hook-Funktionsparameter

• el: Das DOM-Element, an das die Direktive gebunden ist.
• Bindung: Ein Objekt mit den folgenden Eigenschaften:
  • Wert: Der Bindungswert der Direktive. Beispielsweise ist in v-my-directive="1 + 1" der Bindungswert 2.
  • arg: An den Befehl übergebener Parameter, optional. In v-my-directive:foo lautet der Parameter beispielsweise „foo“.
• vnode: Der aktuelle Komponenten-vnode, an den die Anweisung gebunden ist.

Hier ist ein kleiner Trick, den ich mit Ihnen teilen möchte. Es gibt keinen Parameter im Hook-Funktionsparameter, der die aktuelle Instanz direkt abrufen kann, aber sie kann über vnode.context abgerufen werden. Dies wurde auch in meinem vorherigen Artikel zu Vue-Kenntnissen geteilt. Wenn Sie interessiert sind, können Sie es sich ansehen.

Text

Kommen wir zum Punkt. Im Folgenden wird die Verwendung von Tracking-Anweisungen und deren interne Umsetzung vorgestellt.

Verwendung und Ideen

Wenn ich etwas kapsele, bestimme ich im Allgemeinen zuerst, wie es verwendet werden soll, und beginne dann mit der Kapselung basierend auf der Verwendung. Dadurch wird die gesamte Idee klarer und Sie können bei der Definition der Verwendung auch die Benutzerfreundlichkeit berücksichtigen, um Nacharbeiten nach der Kapselung aufgrund unbefriedigender Verwendung zu vermeiden.

Die vom Trackingpunkt gemeldeten Daten unterteilen sich in öffentliche Daten (Daten, die von jedem Trackingpunkt gemeldet werden müssen) und benutzerdefinierte Daten (optionale Zusatzdaten, die zusammen mit den öffentlichen Daten gemeldet werden). Dann werden die öffentlichen Daten intern einheitlich verarbeitet und die benutzerdefinierten Daten müssen von außen importiert werden. Es gibt also zwei Verwendungszwecke:

Allgemeine Verwendung

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

Benutzerdefinierte Daten

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

Sie können sehen, dass das Tracking-Ereignis in Form eines Arguments übergeben wird. Zuvor habe ich auch gesehen, dass einige Freunde das Tracking-Ereignis in Form eines Werts gekapselt haben. Ich persönlich bevorzuge jedoch das Arg-Format, da dadurch leichter auf einen Blick erkennbar ist, um welches entsprechende vergrabene Ereignis es sich handelt.

Darüber hinaus ist die gemeldete Datenstruktur ungefähr wie folgt:

{   
    Ereignisname: „clickBtn“
    Benutzer-ID: 1,
    Benutzername: 'xxx',
    Daten: {
        andere: 'xxx'
    }
}

eventName ist der Ereignisname, der dem Einbettungspunkt entspricht. Die öffentlichen Daten befinden sich auf derselben Ebene wie diese und die benutzerdefinierten Daten werden in Daten platziert.

erreichen

Definieren Sie eine track.js-Datei

Importieren Sie SlsWebLogger aus „js-sls-logger“.

Funktion getSlsWebLoggerInstance (Optionen = {}) {
  returniere neuen SlsWebLogger({
    Gastgeber: '***',
    Projekt: '***',
    Protokollspeicher: `***`,
    Zeit: 10,
    Anzahl: 10,
    ...Optionen
  })
}

Standard exportieren {
  installieren (Vue, {baseData = {}, slsOptions = {}) {
    const slsWebLogger = getSlsWebLoggerInstance(slsOptions)
    // Methode zum Abrufen öffentlicher Daten let getBaseTrackData = typeof baseData === 'function' ? baseData : () => baseData
    let baseTrackData = null
    const Spur = {
      Name: "Spur",
      eingefügt (el, Bindung) {
        el.addEventListener('klicken', () => {
          wenn (!binding.arg) {
            console.error('Der Name des Track slsWebLogger-Ereignisses ist ungültig')
            zurückkehren
          }
          wenn (!baseTrackData) {
            baseTrackData = getBaseTrackData()
          }
          baseTrackData.eventName = Bindung.arg
          // Benutzerdefinierte Daten let trackData = binding.value || {}
          const submitData = Object.assign({}, baseTrackData, {data: trackData})
          // Bericht slsWebLogger.send(submitData)
          wenn (Prozess.env.NODE_ENV === 'Entwicklung') {
            console.log('slsWebLogger verfolgen', sendeDaten)
          }
        })
      }
    }
    Vue.Direktive(Track.name, Track)
  }
}

Die Kapselung ist relativ einfach und bewirkt im Wesentlichen zwei Dinge: Erstens fügt sie dem an die Anweisung gebundenen DOM ein Klickereignis hinzu und zweitens verarbeitet sie die gemeldeten Daten. Beim Einkapseln von Tracking-Anweisungen werden öffentliche Daten über baseData übergeben, was die Vielseitigkeit erhöhen kann. Der zweite Parameter sind einige Konfigurationsparameter der Berichtsplattform.

Registrieren Sie die Anweisung zum Zeitpunkt der Initialisierung:

Store aus „src/store“ importieren
Track aus „Lib/Direktive/Track“ importieren

Funktion getBaseTrackData () {
  let userInfo = store.state.Benutzer.user_info
  // Öffentliche Daten const baseTrackData = {
    userId: userInfo.user_id, // Benutzer-ID
    Benutzername: userInfo.user_name // Benutzername}
  baseTrackData zurückgeben
}

Vue.use(Track, {baseData: getBaseTrackData})

Wenn Vue.use aufgerufen wird, sucht es automatisch nach der aufzurufenden Installationsfunktion und registriert die Direktive schließlich global.

Für mehr Vielseitigkeit

Wenn es neben dem Klick-Tracking auch Szenarien wie das Stay-Tracking gibt, sind die obigen Anweisungen nicht anwendbar. Hierzu kann ein manuelles Anrufformular hinzugefügt werden.

Standard exportieren {
  installieren (Vue, {baseData = {}, slsOptions = {}) {
    // ...
    Vue.Direktive(Track.name, Track)
    // Vue.prototype.slsWebLogger manuell aufrufen = {
      sende (TrackData) {
        wenn (!trackData.eventName) {
          console.error('Der Name des Track slsWebLogger-Ereignisses ist ungültig')
          zurückkehren
        }
        const submitData = Object.assign({}, getBaseTrackData(), trackData)
        slsWebLogger.send(Daten übermitteln)
        wenn (Prozess.env.NODE_ENV === 'Entwicklung') {
          console.log('slsWebLogger verfolgen', sendeDaten)
        }
      }
  }
}

Diese Art der Anbindung an den Prototyp kann hierdurch bequem bei jeder Komponenteninstanz aufgerufen werden.

Standard exportieren {
    // ...
    erstellt () {
        dies.slsWebLogger.send({
            //...
        })
    }
}

Zusammenfassen

In diesem Artikel wird der Vorgang der Kapselung von Tracking-Anweisungen erläutert. Die Kapselung ist nicht schwer zu erreichen. Es gibt hauptsächlich zwei Formen. Das Klick-Tracking wartet auf Klickberichte, indem es DOM-Klickereignisse bindet, während in anderen Szenarien manuelle Aufrufe vorgesehen sind. Ich möchte hauptsächlich die Idee der Kapselung und ihre Verwendung aufzeichnen. Auch die Tracking-Point-Implementierung wurde betriebsspezifisch angepasst. So kann beispielsweise die Registrierungs-Tracking-Point-Anweisung die Konfigurationsparameter der Reporting-Plattform akzeptieren. Schließlich sind die Menschen lebendig und der Code ist tot. Solange es den Geschäftsanforderungen entspricht und gewartet werden kann, können Sie es auf jede für Sie angenehme Weise verwenden.

Damit ist dieser Artikel über die Wissenszusammenfassung der Tracking-Anweisungen, die Vue-Ingenieure kapseln müssen, abgeschlossen. Weitere relevante Vue-Kapselungs-Tracking-Anweisungen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!