s94-web/mjs/s94_log.js

常用的web工具方法封装---牧人与鱼

var s94_log = (function (global){
    let document = global?.document;
    if (!document) return console.error('缺少 document 对象！');

    function s94_log(obj, note, depth){
        //初始化dom
        if(!s94_log.outer) s94_log.outer = s94_log.init();
        //渲染数据
        function loop(data, depth) {
            var html = '';
            if(typeof data === 'object') {
                if(depth >= 0) {
                    html += '<i onclick="' + s94_log.outer.openfunc + '(this)" style="">-</i><ul index="' + (depth%3) + '">';
                    for(var k in data) {
                        html += '<li>' + k + ' : ' + loop(data[k], (depth - 1)) + '</li>';
                    }
                    html += '</ul>';
                } else {
                    html += Object.prototype.toString.call(data);
                }
            } else {
                html = '<xmp>' + data + '</xmp>';
            }
            return html;
        }
        if (!note){
            let now = new Date();
            note = (now.getMinutes()+'').padStart(2,'0')+':'+(now.getSeconds()+'').padStart(2,'0')+'.'+(now.getMilliseconds()+'').padStart(3,'0');
        }
        depth = typeof(depth)=='undefined' ? 2 : Number(depth);
        s94_log.outer.style.display = 'block';
        s94_log.outer.dom_content.innerHTML += '<div><span style="color:#007AFF">' + note + '</span>: ' + loop(obj, depth || 2) + '</div>';
    }
    /**指定挂载的父节点，组件的字体大小会继承父节点的字体大小，默认为body。
     * @type {HTMLElement}
     */
    s94_log.parent_node;
    s94_log.init = function() {
        var boxid = 's94_log' + (new Date()).getTime(),
            outer = document.createElement('div'),
            log_ico = document.createElement('span'),
            exit = document.createElement('p'),
            stl = document.createElement('style'),
            log_txt = document.createElement('div');

        stl.innerHTML = `#${boxid} {display: none;position: fixed;font-size: inherit;bottom: 0;right: 0;width: 100%;z-index: 999999;background: #fff;color: #000;text-align: left;border-top: 1px solid #999;}
        #${boxid} *{padding:0;margin:0;font-size: inherit;}
        #${boxid}>p{display: none;height: 0;justify-content: space-between;position: absolute;top: 0;left: 0.8em;right: 0.8em;}
        #${boxid}>p>span{display: block;height:2em;line-height: 2;cursor: pointer;color: #E74C3C;}
        #${boxid}>div{display: none;background: #fff;margin-top:2em;height: 18em;max-height: 100%;padding: 0;line-height: 1.5em;overflow:auto;font-size:1em;}
        #${boxid}>div>div{margin-top: 1em}
        #${boxid} xmp{font-family: inherit;margin:0;display:inline;}
        #${boxid} i{color:#f00;display: inline-block;width: 1.5em;cursor: pointer;text-align: center;font-style: normal;}
        #${boxid} li{font-size: 1em;list-style-type: inherit;height:auto;line-height:1.2em}
        #${boxid} ul{padding-inline-start: 2em;}
        #${boxid} ul[index="0"]{list-style-type: circle;}
        #${boxid} ul[index="1"]{list-style-type: disc;}
        #${boxid} ul[index="2"]{list-style-type: square;}
        #${boxid}>span{display: block;color:#fff;background: rgba(0,0,0,.3);width: 1em;height: 1em;line-height:1.3em;text-align: center;font-size: 3em;position: fixed;bottom: 0.6em;right: 0.6em;cursor: pointer;}
        `;

        log_ico.innerText = '^';
        function change(open){
            log_ico.style.display = open ? 'none' : 'block';
            log_txt.style.display = open ? 'block' : 'none';
            exit.style.display = open ? 'flex' : 'none';
        }
        log_ico.addEventListener('click', function() {change(1)});
        exit.innerHTML = '<span>清空</span><span>关闭</span>';
        exit.querySelector('span').addEventListener('click', function() {
            log_txt.innerHTML = '';
            outer.style.display = 'none';
        });
        exit.addEventListener('click', function() {change()});
        outer.id = boxid;
        document.querySelector('head').appendChild(stl);
        if (s94_log.parent_node instanceof Element){
            s94_log.parent_node.appendChild(outer);
        }else {
            document.querySelector('body').appendChild(outer);
        }
        outer.appendChild(log_txt);
        outer.appendChild(exit);
        outer.appendChild(log_ico);
        outer.dom_content = log_txt;

        outer.openfunc = 'open' + boxid;
        window[outer.openfunc] = function(dom) {
            var ul = dom.parentNode.querySelector('ul');
            if(dom.innerText == '-') {
                dom.innerText = '+';
                ul.style.display = 'none';
            } else {
                dom.innerText = '-';
                ul.style.display = 'block';
            }
        }
        return outer;
    }

    return s94_log;
})(typeof globalThis !== 'undefined' ? globalThis :
    typeof self !== "undefined" ? self :
        typeof window !== "undefined" ? window :
            typeof global !== "undefined" ? global : {});

export default s94_log;