Skip to content

mk-site/better-burying-point

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

项目地址

github地址

Introduction

1、埋点业务与主业务进行解耦(代码分离),依赖装饰器实现

2、支持框架Vue、React、Angular、小程序、原生js等项目使用

3、@after在主程序执行完毕后,再执行@after所装饰的函数

4、主要为埋点服务,更可应用到其他业务场景中

Installation

# for Vue Angular React

npm install better-burying-point --save-dev
import { setModule, setSeparator, before, after } from 'better-burying-point';

Usage

用法一:
// main.js
import { setModule } from 'better-burying-point';
// 设置模块
setModule({
    home: {
        homePage(item, index) {
            console.log(this); // 与handlerEvent函数内部的this指向相同
        },
        clickBtn(staticParamOne, staticParamTwo, item, index) {},
        leave(staticParamOne, staticParamTwo, item, index) {}
    }
})

// home.js
import { before, after } from 'better-burying-point';
const obj = {
    @after('home.homePage')
    handlerEvent(item, index){
        console.log(this);
    },
    @after('home.clickBtn', staticParamOne, staticParamTwo) // 此处两个静态参数会与clickBtn函数的参数进行拼装,传递到home模块下clickBtn函数内
    clickBtn(item, index){
        console.log('点击');
    },
    @before('home.leave', staticParamOne, staticParamTwo)
    goLink() {
        window.loation.href = 'https://xxx.com.cn';
    }
}
用法二:按照模块化拆分
// bury/modules/home.js
export default {
    homePage(item, index) {
        console.log(this);
    }
}
// bury/modules/detail.js
export default {
    detailPage(item, index) {
        console.log(this);
    }
}
// bury/index.js
import home from './modules/home.js';
import detail from './modules/detail.js';
export default {
    home,
    detail
}

// 入口文件处设置 main.js
import { setModule } from 'better-burying-point';
import module from './bury/index';
setModule(module);


// home页面 使用
var home = {
    @after('home.homePage')
    handlerEvent(item, index){
        console.log(this);
    }
}

Options

setModule

Type: Function[Object]
设置拆分模块的对象,为页面访问使用,函数参数为对象

setSeparator

Type: Function[String]
Default: '.'
设置对象访问分隔符,函数参数为字符串,比如:home.leave;如果设置'/',访问home/leave

before

Type: Function[arg1 , arg2, arg3, ...]
before函数返回一个装饰器函数
第一个参数:必须为字符串,模块访问顺序 第二个参数:静态参数 ... 第n个参数:静态参数
【 备注:】主程序执行之前才执行装饰函数

after

Type: Function[arg1 , arg2, arg3, ...]
after函数返回一个装饰器函数
第一个参数:必须为字符串,模块访问顺序 第二个参数:静态参数 ... 第n个参数:静态参数
【 备注:】主程序执行之后才执行装饰函数

License

MIT

About

前端数据埋点与业务代码分离

Resources

License

Stars

Watchers

Forks

Packages

No packages published