dc-sdk-js ——一个基于浏览器环境的数据采集SDK

功能点

• 设备信息采集
• 监听页面加载离开
• 监听hash变化
• 监听页面点击
• 监听标签页隐藏显示
• 轮询发送热力图采集数据
• 轮询采集页面特定信息（以手机号为例）

以上功能都是精简后的，只作为demo展示，实际使用需要自身的业务场景酌情添加代码。

解决开发痛点

• 用webpack打包代码，支持模块化开发
• 用core-js提供pollyfill环境，支持es6语法
• 用eslint+standard规范代码风格，提升代码可读性和可维护性
• 提供了完善的测试页面，方便开发调试

浏览器支持

所有现代浏览器 和 IE8+.

技术栈思维导图

项目结构

.
+-- server            //服务端测试demo
+-- spa-angular       //angular测试demo
+-- spa-react         //react测试demo
+-- spa-vue           //vue测试demo
+-- config            //webpack配置
+-- src               //项目源码
|   +-- common        //通用模块
|   +-- config        //配置模块
|   +-- core          //核心模块，业务代码都在这个目录下
|       +-- interval  //轮询相关业务代码
|       +-- listener  //监听相关业务代码
|       +-- index.js  //入口文件
|       +-- params.js //封装了对请求参数的相关操作
|       +-- sender.js //封装了ajax和websocket请求
+-- test              //单元测试
+-- package.json

接入方式

(function() {
  var collect = document.createElement('script');
  collect.type = 'text/javascript';
  collect.async = true;
  collect.src =  '/index.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(collect, s);
})();

var _XT = [];

_XT.push(['token','custom token']);
_XT.push(['channelCode','custom channelCode']);
_XT.push(['serverUrl', 'http://localhost:8081/api'])
_XT.push(['wsUrl', 'ws://localhost:8081'])

配置说明

采集字段说明

安装依赖

npm install

开发环境启动

npm run dev

生产环境构建

npm run build

服务端启动

npm run server

单页应用构建

## angular
cd spa-angular
npm run build

## react
cd spa-react
npm run build

## vue
cd spa-vue
npm run build

服务端测试demo

为方便开发环境调试，我用node写了一个简易的服务端项目，其中实现了以下功能点：

• http服务
• websocket服务
• 服务端渲染测试demo
• 单页应用测试demo（包括vue、react、angular）

参考项目

• https://github.com/bailinlin/web-sdk
• https://github.com/534591395/smart_web_data_sdk
• https://github.com/sensorsdata/sa-sdk-javascript

License

MIT