改善在Angular 应用中的日志使用方式

Angular是一个非常受欢迎的开发框架，前端开发者们喜欢在应用中使用console去调试它们的代码，但是由于持续交付/部署的需要，这些调试代码会被删除，不会进入生产发布环境中。

让 Angular 帮我们实现这个功能

Angular 为我们提供了将 Services 注册到应用中的功能，使得我们可以在组件中重用一些功能。

因此，我们可以利用Service来管理我们的控制台输出，从而改进日志功能。

1 : 使用Service来管理console

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class LogService {

  constructor() {

  }
  trace(...data: any[]): void {
    console.trace(data);
  }
  log(...data: any[]): void {
    console.log(data);
  }
}

在AppComponent组件中使用它:：

logService.log('console executed from AppComponent');

上面的代码很容易理解，但是有一个问题，我们无法得知日志是在应用的哪一个组件中打印的，除非我们在日志消息中表明，例如图中的日志信息表明它来自于AppComponent组件，我们希望日志的右侧能自动表明它来自哪个组件，而不是定义整个日志系统的文件位log.service.ts:xx，并且不需要我们在日志消息中手动表明。

1.1: 使用logService.trace()

它可以用于跟踪日志的来源😈，看起来很不错，但实际上它会添加一些不必要的日志记录。

2: logService增强版

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class LogService {

  constructor() {

  }
  trace(source: string, ...data: any[]): void {
    console.trace(data);
  }
  log(source: string, ...data: any[]): void {
    console.log(data);
  }
}

与前面相比，增强版的logService类的方法接收额外的参数。

logService.log('AppComponent','console executed from AppComponent');

很好🥳，这样看起来比之前的好多了，日志的来源更加清晰，但还是没有实现我们最终想要的效果，因为这些方法仍然需要传入一些额外的信息😟，并且右侧还是显示它来自log.service.ts:xx。

3 : 将 Javascript 的“函数作为一等公民”理论付诸实践 👨🏼‍💻

import { Injectable } from '@angular/core';

interface IConsole {
  log: any;
}

@Injectable({
  providedIn: 'root'
})
export class LogService {
  console: IConsole;

  constructor() {

    this.console = LogService.isActiveLogging() ?
        LogService.ActiveLogging() :
        LogService.NoLogging();
  }

  private static isActiveLogging(): boolean {
    ...
  }
  private static ActiveLogging(): IConsole {
    return {
      log: console.log
    };
  }
  private static NoLogging(): IConsole {
    const NO_OPERATION = () => {};
    return {
      log: NO_OPERATION
    };
  }
}

我们使得日志服务变得可配置的，可以启用也可以禁用，并且可以选择使用哪些日志打印API，这在IConsole接口声明和ActiveLogging方法中配置。这里默认使用console.log来打印日志，同时可以在NoLogging方法中配置日志禁用策略。

logService.console.log('console executed from AppComponent');

从图中看到，控制台中显示的日志来源是app.component.ts:xx，并且我们没有传递任何额外的参数来指定来源，最关键的是我们像平时一样使用console.log方法。

log4j 或 ngx-logger库提供开箱即用的日志功能。

总结

以上的改进最终实现了我们想要的效果，我们可以在不增加开发人员开销的情况下解决日志问题，并且不改变我们使用console.log的方式，同时还确保日志记录不会带入生产环境中。

改善Angular 应用中的日志使用方式