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,
	};
})();

实现效果