如何实现基于变量控制的多日志分级输出功能？

很棒的问题！你已经搭建了一套带多类型、彩色输出的日志UI系统，现在想要摆脱繁琐的if判断，通过detailedDebug变量优雅切换简洁/详细调试模式对吧？我给你几个更优雅的实现方案，既能满足需求，还能让代码更易维护和扩展：

方案1：封装独立的日志模式函数 #

把简洁模式和详细模式的日志逻辑拆成独立函数，再通过detailedDebug变量动态选择使用哪个函数作为统一入口。这样能彻底消除分散的if判断，代码逻辑更清晰。

// 假设你已有的颜色处理函数
const colorize = (text, color) => {
  // 你的彩色输出实现，比如基于console的ANSI颜色码
  const colorCodes = {
    red: '\x1b[31m',
    yellow: '\x1b[33m',
    blue: '\x1b[34m',
    gray: '\x1b[90m',
    reset: '\x1b[0m'
  };
  return `${colorCodes[color]}${text}${colorCodes.reset}`;
};

// 简洁模式日志：仅输出核心信息
const simpleLog = (type, message) => {
  const color = type === 'error' ? 'red' : type === 'warn' ? 'yellow' : 'blue';
  console.log(colorize(message, color));
};

// 详细模式日志：输出核心信息+变量转储
const detailedLog = (type, message, variables) => {
  simpleLog(type, message); // 复用简洁模式的输出逻辑
  if (variables) {
    console.log(colorize('=== 相关变量转储 ===', 'gray'));
    console.dir(variables, { depth: null });
  }
};

// 根据配置选择日志模式
let logger = simpleLog;
if (detailedDebug) {
  logger = (...args) => detailedLog(...args);
}

// 使用示例
logger('error', '抛出错误于用户提交接口');
logger('error', '抛出错误于用户提交接口', { userId: 123, payload: { name: 'test' }, error: new Error('参数验证失败') });

方案2：使用装饰器模式增强日志功能 #

通过装饰器给基础日志功能动态附加详细调试的逻辑，这种方式能保持基础日志逻辑的纯净，同时灵活扩展功能。

// 基础日志函数（仅负责核心彩色输出）
const baseLogger = (type, message) => {
  const color = type === 'error' ? 'red' : type === 'warn' ? 'yellow' : 'blue';
  console.log(colorize(message, color));
};

// 详细调试装饰器：给基础日志加上变量转储功能
const withDetailedDebug = (baseFunc) => {
  return (type, message, variables) => {
    baseFunc(type, message);
    // 仅当detailedDebug为true且有变量时才转储
    if (detailedDebug && variables) {
      console.log(colorize('=== 相关变量转储 ===', 'gray'));
      console.dir(variables, { depth: null });
    }
  };
};

// 生成最终的日志函数
const logger = withDetailedDebug(baseLogger);

// 使用示例
logger('warn', '用户权限即将过期');
logger('warn', '用户权限即将过期', { userId: 123, expireDate: '2024-12-31' });

方案3：配置驱动的日志策略 #

把不同模式的日志行为定义成配置对象，通过detailedDebug选择对应的策略。这种方式扩展性极强，以后新增其他日志模式（比如超级详细模式、生产模式）只需要添加新的配置项即可。

// 定义所有日志策略
const logStrategies = {
  simple: {
    log: (type, message) => {
      const color = type === 'error' ? 'red' : type === 'warn' ? 'yellow' : 'blue';
      console.log(colorize(message, color));
    }
  },
  detailed: {
    log: (type, message, variables) => {
      // 复用简洁模式的输出逻辑
      logStrategies.simple.log(type, message);
      if (variables) {
        console.log(colorize('=== 相关变量转储 ===', 'gray'));
        console.dir(variables, { depth: null });
      }
    }
  }
};

// 根据配置选择当前策略
const currentStrategy = detailedDebug ? logStrategies.detailed : logStrategies.simple;

// 使用示例
currentStrategy.log('info', '用户登录成功');
currentStrategy.log('info', '用户登录成功', { userId: 123, loginTime: new Date() });

这三个方案都能帮你摆脱零散的if判断，让代码结构更清晰、更易维护。其中方案3的扩展性最好，适合未来可能的功能迭代；方案1和2更轻量，适合当前需求的快速落地。

内容的提问来源于stack exchange，提问作者A. Pecora