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

Say I have the following constants defined in my back-end API:

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

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

In my back-end I can now make the following comparisons:

在我的后端,我现在可以进行以下比较:

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

What is the best practice for when I have to apply logic in my front-end? (where these constants are unknown)

当我必须在前端应用逻辑时,最佳做法是什么? (这些常数未知的地方)

It doesn't feel right to hard code the numbers in the front-end, like so:

在前端对数字进行硬编码感觉不对,如下所示:

if(ajaxData.role == 0)

For context: I need to apply logic in the front-end based to change layouts

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

3 个解决方案

#1

As frontend and backend logics do not have to be necessarily (and should not be) coupled, the best approach here I think is to define those same constants in the frontend code. Bear in mind that the frontend code should always be in consonance with the API specifications.

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

The way you do it is up to you (many good alternatives can be found).

你做的方式取决于你(可以找到很多好的替代品)。

An (easy) approach could be with some global variables or using some kind of service if you're using some framework.

如果您使用某种框架,(简单)方法可以使用某些全局变量或使用某种服务。

Something like:

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

Then you can use them as follow:

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

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

Another option (not very used) is that you could create a service in the backend API which provides those values for the frontend to use it. So before the frontend code could use any value regarding to roles (for instance), a request must be made to the backend in order to get those constant values and save it in the frontend in order to use it in future operations.

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

#2

You could also generate the content of the JS file with all constants using backend. In this way you manage those data in one place, which may be the benefit.

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

#3

A first solution would be to create another file, for the frontend javascript to use, defining the constants. But this has a big disadvantage: you will have to make sure both files (frontend constants and backend constants) are the same. If you change one, you'll have to remember to change the other.

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

But firstly, note that this disadvantage also exists if you just hard-code the constants in the first place (this is terrible, and absolutely not an option).

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

The solution is to have an automated process (the so-called build step of development), that auto-generates the frontend constants file based on the backend constants file.

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

In javascript development, it's very common to have a build step: Webpack, Grunt, Gulp, etc... If you already have one of those, add to the build step a script that auto-generates the frontend constants file.

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

If you don't have a build step in your development process, this is a great time to start.

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

#1