面试题：Angular自定义管道性能优化与内置管道复用

性能优化自定义管道借鉴内置管道实现方式

缓存机制
- 内置管道（如 DatePipe）通常会缓存计算结果。对于自定义管道，若输入值不变，应避免重复计算。可以在管道类中定义一个变量来存储上一次的输入值和计算结果。例如：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customPipe'
})
export class CustomPipe implements PipeTransform {
  private lastInput: any;
  private lastResult: any;

  transform(value: any): any {
    if (value === this.lastInput) {
      return this.lastResult;
    }
    this.lastInput = value;
    // 实际计算逻辑
    this.lastResult = this.doCalculation(value);
    return this.lastResult;
  }

  private doCalculation(value: any): any {
    // 具体计算逻辑
    return value;
  }
}

减少不必要计算
- 内置管道在输入值变化不大时，会尽量减少计算。自定义管道应只在必要时进行计算。比如，对于复杂对象，可通过对比对象的标识（如唯一ID）来判断是否需要重新计算，而不是对比整个对象。例如：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customObjectPipe'
})
export class CustomObjectPipe implements PipeTransform {
  private lastObjectId: string;
  private lastResult: any;

  transform(obj: { id: string }): any {
    if (this.lastObjectId === obj.id) {
      return this.lastResult;
    }
    this.lastObjectId = obj.id;
    // 实际计算逻辑
    this.lastResult = this.doObjectCalculation(obj);
    return this.lastResult;
  }

  private doObjectCalculation(obj: { id: string }): any {
    // 具体计算逻辑
    return obj;
  }
}

利用纯管道
- 内置管道很多是纯管道（pure: true，默认），即只有输入值变化时才会触发重新计算。自定义管道也应尽量设为纯管道，除非业务逻辑需要非纯管道（如监听全局状态变化）。例如：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customPurePipe',
  pure: true
})
export class CustomPurePipe implements PipeTransform {
  transform(value: any): any {
    // 计算逻辑
    return value;
  }
}

复用内置管道逻辑时可能遇到的问题及解决方案

依赖注入问题
- 问题：内置管道可能依赖于一些Angular内部服务，直接复用其逻辑可能导致依赖注入失败。例如，DatePipe依赖于 LocaleData 服务。
- 解决方案：手动注入所需的依赖。在自定义管道类的构造函数中注入相应的服务。例如，若复用 DatePipe 的逻辑，可注入 LocaleData 服务：

import { Pipe, PipeTransform, LOCALE_ID, Inject } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
  name: 'customDatePipe'
})
export class CustomDatePipe implements PipeTransform {
  constructor(@Inject(LOCALE_ID) private locale: string) {}

  transform(value: Date, format: string): string {
    const datePipe = new DatePipe(this.locale);
    return datePipe.transform(value, format);
  }
}

API 差异问题
- 问题：自定义管道的输入参数和内置管道可能不同，直接复用逻辑可能导致参数不匹配。比如，自定义管道可能需要额外的参数。
- 解决方案：对内置管道逻辑进行封装和适配。在自定义管道的 transform 方法中，根据自定义管道的输入参数，调整调用内置管道逻辑的方式。例如，若自定义管道需要一个额外的布尔参数来决定是否显示完整日期：

import { Pipe, PipeTransform, LOCALE_ID, Inject } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
  name: 'customDatePipe'
})
export class CustomDatePipe implements PipeTransform {
  constructor(@Inject(LOCALE_ID) private locale: string) {}

  transform(value: Date, showFull: boolean): string {
    const format = showFull? 'yyyy - MM - dd HH:mm:ss' : 'yyyy - MM - dd';
    const datePipe = new DatePipe(this.locale);
    return datePipe.transform(value, format);
  }
}

代码耦合问题
- 问题：复用内置管道逻辑可能使自定义管道与内置管道耦合度增加，不利于维护和升级。例如，内置管道逻辑发生变化，可能影响自定义管道。
- 解决方案：对复用的逻辑进行抽象和隔离。可以将复用的内置管道逻辑封装在一个单独的服务中，自定义管道通过调用该服务来实现功能。这样，当内置管道逻辑变化时，只需修改服务中的代码，而不影响自定义管道的其他部分。例如：

import { Injectable, LOCALE_ID, Inject } from '@angular/core';
import { DatePipe } from '@angular/common';

@Injectable()
export class DatePipeService {
  constructor(@Inject(LOCALE_ID) private locale: string) {}

  transformDate(value: Date, format: string): string {
    const datePipe = new DatePipe(this.locale);
    return datePipe.transform(value, format);
  }
}

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipeService } from './date - pipe.service';

@Pipe({
  name: 'customDatePipe'
})
export class CustomDatePipe implements PipeTransform {
  constructor(private datePipeService: DatePipeService) {}

  transform(value: Date, showFull: boolean): string {
    const format = showFull? 'yyyy - MM - dd HH:mm:ss' : 'yyyy - MM - dd';
    return this.datePipeService.transformDate(value, format);
  }
}

星途面试题库

面试题：Angular自定义管道性能优化与内置管道复用

知识考点

面试题答案

性能优化自定义管道借鉴内置管道实现方式

复用内置管道逻辑时可能遇到的问题及解决方案