控制台日志

const Log5j = {};
// 定义日志等级常量
const LOG_LEVELS = {
    DEBUG: 1,
    INFO: 2,
    WARN: 3,
    ERROR: 4
};

// 设置当前日志等级,默认为INFO
let currentLogLevel = LOG_LEVELS.INFO;
// 设置日志等级的函数
function setLogLevel(level) {
    currentLogLevel = LOG_LEVELS[level];
}

// 默认选项
let opt = {
    level: "info"
};

function getStyle() {
    const baseCss = "color:#fff ; padding: 1px; border-radius: 0 3px 3px 0;";
    switch (opt.level) {
        case "debug": return "background:green;" + baseCss;
        case "error": return "background:red;" + baseCss;
        case "info": return "background:blue;" + baseCss;
        case "warn": return "background:#a8d200;" + baseCss;
        default: return "background:black;" + baseCss;
    }
}

// 获取毫秒格式的日期
function getMill(format, timeText) {
    /*
     * eg:format="yyyy-MM-dd hh:mm:ss";
     */
    let timeObj=new Date(parseInt(timeText));
    var o = {
        "M+" : timeObj.getMonth() + 1, // month
        "d+" : timeObj.getDate(), // day
        "h+" : timeObj.getHours(), // hour
        "m+" : timeObj.getMinutes(), // minute
        "s+" : timeObj.getSeconds(), // second
        "q+" : Math.floor((timeObj.getMonth() + 3) / 3), // quarter
        "S+" : timeObj.getMilliseconds()
        // millisecond
    }

    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (timeObj.getFullYear() + "").substr(4
        - RegExp.$1.length));
    }

    for (var k in o) {
        if (new RegExp("(" + k + ")").test(format)) {
        var formatStr="";
        for(var i=1;i<=RegExp.$1.length;i++){
            formatStr+="0";
        }

        var replaceStr="";
        if(RegExp.$1.length == 1){
            replaceStr=o[k];
        }else{
            formatStr=formatStr+o[k];
            var index=("" + o[k]).length;
            formatStr=formatStr.substr(index);
            replaceStr=formatStr;
        }
        format = format.replace(RegExp.$1, replaceStr);
        }
    }
    return format;
}


function outPut (error=0, level, ...params) {
    if (level < currentLogLevel) {
        return
    }
    const cssText = getStyle();
    console.log(`%c${getMill("yyyy-MM-dd hh:mm:ss.SSS", Date.now())} %c${opt.level} ==>`, 
                "background:#35495e; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff",
                    cssText)
    let content = []
    params.forEach(
        (item) => {
            if(typeof item === "object"){
                if(params.length === 1){
                    console.log(item)
                } else {
                    content.push(JSON.stringify(item))
                }
            } else if(typeof item ==="number") {
                content.push(item.toString())
            }
            else{
                content.push(item)
            }
        }
    )
    // 内容输出
    if(error === 1){
        console.error(content.join(' '))
    } else if(error === 2 ){
        console.warn(content.join(' '))
    }
    else{
        console.log(content.join(' '))
    }
    
}

// debug 日志
function debugLog(...params) {
    opt.level == "debug";
    outPut(0,LOG_LEVELS["DEBUG"],...params);
}

// info日志
function infoLog(...params) {
    opt.level = "info";
    outPut(0,LOG_LEVELS["INFO"], ...params);
}

// error日志
function errorLog(...params) {
    opt.level = "error";
    outPut(1,LOG_LEVELS["ERROR"], ...params);
}

// warn日志
function warnLog(...params) {
    opt.level = "warn";
    outPut(2,LOG_LEVELS["WARN"], ...params);
}

// 导出函数
Log5j.debugLog = debugLog;
Log5j.infoLog = infoLog;
Log5j.errorLog = errorLog;
Log5j.warnLog = warnLog;

// notejs导出模块
//module.exports = Log5j;

// 将 Log5j 对象附加到 window 上
window.Log5j = {
    debugLog,
    infoLog,
    errorLog,
    warnLog
};

设定了日志等级,可以用setLogLevel("info")设定,小于等于设定等级的日志不会输出。 你可以在浏览器的控制台中或者任何脚本中通过window.Log5j来访问这些函数:

// 使用 Log5j
window.Log5j.debugLog('This is a debug message.');
window.Log5j.infoLog('This is an info message.');
window.Log5j.errorLog('This is an error message.');
window.Log5j.warnLog('This is a warning message.');

如果你在使用像 Webpack 这样的模块打包器,你可以使用 ES6 模块语法来导出 Log5j: javascript 复制 // 使用 ES6 模块语法导出 Log5j

export default {
    debugLog,
    infoLog,
    errorLog,
    warnLog
};

然后在导入时使用: javascript 复制

import Log5j from './path-to-log5j';
Log5j.debugLog('This is a debug message.');
Log5j.infoLog('This is an info message.');
Log5j.errorLog('This is an error message.');
Log5j.warnLog('This is a warning message.');

确保你的项目设置和打包工具配置正确,以便在浏览器环境中正确处理模块。如果你在使用像 Webpack 这样的工具,它应该能够处理 CommonJS 和 ES6 模块语法,并将其转换为浏览器可以理解的格式。

使用 Hugo 构建
主题 StackJimmy 设计