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

/**
 * 依赖文件：
 * 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();