Shulou(Shulou.com)06/02 Report--

This article focuses on "what are the embedded instructions that must be encapsulated by vue engineers?" interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the embedded instructions that must be encapsulated by vue engineers?"

Instruction basics

Before that, let's review the vue custom instructions, here only introduce the commonly used basics. For a more complete introduction, you can check the official documentation.

Hook function

Bind: called only once, the first time an instruction is bound to an element.

Inserted: called when the bound element is inserted into the parent node.

Update: called when the VNode of the component in which it resides is updated.

Hook function parameter

El: the DOM element that the instruction binds.

Binding: an object that contains the following property:

Value: the binding value of the instruction, for example: in "1 + 1", the binding value is 2.

Arg: the parameter passed to the instruction, optional. For example, in v-my-directive:foo, the parameter is "foo".

Vnode: the current component vnode bound by the directive.

Here is a tip. There is no parameter in the hook function that can directly get the current instance, but it can be obtained through vnode.context, which was also shared in my previous vue tips. If you are interested, you can take a look.

Text

To get to the point, the following will introduce the use of embedded instructions and how to implement them internally.

Usage and thinking

Usually when I encapsulate something, I will first determine how to use it, and then start from the usage to package. This will make the whole idea clearer, and you can also think about ease of use when defining usage, so as not to rework because the usage is not ideal after encapsulation.

The data reported by the burial site is divided into public data (data to be reported at each burial site) and custom data (optional additional data, reported with public data). Then the public data is processed uniformly internally, and the custom data needs to be imported from the outside. As a result, there are two uses:

General usage

Custom data

You can see that buried events are passed in the form of arg. Previously, we also saw that some embedded events encapsulated by partners were passed in value. But I personally prefer the form of arg, which makes people more clear at a glance what the corresponding event is.

In addition, the reported data structure is roughly as follows:

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

EventName is the event name corresponding to the buried site, with public data at the same level, while custom data is placed in the data.

Realize

Define a file for 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) / / method of obtaining public data 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 ('invalid Track slsWebLogger event name') return} if (! baseTrackData) {baseTrackData = getBaseTrackData ()} baseTrackData.eventName = binding.arg / / Custom data let trackData = binding.value | {} Const submitData = Object.assign ({}) BaseTrackData, {data: trackData}) / / report slsWebLogger.send (submitData) if (process.env.NODE_ENV = 'development') {console.log (' Track slsWebLogger', submitData)}})}} Vue.directive (Track.name, Track)}}

The encapsulation is relatively simple, and two main things are done. The first is to add the click event to the DOM that binds the instruction, and the second is to process the reported data. When encapsulating buried point instructions, common data is passed in through baseData, which increases versatility. The second parameter is some configuration parameters of the reporting platform.

Register directives at initialization:

Import store from 'src/store'import track from' Lib/directive/track'function getBaseTrackData () {let userInfo = store.state.User.user_info / / Public data const baseTrackData = {userId: userInfo.user_id, / / user id userName: userInfo.user_name / / user name} return baseTrackData} Vue.use (track, {baseData: getBaseTrackData})

When Vue.use, it will automatically find the install function to call, and finally register the instruction globally.

Add some versatility

In addition to clicking burial points, if there are scenarios such as burying points, the above instructions will not apply. To do this, you can increase the form of manual calls.

Export default {install (Vue, {baseData = {}, slsOptions = {}) {/ /. Vue.directive (Track.name, Track) / / manually call Vue.prototype.slsWebLogger = {send (trackData) {if (! trackData.eventName) {console.error ('invalid Track slsWebLogger event name') return} const submitData = Object.assign ({}, getBaseTrackData () TrackData) slsWebLogger.send (submitData) if (process.env.NODE_ENV = 'development') {console.log (' Track slsWebLogger', submitData)}

This way of mounting to the prototype can be easily invoked through this on each component instance.

Export default {/ /... Created () {this.slsWebLogger.send ({/ /.})} so far, I believe you have a deeper understanding of "what are the embedded instructions that must be encapsulated by vue engineers". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.