js4log v1.0.2

前端日志统计工具

历史版本

直接用<script>引入

在常规的前端页面中可使用<script>标签引入，此时js4log会被注册为一个全局变量js4Log，请通过该对象进行相关的配置和事件注册

<script type="text/javascript" src="./x.x.x/js4Log.js"></script> 
<script>
js4Log.config({
  pageId: 123123,
  cusParam: {
    cus1: 'cus1...',
    cus2: 'cus2...',
  },
})
</script>

NPM

对于使用spa框架开发的项目时建议使用NPM进行安装

npm install --save js4log

import js4Log from 'js4Log/dist/js4Log'

js4Log.config({
  pageId: 123123  
  accessLog:false,
  loadLog:false,
  stayLog:false,
  cusParam: {
    cus1: 'cus1...',
    cus2: 'cus2...',
  },
})

对于SPA应用,需要在router守卫中重置pagePath，对于Vue来说，需要使用fullPath来保证携带了所有的GET参数

router.beforeEach((to, from, next) => {
    js4Log.config({
        accessLog:true,
        stayLog:true,
        loadLog:true,
        pagePath: `#${to.fullPath}`,
    })
    ...
})

2.配置项

js4Log.config(Object)

参数（Object）

3.公用方法

对于需要自定义上报日志的情况，可手动进行日志注册和日志上报

对于需要支持高级选择器的，需要手动引入Sizzle模块:

npm install sizzle

import Sizzle from 'sizzle'

js4Log.initLog(Object)

参数（Object）

比如需要不使用默认的滚动日志并自定义滚动日志

js4Log.config({
   scrollLog:false 
})

js4Log.initLog(window,'scroll',{ info:'customScrollLog'})

则会在window注册一个scroll日志，并添加自定义参数，类似的日志可以注册到任意DOM的任意原生事件上

js4Log.log(params)

立即上报一条日志，有3种调用方式：

js4Log.log(params)

js4Log.log(params, evt | fn)

js4Log.log(params, evt, fn)

参数（Object）

成功回调函数参数（Object res）

失败回调函数参数（Object err）

比如通过下列方式进行会回调：

js4Log.log({...params},e,function(e){
    if(e.code == 1){
        console.log('发送失败',e.error)
    } else if(e.code == 0){
        console.log('发送成功',e.msg)
    }  
})

js4Log.addExtra(params)

添加全局参数,这个和config中的customParam相互独立，并具有更高的优先级

参数（Object）

js4Log.removeExtra(key)

删除指定参数

参数（String | Array）

js4Log.getLpvs()

返回当前日志的lpvs参数

js4Log.getPvs()

返回当前日志的pvs参数

注意

本日志工具的方法在对同一个对象的同一个事件进行日志初始化时，会先解绑上一次的日志事件，而不是追加。