接上篇：小白也能写框架之【一、新建框架工程】
一、在assets目录下新建一个Core的目录，然后继续新建Scripts/Managers/LogMgr.ts
二、代码内容：
/**
* 日志管理类，用于统一日志输出格式
*/
export class LogMgr {
/**
* 用于输出调试信息
*/
static get debug() {
return window.console.log.bind(window.console, '%c【调试】', 'color: white; background-color: #007BFF; font-weight: bold; font-size: 14px;');
}
/**
* 用于输出一般信息
*/
static get info() {
return window.console.log.bind(window.console, '%c【信息】', 'color: white; background-color: #28A745; font-weight: bold; font-size: 14px;');
}
/**
* 用于输出警告信息
*/
static get warn() {
return window.console.log.bind(window.console, '%c【警告】', 'color: black; background-color: #FFC107; font-weight: bold; font-size: 14px;');
}
/**
* 用于输出错误信息
*/
static get err() {
return window.console.log.bind(window.console, '%c【错误】', 'color: white; background-color: #DC3545; font-weight: bold; font-size: 14px;');
}
}
三、代码解释
这段代码实现了一个简单的日志管理系统，使用 TypeScript 编写。以下是对其主要功能和结构的简要介绍：
- LogType 枚举 ：定义了四种日志类型，分别是 Debug、Info、Warn 和 Err。每种类型都有一个对应的数值。
- LogMgr 类 ：这是日志管理器类，负责管理和输出不同类型的日志。它具有以下特点：
-
单例模式 ：通过私有构造函数和静态实例
instance实现，确保整个应用程序中只有一个LogMgr实例。 -
日志开关 ：通过
isEnabled属性控制日志输出的启用或禁用。 -
日志配置 ：
logConfig属性定义了每种日志类型对应的颜色和前缀文本，用于在控制台中输出时的样式和标识。 -
日志输出方法 ：提供了
debug、info、warn和err方法，用于输出不同类型的日志信息。这些方法内部调用了logMessage方法，该方法根据日志类型应用相应的样式和前缀。
-
logMgr 导出 ：通过导出
logMgr实例，其他模块可以直接使用这个单例来记录日志。
这个日志管理器的设计使得日志输出更加结构化和美观，便于在开发和调试过程中快速识别和分类日志信息。
四、全局映射
1、新建assets\Core\Scripts\Core.ts，内容为：
// 管理器
import { logMgr } from "./Managers/LogMgr";
/**
* Core 类
* 负责映射导出框架接口
*/
class Core {
/** 日志管理器 */
public log = logMgr;
}
/** 全局 Window 接口 */
declare global {
interface Window {
app: Core;
}
var app: Core;
}
/** 创建 Core 类的实例并赋值给全局 window 对象 */
window.app = new Core();
五、使用测试
1、在App目录下新建一个Main.ts然后拖入绑定到场景中的画布节点下，如图：
2、测试代码内容为：
import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('Main')
export class Main extends Component {
private testNum: number = 1314;
private testStr: string = 'cocos';
start() {
app.log.debug('我是日志1');
app.log.info('我是日志2');
app.log.warn('我是日志3');
app.log.err('我是日志4');
app.log.debug('打印数字变量:', this.testNum);
app.log.warn('打印文本变量:', this.testStr);
}
update(deltaTime: number) {
}
}
六、测试效果：
下期预告：小白也能写框架之【三、分包管理器】
请回帖
