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等。如果您已经拥有其中一个，请在构建步骤中添加一个脚本，该脚本会自动生成前端常量文件。

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