在前端和后端使用常量整数

Question

假设我的后端API中定义了以下常量：

User::USER_ROLE_NORMAL; // Equal to 0
User::USER_ROLE_ADMIN; // Equal to 1

在我的后端，我现在可以进行以下比较：

if($user->role == User::USER_ROLE_NORMAL)

当我必须在前端应用逻辑时，最佳做法是什么？ （这些常数未知的地方）

在前端硬编码数字感觉不对，如下所示：

if(ajaxData.role == 0)

对于上下文：我需要在前端应用逻辑来改变布局

Answer 1

由于前端和后端逻辑不一定（并且不应该）耦合，我认为最好的方法是在前端代码中定义相同的常量。 请记住，前端代码应始终与API规范一致。

你做的方式 取决于你 （可以找到许多好的替代品）。

如果您使用某种框架，（简单）方法可能包含一些全局变量或使用某种服务。

就像是：

const role {
  USER_ROLE_NORMAL: 0,
  USER_ROLE_ADMIN: 1,
};

然后你可以使用它们如下：

if(ajaxData.role == role.USER_ROLE_NORMAL) {}

另一个选项（不是很常用）是您可以在后端API中创建一个服务，该服务为前端提供这些值以使用它。 因此，在前端代码可以使用与角色相关的任何值之前（例如），必须向后端发出请求以获取这些常量值并将其保存在前端中，以便在将来的操作中使用它。

Answer 2

您还可以使用后端生成包含所有常量的JS文件的内容。 通过这种方式，您可以在一个地方管理这些数据，这可能是有益的。

Answer 3

第一个解决方案是创建另一个文件，为前端javascript使用，定义常量。 但这有一个很大的缺点：你必须确保两个文件（前端常量和后端常量）是相同的。 如果你改变一个，你将不得不记得改变另一个。

但首先请注意，如果您只是首先对常量进行硬编码（这很糟糕，绝对不是一个选项），也会存在这种缺点。

解决方案是拥有一个自动化过程（所谓的开发构建步骤 ），它根据后端常量文件自动生成前端常量文件。

在javascript开发中，有一个构建步骤是很常见的：Webpack，Grunt，Gulp等......如果你已经有其中一个，那么在构建步骤中添加一个自动生成前端常量文件的脚本。

如果您的开发过程中没有构建步骤，那么现在是开始的好时机。