在前端开发的日常中，console.log 几乎是每位开发者的必备工具。然而，随着项目复杂度的增加，简单的 console.log 有时显得力不从心。今天，我要分享一个我闲暇时突发奇想的项目——封装 console.log，让它变得更加智能、更具可读性和交互性。

背景故事

在项目开发中，我常常需要在循环中打印日志来检查数据状态，但这通常会导致控制台被大量重复的日志信息淹没。更糟糕的是，当我只想查看特定条件下的日志时，我不得不手动添加条件判断，这不仅增加了代码的复杂度，也降低了开发效率。

封装的初衷

封装 console.log 的想法源于一次无聊的下午，我决定挑战自己，看看能否通过封装来简化日志的输出和管理。我的目标是：

1. 条件过滤：只在满足特定条件时输出日志。
2. 样式区分：通过样式让日志更易于识别。
3. 减少代码侵入：将日志逻辑从业务代码中抽离出来。

实现细节

首先，我设计了一个 Logger 类，它允许用户在实例化时或调用时配置日志的前缀和样式。以下是实现的核心部分：

class Logger {
    constructor(prefix = '', style = {}) {
        this.prefix = prefix;
        this.style = style;
    }

    log(message, condition = true) {
        if (condition) {
            console.log(`%c${this.prefix} ${message}`, this.styleToString(this.style));
        }
    }

    styleToString(style) {
        return Object.keys(style).map(key => `${key}:${style[key]}`).join(';');
    }

    // 其他方法如 error, warn 等可以类似实现
}

使用示例

const logger = new Logger('DEBUG:', { color: 'blue', 'font-weight': 'bold' });
logger.log('This is a debug message', someCondition);

效果展示

通过这种封装，我可以轻松地在控制台中看到带有特定样式的日志前缀，这不仅让日志更易于识别，也让调试过程变得更加有趣和高效。

进一步的思考

封装 console.log 不仅可以用于调试，还可以作为一种日志管理的策略。在大型项目中，日志管理变得尤为重要。通过封装，我们可以：

• 统一日志格式：确保所有日志输出都遵循相同的格式和样式。
• 日志级别管理：根据日志的严重性（如 INFO, WARNING, ERROR）自动应用不同的样式。
• 性能监控：在日志输出时附加时间戳或性能数据。

结论

封装 console.log 看似简单，但它背后反映的是对开发效率和代码质量的追求。通过这种方式，我们不仅让调试变得更加直观，还能在一定程度上提高代码的可维护性。希望这篇文章能激发你对日常工具的重新思考，尝试用创新的方式解决旧问题。

后记

虽然封装 console.log 可能在一些场景下显得多此一举，但它确实展示了如何通过简单的封装来提升开发体验。下次当你面对繁杂的日志输出时，不妨试试这种方法，也许会带来意想不到的效果。