时间戳

首页 > 解决方案 > 如何简单地将静态/常量值分组到一个“命名空间”中

javascript - 如何简单地将静态/常量值分组到一个“命名空间”中

问题描述

想象一下，您想将应用程序的所有端点 URL 放入一个文件中。总体目标是能够像这样使用这些 URL：

import { Endpoints } from "./Endpoints";

Endpoints.APP_BASE_URL
Endpoints.ORDER
Endpoints.BOOKS

只需一个命名导入即可访问所有端点 URL。URL 也相互依赖（这将在下面变得更清楚），这就是为什么 anenum是不够的。

选项 1：抽象类

export abstract class Endpoints {
  public static APP_BASE_URL = "http://localhost:7777/";
  public static BOOKS = `${Endpoints.APP_BASE_URL}books/`;
  public static ORDERS = `${Endpoints.APP_BASE_URL}orders/`;
}

缺点：滥用class.

选项 2：组导出

const APP_BASE_URL = "http://localhost:7777/";
const BOOKS = `${APP_BASE_URL}books/`;
const ORDERS = `${APP_BASE_URL}orders/`;

export const Endpoints = { APP_BASE_URL, BOOKS, ORDERS };

缺点： 容易出错和重复，因为您总是必须编写两次端点。

选项 3：索引文件

export const APP_BASE_URL = "http://localhost:7777/";
export const BOOKS = `${APP_BASE_URL}books/`;
export const ORDERS = `${APP_BASE_URL}orders/`;

// index.ts/js
import * as Endpoints from "./Endpoints";

export { Endpoints };

缺点：一个简单问题的额外文件。

问题

除了上面提到的 3 个选项之外，还有另一种对静态/常量值进行分组的方法，理想情况下没有缺点吗？
如果没有其他选项，哪个选项是最javascripty/typescripty的选项？

（请不要关注端点示例，它也可以是数字、对象或其他任何东西）

标签： javascripttypescript

解决方案

我推荐以下文档页面： - https://www.typescriptlang.org/docs/handbook/namespaces-and-modules.html

从第一页您可以添加另一个选项：使用命名空间关键字。但是，由于您使用的是本机模块，因此这样做几乎没有意义，正如文档还提到的那样 - 请参阅“不必要的命名空间”部分。它还为您的问题提供了正确的解决方案，您也触及了该问题，但由于某种原因添加了额外的文件：

import * as Endpoints from "./Endpoints";

文档的相关摘录：

TypeScript 中模块的一个关键特性是两个不同的模块永远不会将名称贡献给同一范围。因为模块的使用者决定为其分配什么名称，所以无需主动将导出的符号包装在命名空间中。

重申为什么不应该尝试为模块内容命名，命名空间的一般思想是提供构造的逻辑分组并防止名称冲突。因为模块文件本身已经是一个逻辑分组，并且它的顶级名称由导入它的代码定义，所以没有必要为导出的对象使用额外的模块层。

推荐阅读