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  zhongjyuan@outlook.com
 */
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  zhongjyuan@outlook.com
  * @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  zhongjyuan@outlook.com
  */
 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  zhongjyuan@outlook.com
  */
 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  zhongjyuan@outlook.com
  */
 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  zhongjyuan@outlook.com
  */
 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  zhongjyuan@outlook.com
  */
 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 多平台发布