JavaScript通用日志对象

日志对象

---

日志对象是一个用于在控制台输出不同级别的日志信息的工具。它提供了一系列的方法，包括trace()、debug()、info()、warn()和error()，可以根据不同的需求选择合适的方法来记录日志。

简介

---

日志对象是一个方便的工具，可用于在调试和开发过程中输出日志信息，以帮助我们理解程序的执行流程和问题所在。它可以按照不同的日志级别输出不同的日志信息，并且支持自定义样式来美化输出效果。

使用教程

• 引入日志对象

  首先，需要将日志对象的代码引入到项目中。可以将代码复制到项目的脚本文件中，或者通过其他方式引入代码。

• 输出日志信息

  使用日志对象提供的方法来输出日志信息，例如：

zhongjyuan.logger.trace('This is a trace message');
zhongjyuan.logger.debug('This is a debug message');
zhongjyuan.logger.info('This is an info message');
zhongjyuan.logger.warn('This is a warning message');
zhongjyuan.logger.error('This is an error message');

每个方法接受一个或多个参数，这些参数将被格式化并输出到控制台。

• 样式定制（可选）

  如果希望自定义日志信息的样式，可以修改日志对象中定义的样式变量。例如，可以更改前缀样式、时间样式和正文样式来适应自己的需求。

  代码片段

  /**
   * 日志对象
   * @author zhongjyuan
   * @date   2023年5月12日11:43:59
   * @email  [e-mail]
   */
  zhongjyuan.logger = (function () {
    /**前缀样式 */
    const prefixStyle = "color: ${0}; background: ${1}; padding: 3px; border-radius: 3px 0 0 3px;";
    /**时间样式 */
    const timestampStyle = "color: ${0}; background: ${1}; padding: 3px; border-radius: 0 0 0 0;";
    /**正文样式 */
    const contentStyle = "color: ${0}; background: ${1}; padding: 3px; border-radius: 0 3px 3px 0;";
    /**堆栈样式 */
    const stackStyle = "color: ${0}; background: ${1}; padding: 3px; border-radius: 3px 3px 3px 3px; margin: 3px";
  
    /**
     * 是否支持控制台方法
     * @author zhongjyuan
     * @date   2023年5月12日11:46:18
     * @email  [e-mail]
     * @param {*} method 方法
     * @returns
     */
    function isConsoleMethodSupported(method) {
        return window.console && typeof console[method] === "function";
    }
  
    /**
     * 格式化字符串
     * @returns {string} 格式化后的字符串
     * @example
     * const message = format("Hello, ${0}! Today is ${1}.", "Alice", "Monday");
     * console.log(message); // "Hello, Alice! Today is Monday."
     */
    function format() {
        var num = arguments.length;
        if (num < 1) return "";
  
        var content = arguments[0];
        for (var i = 1; i < num; i++) {
            var pattern = "\\$\\{" + (i - 1) + "\\}";
            var re = new RegExp(pattern, "g");
            content = content.replace(re, arguments[i]);
        }
        return content;
    }
  
    /**
     * 格式化正文
     * @returns {string} 格式化后的正文
     */
    function contentFormat() {
        const args = Array.from(arguments);
        const logLevel = args.pop();
        if (logLevel > zhongjyuan.config.logger.levels.TRACE) return "";
  
        var content = format(...args);
        var timestamp = new Date().format("ap hh:mm:ss:S");
        var stack = zhongjyuan.config.logger.stack.includes(logLevel) ? new Error().stack.split("\n").slice(3).join("\n") : "";
  
        return `%c ${zhongjyuan.config.logger.prefix} - ${zhongjyuan.config.logger.statement} %c ${timestamp} %c ${content} \n%c${stack}`;
    }
  
    /**
     * trace日志
     * @author zhongjyuan
     * @date   2023年6月1日16:13:40
     * @email  [e-mail]
     */
    function trace() {
        if (isConsoleMethodSupported("trace")) {
            console.trace(
                contentFormat(...arguments, zhongjyuan.config.logger.levels.TRACE),
                format(prefixStyle, "#fadfa3", "#030307"),
                format(timestampStyle, "#333333", "#86A8E7"),
                format(contentStyle, "#ffffff", "#B4C6E7"),
                format(stackStyle, "#000000", "#86A8E7")
            );
        }
    }
  
    /**
     * debug日志
     * @author zhongjyuan
     * @date   2023年6月1日16:13:21
     * @email  [e-mail]
     */
    function debug() {
        if (isConsoleMethodSupported("debug")) {
            console.debug(
                contentFormat(...arguments, zhongjyuan.config.logger.levels.DEBUG),
                format(prefixStyle, "#fadfa3", "#030307"),
                format(timestampStyle, "#333333", "#00BCD4"),
                format(contentStyle, "#ffffff", "#B2EBF2"),
                format(stackStyle, "#000000", "#00BCD4")
            );
        }
    }
  
    /**
     * info日志
     * @author zhongjyuan
     * @date   2023年5月12日11:46:33
     * @email  [e-mail]
     */
    function info() {
        if (isConsoleMethodSupported("info")) {
            console.info(
                contentFormat(...arguments, zhongjyuan.config.logger.levels.LOG),
                format(prefixStyle, "#fadfa3", "#030307"),
                format(timestampStyle, "#333333", "#4CAF50"),
                format(contentStyle, "#ffffff", "#C5E1A5"),
                format(stackStyle, "#000000", "#4CAF50")
            );
        }
    }
  
    /**
     * warn日志
     * @author zhongjyuan
     * @date   2023年5月12日11:46:54
     * @email  [e-mail]
     */
    function warn() {
        if (isConsoleMethodSupported("warn")) {
            console.warn(
                contentFormat(...arguments, zhongjyuan.config.logger.levels.WARN),
                format(prefixStyle, "#fadfa3", "#030307"),
                format(timestampStyle, "#333333", "#FFD700"),
                format(contentStyle, "#ffffff", "#F0E68C"),
                format(stackStyle, "#000000", "#FFD700")
            );
        }
    }
  
    /**
     * error日志
     * @author zhongjyuan
     * @date   2023年5月12日11:47:13
     * @email  [e-mail]
     */
    function error() {
        if (isConsoleMethodSupported("error")) {
            console.error(
                contentFormat(...arguments, zhongjyuan.config.logger.levels.ERROR),
                format(prefixStyle, "#fadfa3", "#030307"),
                format(timestampStyle, "#333333", "#FF6347"),
                format(contentStyle, "#ffffff", "#FFDAB9"),
                format(stackStyle, "#000000", "#FF6347")
            );
        }
    }
  
    return {
        log: info,
        trace: trace,
        debug: debug,
        info: info,
        warn: warn,
        error: error,
    };
  })();
  

  实现效果

  

本文由mdnice多平台发布