在 Angular 中放置独立函数的位置答案

【问题标题】：Where to place standalone functions in Angular在 Angular 中放置独立函数的位置
【发布时间】：2019-11-27 18:53:12
【问题描述】：

我有这些功能，它们被 3 个组件消耗。

放在哪里比较合适？

我想像在 Ruby on Rails 中一样。他们有 lib，但我不确定这些方法在 lib 文件夹中是否正常。

目前在src/helpers/upload-file-helpers.ts

export function fileSizeConverter(size: number, fromUnit: string, toUnit: string ): number | string {
  const units: string[] = ['B', 'KB', 'MB', 'GB', 'TB'];
  const from = units.indexOf(fromUnit.toUpperCase());
  const to = units.indexOf(toUnit.toUpperCase());
  const BASE_SIZE = 1024;
  let result: number | string = 0;

  if (from < 0 || to < 0 ) { return result = 'Error: Incorrect units'; }

  result = from < to ? size / (BASE_SIZE ** to) : size * (BASE_SIZE ** from);

  return result.toFixed(2);
}

export function isFileMoreThanLimit(fileSize: number, fromUnit: string, toUnit: string , limit: number) {
  return fileSizeConverter(fileSize, fromUnit, toUnit) > limit;
}

export function fileExtensionChecker(file: string): boolean {
  const fileExtensions = {
    'png' : true,
    'jpg' : true,
    'jpeg': true,
    'stl' : true,
    'obj' : true,
    'zip' : true,
    'dcm' : true,
    '3oxz': true
  };
  // this is weird, instead of showing undefined if file argument is not present in the hash it will throw error.
  return fileExtensions[file] ? true : false;
}

export function fileTypeParser(fileType: string): string {
  return fileType.split('/')[1];
}

另外，我故意不想把这些放在一个班级里。这只是单独调用。

【问题讨论】：

为什么不使用类似的 utils 函数创建 'utils' 文件夹？
哦。从来没想过。但是 helpers 有什么区别呢？
只是命名不同。其他想法 - 您还可以将功能共享到服务中。
哦。我想我对帮手很好。我也在考虑这些服务，所以我可以将它们注入消费者，但我不必这样做，因为有些消费者只会使用 1 个功能。谢谢。
我通常将这样的共享函数放入共享services。 helper 或 utility 不一定是“错误的”，但我更喜欢它们作为服务。这是个人喜好问题，什么对项目最有意义。

标签： angular conventions

【解决方案1】：

在 TypeScript 中编写实用函数主要有两种方法：

A) 普通函数（分组在一个文件中）

util.ts

export function sum(a: number, b: number): number {
    return a + b;
}

或

export const sum = (a: number, b: number): number=> {
    return a + b;
};

用法

import { sum } from './util';
...
let value = sum(4, 11);

B) 类的静态方法

export class Math {
    static sum(a: number, b: number): number {
        return a + b;
    }
}

参考

Utilities in TypeScript

Utility class

【讨论】：