[FC] 日志打印工具类脚本优化：颜色演示、显示开关、格式调整

mk_framework/assets/script/mk/utils/LogUtil.ts

@@ -5,56 +5,88 @@
 export default class LogUtil {
 
     /**
+     * 是否显示Log
+     * @description
+     */
+    public ifShowLog: boolean = true;
+
+    /**
+     * 标签符号
+     * @description 标签与打印内容之间的拼接符号
+     */
+    private _tagChar: string = "...";
+
+    /**
      * 标签符号
      * @description 标签与打印内容之间的拼接符号
      */
-    private static _tagChar: string = ": ";
+    private _frontChar: string = "    ";
 
     /**
      * 对象key&value间隔符号
      * @description 打印对象时,key与value之间的拼接符号
      */
-    private static _keyValueChar: string = " = ";
+    private _keyValueChar: string = " = ";
 
     /**
      * 打印普通日志
      * @description
-     * @param          tag           日志标签(用于标识日志)
-     * @param          data          日志内容
+     * @param  tag  日志标签(用于标识日志)
+     * @param  data 日志内容
      */
-    public static log(tag: string, ...data: any[]) {
-        console.log(tag, this._tagChar, ...data);
+    public log(tag: string, ...data: any[]) {
+        if (!this.ifShowLog) {
+            return;
+        }
+        let totalTag = tag + this._tagChar;
+        let message = this.getMessage(data);
+        console.log("%c " + totalTag, "color: " + LogTagColor.bule, message);
     }
 
     /**
      * 打印警告日志
      * @description
-     * @param          tag            日志标签(用于标识日志)
-     * @param          data           日志内容
+     * @param  tag   日志标签(用于标识日志)
+     * @param  data  日志内容
      */
-    public static warn(tag: string, ...data: any[]) {
-        console.warn(tag, this._tagChar, ...data);
+    public warn(tag: string, ...data: any[]) {
+        if (!this.ifShowLog) {
+            return;
+        }
+        let totalTag = tag + this._tagChar;
+        let message = this.getMessage(data);
+        console.warn("%c " + totalTag, "color: " + LogTagColor.orange, message);
     }
 
     /**
      * 打印错误日志
      * @description
-     * @param          tag           日志标签(用于标识日志)
-     * @param          data          日志内容
+     * @param  tag   日志标签(用于标识日志)
+     * @param  data  日志内容
      */
-    public static error(tag: string, ...data: any[]) {
-        console.error(tag, this._tagChar, ...data);
+    public error(tag: string, ...data: any[]) {
+        if (!this.ifShowLog) {
+            return;
+        }
+        let totalTag = tag + this._tagChar;
+        let message = this.getMessage(data);
+        console.warn("%c " + totalTag, "color: " + LogTagColor.red, message);
     }
 
     /**
      * 打印单个对象日志
-     * @description                   逐个分层打印所有对象的key,value值
-     * @param           tag           日志标签(用于标识日志)
-     * @param           obj           日志对象
-     * @param           frontStrNum   前缀字符数量(不用填)
+     * @description        逐个分层打印所有对象的key,value值
+     * @param tag          日志标签(用于标识日志)
+     * @param obj          日志对象
+     * @param frontStrNum  前缀字符数量(不用填)
      * @returns 
      */
-    public static logSingle(tag: string, obj: any, frontStrNum: number = 0) {
+    public logSingle(tag: string, obj: any, frontStrNum: number = 0) {
+
+        if (!this.ifShowLog) {
+            return;
+        }
+
         if (obj == null || obj == undefined) {
             return
         }
@@ -62,13 +94,20 @@ export default class LogUtil {
         if (typeof obj === "number" || typeof obj === "string" || typeof obj === "boolean") {
             this.log(`${this.getFrontStr(frontStrNum)}${tag}`, obj);
         } else {
-            for (const key of Object.keys(obj)) {
+            let objKeys = Object.keys(obj);
+            for (const key of objKeys) {
                 if (obj.hasOwnProperty(key)) {
+                    let index = objKeys.indexOf(key);
                     if (typeof obj[key] === "object") {
-                        this.log(`${this.getFrontStr(frontStrNum)}${tag}` + key + this._keyValueChar)
-                        this.logSingle(tag, obj[key], ++frontStrNum);
+                        this.log(`${this.getFrontStr(frontStrNum)}`, key, ": ")
+                        this.logSingle(tag, obj[key], frontStrNum + 1)
                     } else {
-                        this.log(`${this.getFrontStr(frontStrNum)}${tag}`, key, this._keyValueChar, obj[key]);
+                        if (!frontStrNum && index === 0) {
+                            this.log(`${this.getFrontStr(frontStrNum)}${tag}\n`, key, this._keyValueChar, obj[key]);
+                        }
+                        else {
+                            this.log(`${this.getFrontStr(frontStrNum)}`, key, this._keyValueChar, obj[key]);
+                        }
                     }
                 }
             }
@@ -76,19 +115,50 @@ export default class LogUtil {
     }
 
     /**
+     * 把日志内容拼接成字符串
+     * @param data 
+     * @returns 
+     */
+    public getMessage(...data: any[]) {
+        let message = "";
+        for (var i = 0; i < data.length; i++) {
+            let str = data[i];
+            let str_new = "";
+            //屏蔽逗号
+            for (var j = 0; j < str.length; j++) {
+                let char: string = str[j];
+                str_new += char;
+            }
+            message += str_new;
+        }
+        return message;
+    }
+
+    /**
      * 获取前缀字符串
-     * @description                   根据前缀字符串数目生成前缀字符串，用以标记层级
-     * @param           frontStrNum   字符串数量
-     * @returns                       返回前缀字符串(string)
+     * @description         根据前缀字符串数目生成前缀字符串，用以标记层级
+     * @param  frontStrNum  字符串数量
+     * @returns             返回前缀字符串(string)
      */
-    private static getFrontStr(frontStrNum: number): string {
+    public getFrontStr(frontStrNum: number): string {
         let str = "";
         if (frontStrNum > 0) {
             for (let i = 0; i < frontStrNum; i++) {
-                str += "--"
+                str += this._frontChar;
             }
             return str;
         }
         return str;
     }
 }
+
+/**日志字体颜色 */
+export enum LogTagColor {
+    red = "red;font-weight:bold",
+    white = "white;font-weight:bold",
+    yellow = "yellow;font-weight:bold",
+    green = "green;font-weight:bold",
+    bule = "blue;font-weight:bold",
+    orange = "orange;font-weight:bold",
+    black = "black;font-weight:bold"
+}