在loglevel中实现带前缀和动态时间戳的日志输出方案

背景介绍

loglevel是一个轻量级的JavaScript日志库，被广泛应用于前端和Electron等环境中。在实际开发中，开发者经常需要为日志添加自定义前缀和时间戳，同时保持控制台中的行号定位功能正常工作。

原始方案分析

开发者最初尝试通过直接绑定(bind)的方式实现日志前缀功能：

1. 导入原始loglevel对象
2. 为每个日志级别(warn/error/info等)创建绑定版本
3. 在绑定过程中添加固定前缀和时间戳
4. 通过导出变量供其他模块使用

这种方案虽然能保持控制台中的行号定位功能，但存在几个潜在问题：

• 时间戳在初始化时固定，不会随日志调用时间更新
• 直接操作底层loglevel对象可能导致与其他插件冲突
• 需要手动维护所有日志级别的绑定关系

改进方案

使用methodFactory的推荐方式

loglevel提供了methodFactory机制，这是官方推荐的扩展方式。通过重写methodFactory，可以实现更优雅的日志定制：

const originalFactory = log.methodFactory;
log.methodFactory = function (methodName, logLevel, loggerName) {
    const rawMethod = originalFactory(methodName, logLevel, loggerName);
    const levelText = Object.entries(log.levels).find(x => x[1] === logLevel)[0];
    return rawMethod.bind(console, `${prefix}[${levelText}]${timeStamp}:`);
};
log.rebuild();

这种方法相比原始方案有以下优势：

1. 保持行号定位功能
2. 更符合loglevel的设计理念
3. 减少与其它插件的冲突可能性

动态时间戳实现

针对时间戳固定的问题，可以利用浏览器控制台的格式化特性实现动态时间戳：

const timestamper = {
    toString() {
        return `[${new Date().toISOString()}]`;
    }
};
// 在methodFactory中使用
return rawMethod.bind(console, `${prefix}[${levelText}]%s:`, timestamper);

注意：这种方案依赖于浏览器控制台对%s格式化的具体实现，在Chromium和Firefox中表现良好，但在Safari中可能无法正常工作。

最佳实践建议

1. 环境考虑：如果确定只在Electron环境中运行，可以采用更简洁的动态时间戳方案
2. 兼容性处理：如果需要跨浏览器支持，建议使用固定时间戳或更兼容的日期格式化方式
3. 版本规划：注意loglevel v2将改进插件API，现有实现可能需要相应调整
4. 性能考量：频繁的日志调用应考虑时间戳生成的性能影响

总结

通过合理利用loglevel的methodFactory机制和JavaScript的绑定功能，开发者可以在保持控制台行号定位的同时，实现灵活的自定义日志格式。对于Electron等特定环境，还可以进一步优化时间戳等附加信息的显示方式。随着loglevel v2的到来，这类定制化操作将变得更加规范和便捷。

对于需要高度定制日志输出的项目，建议基于methodFactory构建自己的日志模块，既保持核心功能又便于维护和升级。