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

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等......如果你已經有其中一個，那么在構建步驟中添加一個自動生成前端常量文件的腳本。

如果您的開發過程中沒有構建步驟，那么現在是開始的好時機。