Инженеры Vue должны научиться инкапсулировать идею скрытых точечных инструкций

внешний интерфейс Vue.js

предисловие

Недавно мне нужно было сделать функцию закапывания точек в проекте.После разбора документов точки закапывания продукта, я обнаружил, что есть много сцен щелчков и точек закапывания. Поскольку служба журналов Alibaba Cloud sls используется для захоронения точек, точки захоронения на основе кода захватываются вручную. После определения формы заглубленной точки существует множество технических способов реализации, какой из них лучше?

Небольшая мысль...

Было решено инкапсулировать команду скрытой точки, которая более удобна в использовании, поскольку гранулярность команды относительно невелика и она может напрямую попадать в ключевые точки, что очень подходит для бизнес-сценариев, упомянутых выше.

Основы инструкции

Перед этим давайте сначала рассмотрим пользовательские инструкции Vue.Здесь представлены только общие базовые знания. Более полное введение см.официальная документация.

функция ловушки

  • bind: Вызывается только один раз, когда директива впервые привязывается к элементу.

  • inserted: вызывается, когда связанный элемент вставляется в родительский узел.

  • update: вызывается при обновлении VNode компонента.

Параметры функции хука

  • el: элемент DOM, к которому привязана директива.
  • binding: объект, содержащий следующие свойства:
    • value: значение привязки директивы, например: v-my-directive="1 + 1", значение привязки равно 2.
    • arg: Параметры, передаваемые команде, необязательны. Например, в v-my-directive:foo параметр "foo".
  • vnode: Текущая инструкция компонента vnode привязана.

Вот небольшая хитрость, которой можно поделиться: в параметре функции ловушки нет параметра, который может напрямую получить текущий экземпляр, но его можно передать черезvnode.contextЯ понял, об этом также говорилось в моей предыдущей статье о навыках vue, если вам интересно, вы можете пойти и посмотреть.

текст

Вступая в тему, далее будет представлено использование команды скрытой точки и ее внутренняя реализация.

Использование и идеи

Как правило, когда я инкапсулирую что-то, я сначала определяю, как его использовать, а затем начинаю с того, как его инкапсулировать. Это прояснит всю идею, и вы также можете подумать о простоте использования при определении использования, чтобы не переделывать после завершения пакета, потому что использование не идеально.

Данные, выпущенные встроенной точкой, делятся на общедоступные данные (данные, которые должны сообщаться для каждой скрытой точки) и пользовательские данные (необязательные дополнительные данные и общедоступные данные). Затем общедоступные данные обрабатываются внутри, а пользовательские данные должны быть включены извне. Итак, следующие два использования:

  • Общее использование
<div v-track:clickBtn></div>
  • пользовательские данные
<div v-track:clickBtn="{other:'xxx'}"></div>

Видно, что событие зарытой точки передается в виде arg.До этого я также видел, что событие зарытой точки, инкапсулированное некоторыми небольшими партнерами, передается в значении. Но я лично предпочитаю форму arg, которая с первого взгляда более ясна, что такое соответствующее скрытое событие.

Кроме того, сообщаемая структура данных примерно следующая:

{   
    eventName: 'clickBtn'
    userId: 1,
    userName: 'xxx',
    data: {
        other: 'xxx'
    }
}

eventNameЭто имя события, соответствующее скрытой точке, тот же уровень является общедоступными данными, а пользовательские данные помещаются вdataВнутри.

выполнить

Определите файл track.js

import SlsWebLogger from 'js-sls-logger'

function getSlsWebLoggerInstance (options = {}) {
  return new SlsWebLogger({
    host: '***',
    project: '***',
    logstore: `***`,
    time: 10,
    count: 10,
    ...options
  })
}

export default {
  install (Vue, {baseData = {}, slsOptions = {}}) {
    const slsWebLogger = getSlsWebLoggerInstance(slsOptions)
    // 获取公共数据的方法
    let getBaseTrackData = typeof baseData === 'function' ? baseData : () => baseData
    let baseTrackData = null
    const Track = {
      name: 'track',
      inserted (el, binding) {
        el.addEventListener('click', () => {
          if (!binding.arg) {
            console.error('Track slsWebLogger 事件名无效')
            return
          }
          if (!baseTrackData) {
            baseTrackData = getBaseTrackData()
          }
          baseTrackData.eventName = binding.arg
          // 自定义数据
          let trackData = binding.value || {}
          const submitData = Object.assign({}, baseTrackData, {data: trackData})
          // 上报
          slsWebLogger.send(submitData)
          if (process.env.NODE_ENV === 'development') {
            console.log('Track slsWebLogger', submitData)
          }
        })
      }
    }
    Vue.directive(Track.name, Track)
  }
}

Инкапсуляция относительно проста и в основном делает две вещи: во-первых, добавляет событие клика в DOM связанной инструкции, а во-вторых, обрабатывает сообщаемые данные. При инкапсуляции инструкций со скрытыми точками общедоступные данные передаются черезbaseDataПередайте, что может повысить универсальность.Второй параметр - это некоторые параметры конфигурации платформы отчетности.

Зарегистрируйте директиву при инициализации:

import store from 'src/store'
import track from 'Lib/directive/track'

function getBaseTrackData () {
  let userInfo = store.state.User.user_info
  // 公共数据
  const baseTrackData = {
    userId: userInfo.user_id, // 用户id
    userName: userInfo.user_name // 用户名
  }
  return baseTrackData
}

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

Vue.useОн автоматически найдет функцию установки для вызова и, наконец, зарегистрирует инструкцию глобально.

Добавьте немного универсальности

В дополнение к нажатию на закопанную точку, если есть такие сцены, как пребывание на закопанной точке, приведенные выше инструкции не применяются. Для этого может быть добавлена ​​форма ручного вызова.

export default {
  install (Vue, {baseData = {}, slsOptions = {}}) {
    // ...
    Vue.directive(Track.name, Track)
    // 手动调用
    Vue.prototype.slsWebLogger = {
      send (trackData) {
        if (!trackData.eventName) {
          console.error('Track slsWebLogger 事件名无效')
          return
        }
        const submitData = Object.assign({}, getBaseTrackData(), trackData)
        slsWebLogger.send(submitData)
        if (process.env.NODE_ENV === 'development') {
          console.log('Track slsWebLogger', submitData)
        }
      }
  }
}

Этот способ присоединения к прототипу может быть выполнен для каждого экземпляра компонента черезthisЛегко позвонить.

export default {
    // ...
    created () {
        this.slsWebLogger.send({
            //...
        })
    }
}

Суммировать

В этой статье рассказывается о процессе инкапсуляции инструкций со скрытыми точками, и добиться инкапсуляции несложно. Есть две основные формы: нажмите на скрытую точку, чтобы отслеживать отчет о кликах, привязав событие клика DOM, в то время как в других сценариях предоставляется метод ручного вызова. В основном я хочу записать идею упаковки и как ее использовать. Реализация скрытых точек также настраивается в соответствии с бизнесом.Например, инструкции регистрации и скрытых точек могут принимать параметры конфигурации платформы отчетности. В конце концов, люди живы, а код мертв. Пока он может удовлетворить потребности бизнеса и может поддерживаться, как его удобно использовать.

Если у вас есть идеи и предложения, вы можете поделиться ими в комментариях~

Категории