纯js,高灵活性，页面数据分析库

川长思鸟来 2022-07-12 05:37 49阅读 0赞

/\*\*  
 \* 依赖文件：  
 \* unibabel\_index.js  https://github.com/Daplie/unibabel-js  
 \* async.js'    ---https://github.com/caolan/async  
 \*使用方法为：1、页面引入此js文件   2、设置页面需要统计的元素类标识 3、设置需要统计的元素id起始标识   
 \*实在不懂用的可以，关注微信公众号 ‘前端人’ 找到我  
 \* 有需要的可以把没有用的的多余函数可以去掉，按照标准库的形式改改，格式如下  
        (function () \{  
        'use strict';  
        function utf8ToBinaryString(base64) \{  
        var binstr = atob(base64);  
        var buf = binaryStringToBuffer(binstr);  
        return buf;  
        \}  
  
  
        window.Unibabel = \{  
        utf8ToBinaryString: utf8ToBinaryString  
        \};  
  
  
        \}());  
  
  
 \* t\*/  
var hmconfig = \{  
    release: true, //是否发送服务器请求  
    id: "hm", //需要统计的元素id起始标识  
    hmapi: "/hmapi", //链接的数据库  
    ajaxType: "POST", //请求方式  
    size: 600,//请求间隔时间  
    cTraceItemType: \{  
        page: 1,  
        link: 2,  
    \},  
    cTraceFrom: \{  
        wx: 1,  
        other: 2  
    \},  
    cTrackEvent: \{ //统计事件对象  
        click: \{  
            key: 1,  
            value: 'click'  
        \},  
        dclick: \{  
            key: 2,  
            value: 'dclick'  
        \},  
        view: \{  
            key: 3,  
            value: 'view'  
        \}  
    \},  
    title: "",  
    SendTrackInfo: 2000, // 接口标识（具体的接口格式根据自己后台定义）  
    UserGetTempUserId: 2001,  
    hm\_class: '.hm-fx-class' //需要统计的元素类标识  
\};  
/\*\*全局插件对象 \*/  
var hm\_factory = hm\_factory | \{\};  
hm\_factory = \{  
    sendAjaxElemeList: \[\],  
    sendAjaxViewsList: \[\],  
    hmElementListCount: 0,  
    hmSendCounts: 0,  
    /\*\*监听事件集合对象 \*/  
    hm\_element\_click\_time: null,  
    /\*\*angular 对象 \*/  
    hm\_app: null,  
    /\*\*页面进入时间 \*/  
    hm\_load\_time: 0,  
    /\*\*页面集合 \*/  
    hmElementList: \{\},  
    /\*\*收集元素集合 \*/  
    hmBtnList: \[\],  
    /\*\*定时器 \*/  
    clearInterval: null,  
    ListObject: \{  
        sendAjaxElemeList: \{  
            num: 0  
        \},  
        sendAjaxViewsList: \{  
            num: 0  
        \}  
    \},  
    ListName: null,  
    createscr: function(back) \{  
        hm\_factory.init();  
    \},  
    //初始化   
    init: function() \{  
        setTimeout(function() \{  
            hm\_factory.Load();  
        \}, 300)  
    \},  
    /\*检查是否加载 \*/  
    Load: function() \{  
        hm\_factory.hmElementList = hm\_factory.gethmElementList();  
        //初始化载入时间  
        hm\_factory.hm\_load\_time = Date.now();  
        //注册页面变化监听事件  
        hm\_factory.addListenerPageChange();  
        //初始化载入页面   
        var title = hm\_factory.getTitle();  
        hmconfig.title = title;  
        //设置页面访问时间  
        hm\_factory.setElementList(title, 1);  
        //设置doment 节点变化监听事件  
        hm\_factory.loadDocument();  
        //设置数据变化发送请求的定时器  
        hm\_factory.setSendListTime();  
        //添加第一个页面  
        hm\_factory.addPageDate();  
    \},  
    /\*\*获取登录用户信息 \*/  
    getuser: function() \{  
        //hmElementList  
        var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : \{\};  
        if (user) \{  
            user\['ud'\] = user\['ud'\] ? user\['ud'\] : hm\_factory.getGuid();  
            hm\_factory.setuser('user', user);  
        \} else \{  
            user = \{\};  
            user\['ud'\] = hm\_factory.getGuid();  
            hm\_factory.setuser('user', user);  
        \}  
        return user;  
    \},  
    gethmElementList: function() \{  
        var hmElementList = localStorage.getItem('hmElementList') ? localStorage.getItem('hmElementList') : \{\};  
        if (hmElementList && hmElementList != "null") \{  
            hmElementList = JSON.parse(localStorage.getItem('hmElementList'));  
            hmElementList = typeof(hmElementList) == 'object' ? hmElementList : \{\};  
            hm\_factory.setuser('hmElementList', hmElementList);  
        \} else \{  
            hmElementList = \{\};  
            hm\_factory.setuser('hmElementList', hmElementList);  
        \}  
        return hmElementList;  
    \},  
    /\*\*设置登录用户信息 \*/  
    setuser: function(name, user) \{  
        localStorage.setItem(name, JSON.stringify(user));  
    \},  
    /\*\*设置数据变化发送请求的定时器 \*/  
    dao: function() \{  
        var list = hm\_factory.sendAjaxElemeList;  
        var cmd = null;  
        if (list.length > 0) \{  
            hm\_factory.ListName = "sendAjaxElemeList";  
        \} else \{  
            hm\_factory.ListName = "sendAjaxViewsList";  
            list = hm\_factory.sendAjaxViewsList;  
        \}  
        cmd = list\[hm\_factory.ListObject\[hm\_factory.ListName\].num\];  
        if (cmd) \{  
            console.debug("dao\*\*\*" + cmd);  
            hm\_factory.sendAjax(cmd, function() \{  
                hm\_factory.ListObject\[hm\_factory.ListName\].num++;  
                hm\_factory\[hm\_factory.ListName\] = hm\_factory\[hm\_factory.ListName\].splice(hm\_factory.ListObject\[hm\_factory.ListName\].num, 1);  
                // hm\_factory.dao();  
            \});  
        \} else \{  
            hm\_factory.ListObject.sendAjaxElemeList.num = 0;  
            hm\_factory.ListObject.sendAjaxViewsList.num = 0;  
        \}  
        setTimeout(function() \{  
            hm\_factory.dao();  
        \}, 1000)  
    \},  
    setSendListTime: function() \{  
        hm\_factory.dao();  
    \},  
    /\*\*监听页面变化 \*/  
    addListenerPageChange: function() \{  
        if (("onhashchange" in window) && ((typeof document.documentMode === "undefined") || document.documentMode == 8)) \{  
            window.onhashchange = hm\_factory.onhashchange;  
            window.onhashchange();  
        \}  
    \},  
    /\*\*页面变化触发的事件 \*/  
    onhashchange: function() \{  
        console.debug("切换页面\*\*\*");  
        // hm\_factory.hmElementList = \{\};  
        hm\_factory.hmElementListCount = 0;  
        hm\_factory.addPageDate(); // 添加页面到集合  
        clearInterval(hm\_factory.clearInterval);  
        hm\_factory.clearInterval = setInterval(function() \{  
            var page = hm\_factory.getTitle();  
            hm\_factory.setElementList(page, hmconfig.size);  
            hm\_factory.setuser('hmElementList', hm\_factory.hmElementList);  
            console.debug("添加页面停留时间\*\*\*");  
        \}, hmconfig.size);  
  
  
    \},  
    /\*\*添加页面到集合 \*/  
    addPageDate: function() \{  
        var page = hm\_factory.getTitle();  
        hmconfig.title = page;  
        var cmd = hm\_factory.getAjaxParemt(hmconfig.cTrackEvent.view.value, 0, page);  
        hm\_factory.sendAjaxViewsList.push(cmd);  
    \},  
  
  
    /\*\*获取页面标示 \*/  
    getTitle: function() \{  
        var hash = document.location.hash;  
        hash = hash.split('?');  
        hash = hash\[0\];  
        hash = hash.replace(/\[\\\\\\/\]/g, "\_");  
        hash = hash.replace(/\[\\\\\#\]/g, "");  
        hash = hash.substring(1, hash.length);  
        // hash = hash == hmconfig.pages\[0\] ? hmconfig.pages\[0\]\['value'\] : hmconfig.pages\[0\]\['value'\];  
        return hash;  
    \},  
    /\*\*设置List数据 \*/  
    setElementList: function(key, value) \{  
        var item = hm\_factory.hmElementList\[key\];  
        item = item ? (item + value) : value;  
        hm\_factory.hmElementList\[key\] = item;  
    \},  
    /\*\*设置doment 元素改变监听事件 \*/  
    loadDocument: function() \{  
        var addLoadedEvent = (function() \{  
            var load\_events = \[\],  
                load\_timer, script, done, exec, old\_onload, init = function() \{  
                    hm\_factory.getListenerElements();  
                \};  
            return function(func) \{  
                if (done) return func();  
                if (!load\_events\[0\]) \{  
                    // for Mozilla/Opera9   
                    if (document.addEventListener) \{  
                        document.addEventListener("DOMContentLoaded", init, false)  
                    \};  
                    // for Safari   
                    if (/WebKit/i.test(navigator.userAgent)) \{  
                        load\_timer = setInterval(function() \{  
                            if (/loaded|complete/.test(document.readyState)) init(); // call the onload handler   
                        \}, 10);  
                    \}  
                    // for other browsers set the window.onload, but also execute the old window.onload   
                    old\_onload = window.onload;  
                    window.onload = function() \{  
                        init();  
                        if (old\_onload) old\_onload();  
                    \};  
                \}  
                load\_events.push(func);  
            \}  
        \})();  
        addLoadedEvent();  
    \},  
    /\*\*监听document \*/  
    addLoadedEvent: function() \{  
        document.addEventListener('DOMNodeInserted', function(e) \{  
            hm\_factory.getListenerElements();  
        \})  
    \},  
    /\*\*获取监听元素 \*/  
    getListenerElements: function(back) \{  
        var hmElementList = document.querySelectorAll(hmconfig.hm\_class);  
        if (hmElementList.length != hm\_factory.hmElementListCount) \{  
            console.debug("查找元素");  
            hm\_factory.hmElementListCount = hmElementList.length;  
            hm\_factory.addEventListener();  
        \}  
  
  
    \},  
  
  
    /\*\*设置监听元素事件 \*/  
    addEventListener: function() \{  
        var hm\_class = hmconfig.hm\_class + "\[id\]";  
        $(hm\_class).on('click', function(e) \{  
            hm\_factory.elementClick(e);  
            event.stopPropagation();  
  
  
        \})  
  
  
    \},  
    /\*\*监听元素点击事件处理 \*/  
    elementClick: function(e) \{  
        console.debug("点击元素");  
        var time = new Date();  
        var cmd = hm\_factory.getAjaxParemt(e.type, time, e.currentTarget.id);  
        hm\_factory.sendAjaxElemeList.push(cmd);  
    \},  
    /\*\*获取请求的参数 \*/  
    getAjaxParemt: function(postType, time, hmId) \{  
        var cmd = \{\};  
        time = time ? time : 0;  
        cmd = \{  
            cmd\_type: hmconfig.SendTrackInfo,  
            ud: hm\_factory.getuser().ud, //用户id  
            id: hmId, //页面或元素编号  
            type: hmconfig.cTraceItemType.page, //'<cTraceItemType>',  
            title: location.hash, //页面描述  
            url: location.href, //所在页面的 url地址  
            stime: new Date().toISOString(),  
            etime: "",  
            event: 0,  
            count: 1, //事件累计发送的次数，用于异步上传跟踪状态用  
            note: '', //备注信息  
            from: hmconfig.cTraceFrom.wx,  
            header: navigator.userAgen,  
        \}  
        if (postType == hmconfig.cTrackEvent.click.value) \{  
            cmd.event = hmconfig.cTrackEvent.dclick.key;  
            cmd.type = hmconfig.cTraceItemType.page;  
            cmd.stime = new Date().toISOString();  
            cmd.note = '单击';  
        \} else if (postType == hmconfig.cTrackEvent.dclick.value) \{  
            cmd.event = hmconfig.cTrackEvent.dclick.key;  
            cmd.type = hmconfig.cTraceItemType.page;  
            cmd.stime = new Date().toISOString();  
            cmd.note = '双击';  
        \} else if (postType == hmconfig.cTrackEvent.view.value) \{  
            var no = hm\_factory.hmElementList\[hmId\];  
            var stime = "";  
            try \{  
                stime = new Date(Date.now() - (no ? no : 0)).toISOString();  
            \} catch (error) \{  
                stime = new Date().toISOString();  
            \}  
            var etime = new Date().toISOString();  
            cmd.id = "\#" + cmd.id;  
            if (cmd.ud) \{  
                cmd.ud = hm\_factory.getuser().ud;  
            \}  
            cmd.stime = stime;  
            cmd.etime = etime;  
            cmd.event = hmconfig.cTrackEvent.view.key;  
            cmd.type = hmconfig.cTraceItemType.link;  
            cmd.count = 1;  
            cmd.note = document.title;  
            hm\_factory.hmElementList\[hmId\] = 0;  
        \}  
        return cmd;  
    \},  
    /\*\*发送ajax请求到后台 \*/  
    sendAjax: function(cmd, back) \{  
        var cmd\_utf8 = Unibabel.strToUtf8Arr(JSON.stringify(cmd));  
        var cmd\_base64 = Unibabel.arrToBase64(cmd\_utf8);  
        var req = \{  
            url: hmconfig.hmapi,  
            headers: \{ 'cmd-type': cmd\['cmd\_type'\] \},  
            timeout: 10000,  
            data: \{ 'cmd': cmd\_base64 \},  
            async: true,  
        \};  
        console.log("请求参数" + JSON.stringify(cmd));  
        if (hmconfig.release) \{  
            $.ajax(\{  
                crossDomain: true,  
                xhrFields: \{  
                    withCredentials: true  
                \},  
                url: req.url,  
                headers: req.headers,  
                contentType: 'application/json; charset=utf-8',  
                data: JSON.stringify(req.data),  
                method: "POST",  
                success: function(ret) \{  
                    var ret\_utf8 = Unibabel.base64ToArr(ret.ret);  
                    var ret = Unibabel.utf8ArrToStr(ret\_utf8);  
                    ret = JSON.parse(ret);  
                    if (ret.st == 0) \{  
                        console.log("成功" + cmd.id);  
                        if (back) \{  
                            back(ret);  
                        \}  
                    \} else \{  
                        console.log("缺少参数");  
                        if (back) \{  
                            back(ret);  
                        \}  
                    \}  
  
  
  
  
                \},  
                "error": function(dt) \{  
                    console.log(dt);  
                \}  
            \});  
        \} else \{  
            var menage = "";  
            if (!cmd.stime) \{  
                menage = "==错误：stime==";  
            \} else if (!cmd.id) \{  
                menage = "==错误：id==";  
            \} else if (!cmd.ud) \{  
                menage = "==错误：ud==";  
            \} else if (!cmd.type) \{  
                menage = "==错误：type==";  
            \} else if (!cmd.event) \{  
                menage = "==错误：event==";  
            \}  
            if (menage) \{  
                console.error(menage);  
                console.error(cmd);  
            \}  
            back(req);  
        \}  
  
  
  
  
    \},  
    /\*\*获取用户基本信息 \*/  
    getUserMenages: function() \{  
        var hm\_open\_url = document.referrer;  
        hm\_open\_url = hm\_open\_url ? hm\_open\_url : '输入地址进入';  
        var hm\_header = navigator.userAgent.toLowerCase();  
        // hm\_factory.getUserModel();  
        // var hm\_phone = hm\_factory.hm\_app.me ? hm\_factory.hm\_app.me\['phone'\] : '88888888';  
        var hm\_id = hm\_factory.getGuid();  
        var hm\_time\_sum = hm\_factory.getUserTimes();  
        var hm\_ctime = Date.now();  
        var hm\_load\_time = hm\_factory.hm\_load\_time;  
        var hm\_screen = window.screen;  
        var hm\_language = navigator.language;  
        return \{  
            hm\_ip: hm\_city.cip,  
            hm\_id: hm\_id,  
            hm\_login\_type: hm\_login\_type,  
            hm\_open\_url: hm\_open\_url,  
            hm\_sys\_width: hm\_screen.availWidth,  
            hm\_sys\_height: hm\_screen.availHeight,  
            hm\_time\_sum: hm\_time\_sum,  
            hm\_language: hm\_language,  
            hm\_ctime: hm\_ctime,  
            hm\_load\_time: hm\_load\_time  
        \}  
    \},  
    /\*\*获取集合某项数据 \*/  
    getElementList: function(index) \{  
        var item = hm\_factory.hmElementList\[index\];  
        item = item ? item : "";  
        hm\_factory.hmElementList\[index\] = item;  
        return item;  
    \},  
  
  
    /\*\*统计用户页面停留时间 \*/  
    getUserTimes: function() \{  
        var satrt\_time = hm\_factory.hm\_load\_time;  
        return Date.now() - satrt\_time;  
    \},  
    /\*\*创建用户唯一标识 \*/  
    getGuid: function newGuid(format) \{  
        function Guid(g) \{  
            var arr = new Array(); //存放32位数值的数组  
            if (typeof(g) == "string") \{ //如果构造函数的参数为字符串  
                InitByString(arr, g);  
            \} else \{  
                InitByOther(arr);  
            \}  
            //返回一个值，该值指示 Guid 的两个实例是否表示同一个值。  
            this.Equals = function(o) \{  
                if (o && o.IsGuid) \{  
                    return this.ToString() == o.ToString();  
                \} else \{  
                    return false;  
                \}  
  
  
            \}  
  
  
            //Guid对象的标记  
            this.IsGuid = function() \{\}  
                //返回 Guid 类的此实例值的 String 表示形式。  
            this.ToString = function(format) \{  
                if (typeof(format) == "string") \{  
                    if (format == "N" || format == "D" || format == "B" || format == "P") \{  
                        return ToStringWithFormat(arr, format);  
                    \} else \{  
                        return ToStringWithFormat(arr, "D");  
                    \}  
  
  
                \} else \{  
                    return ToStringWithFormat(arr, "D");  
                \}  
  
  
            \}  
  
  
            //由字符串加载  
            function InitByString(arr, g) \{  
                g = g.replace(/\\\{|\$|\$|\\\}|-/g, "");  
                g = g.toLowerCase();  
                if (g.length != 32 || g.search(/\[^0-9,a-f\]/i) != -1) \{  
                    InitByOther(arr);  
                \} else \{  
                    var temp = g.split("");  
                    for (var i = 0; i < temp.length; i++) \{  
                        arr.push(temp\[i\]);  
                    \}  
                \}  
            \}  
  
  
            //由其他类型加载  
  
  
            function InitByOther(arr) \{  
                var i = 32;  
                while (i--) \{  
                    arr.push("0");  
                \}  
            \}  
  
  
            function ToStringWithFormat(arr, format) \{  
                switch (format) \{  
                    case "N":  
                        return arr.toString().replace(/,/g, "");  
                    case "D":  
                        var str = arr.slice(0, 8) + "-" + arr.slice(8, 12) + "-" + arr.slice(12, 16) + "-" + arr.slice(16, 20) + "-" + arr.slice(20, 32);  
                        str = str.replace(/,/g, "");  
                        return str;  
                    case "B":  
                        var str = ToStringWithFormat(arr, "D");  
                        str = "\{" + str + "\}";  
                        return str;  
                    case "P":  
                        var str = ToStringWithFormat(arr, "D");  
                        str = "(" + str + ")";  
                        return str;  
                    default:  
                        return new Guid();  
                \}  
  
  
            \}  
  
  
        \}  
        //Guid 类的默认实例，其值保证均为零。  
        Guid.Empty = new Guid();  
        //初始化 Guid 类的一个新实例。  
        Guid.NewGuid = function() \{  
            var g = "";  
            var i = 32;  
            while (i--) \{  
                g += Math.floor(Math.random() \* 16.0).toString(16);  
            \}  
            return new Guid(g);  
        \}  
        format = format || 'n';  
        var cookie\_id = window.localStorage.cookie\_id;  
        cookie\_id = cookie\_id ? cookie\_id : Guid.NewGuid().ToString(format.toUpperCase());  
        window.localStorage.cookie\_id = cookie\_id;  
        return cookie\_id;  
    \},  
  
  
    /\*\*检查用户登录设备 \*/  
    getUserModel: function() \{  
        var flag = "";  
        var agent = navigator.userAgent.toLowerCase();  
        var keywords = \["android", "iphone", "ipod", "ipad", "windows phone", "mqqbrowser", "windows nt", "compatible; msie 9.0", "macintosh"\];  
        for (var i = 0; i < keywords.length; i++) \{  
            if (agent.indexOf(keywords\[i\]) > -1) \{  
                flag = keywords\[i\];  
            \}  
        \}  
        return flag;  
    \}  
  
  
\};  
hm\_factory.createscr();