背景

教室内组件业务开发模式相似度较高，导致代码的重复度也较高，具体体现在

  • 退订逻辑

退订逻辑包含在了TakeUntilDestory 中，无需手动管理

  1. // before
  2. private subscription: Subscription;
  3. this.subscription = this.roomService.protos$.subscribe(proto => this.onProtoMessage(proto));
  4. this.subscription.add(xxx
  5. );
  6. this.subscription.add(xxx)
  8. ngOnDestroy() {
  9.   this.subscription.unsubscribe();
  10. }
  12. // after
  13. @TakeUntilDestroy
  14. export class TeamScoreRankComponent extends BaseClassRoomComponent implements OnDestroy {}
  • 取值逻辑

使用 GetObservable 和 GetObservableValue 取 Observable 和取值

  1. // before
  2. this.teamScoreRankState$ = this.store.select(getTeamScoreRankState).pipe(
  3.       tap(state => {
  4.         this.hidden = !state.showRank;
  5.       }),
  6.     );
  8. // after
  9. @GetObservable(getTeamScoreRankState)
  10. teamScoreRankState$;
  12. // before
  13. private teamId = 0;
  14.  this.subscription.add(this.store.select(getTeam).subscribe(team => (this.teamId = team?.id ?? 0)
  16. // after
  17. @GetObservableValue(getTeam, team => team.id)
  18. readonly teamId = 0;
  • 错误处理

使用 RunSafe 处理错误

  1. // before
  2.   private onRoomInfo(proto) {
  3.     if (!proto) {
  4.       return;
  5.     }
  6.     try{
  7.       this.onTeamScoreState(proto.teamScoreState);
  8.       this.tryGetTeamScoreRankWithApi();
  9.     }catch(e){
  10.       log.error('===')
  11.     }
  12.   }
  13. // after
  14.   @RunSafe()
  15.   private onRoomInfo(proto) {
  16.     this.onTeamScoreState(proto.teamScoreState);
  17.     this.tryGetTeamScoreRankWithApi();
  18.   }

实现细节

  • GetObservable ```typescript import { takeUntil } from ‘rxjs/operators’;

export function GetObservable(selector: any): Function { return (target: Record, propName: string) => { let ob = null; Object.defineProperty(target, propName, { get(): T | unknown { if (_ob) { return _ob; } _ob = this.store.select(selector).pipe(takeUntil(this.takeUntilDestroy$)); this.takeUntilDestroy$.subscribe( => (_ob = null)); return _ob; }, set(ob) { _ob = ob.pipe(takeUntil(this.takeUntilDestroy$)); }, }); }; }

  2. - GetObservableValue
  3. ```typescript
  4. import { filter, map, takeUntil, tap } from 'rxjs/operators';
  6. export function GetObservableValue<T>(selector: any, mapFn: any = val => val, debug = false): Function {
  7.   return (target: Record<any, any>, propName: string) => {
  8.     let _val: T = target[propName];
  9.     let ob = null;
  10.     Object.defineProperty(target, propName, {
  11.       get(): T | unknown {
  12.         if (ob) {
  13.           return _val;
  14.         }
  15.         ob = this.store
  16.           .select(selector)
  17.           .pipe(
  18.             filter(val => val !== null && val !== undefined),
  19.             map(mapFn),
  20.             tap(val => {
  21.               // eslint-disable-next-line no-console
  22.               debug && console.log(`=== GetObservableValue ${selector.name} ===`, val);
  23.             }),
  24.             takeUntil(this.takeUntilDestroy$),
  25.           )
  26.           .subscribe(val => (_val = val));
  27.         this.takeUntilDestroy$.subscribe(_ => (ob = null));
  28.         return _val;
  29.       },
  30.       set(value) {
  31.         _val = value;
  32.       },
  33.     });
  34.   };
  35. }
  • TakeUntilDestroy ``typescript export function TakeUntilDestroy(constructor: Function): void { const originalDestroy = constructor.prototype.ngOnDestroy; if (typeof originalDestroy !== 'function') { // eslint-disable-next-line no-console console.warn(${constructor.name} is using @TakeUntilDestroy but does not implement OnDestroy`); } constructor.prototype.ngOnDestroy = function destroy(…args): void { if (typeof originalDestroy === ‘function’) {
    1. originalDestroy.apply(this, args);
    } if (this.takeUntilDestroy$) {
    1. this.takeUntilDestroy$.next();
    2. this.takeUntilDestroy$.complete();
    } else {
    1. // eslint-disable-next-line no-console
    2. console.error(
    3.   `[Decorator TakeUntilDestroy] this.takeUntilDestroy$ does not exist which may cause memory leak, make sure your component extends InRoomBaseComponent or OutRoomBaseComponent`,
    4. );
    } }; }
  2. - RunSafe
  3. ```typescript
  4. interface IParams {
  5.   returnValue: any;
  6. }
  7. type SafeDecorator<T, K extends keyof T> = T[K] | K;
  8. export function RunSafe(params: IParams = { returnValue: undefined }): Function {
  9.   return function safe(
  10.     target: Record<string, any>,
  11.     propertyKey: string,
  12.     descriptor: TypedPropertyDescriptor<Function>,
  13.   ): TypedPropertyDescriptor<Function> {
  14.     const originalMethod = descriptor.value;
  15.     descriptor.value = function SafeWrapper() {
  16.       try {
  17.         return originalMethod.apply(this, arguments);
  18.       } catch (error) {
  19.         // eslint-disable-next-line no-console
  20.         console.error(`[Safe Decorator]: execute ${propertyKey} function error:`, error);
  21.         return params.returnValue !== undefined ? params.returnValue : false;
  22.       }
  23.     };
  24.     return descriptor;
  25.   };
  26. }