编码约定：将后端与前端标签匹配

Posted 2023-03-17

【中文标题】编码约定：将后端与前端标签匹配

【英文标题】：Coding convention: Matching backend with frontend labels

【发布时间】：2020-04-02 00:20:47

【问题描述】：

在我的后端，我有以驼峰命名的数据属性：

customerStats: 
  ownedProducts: 100,
  usedProducts: 50,
,

我的 UI 代码设置为 ["label", data] 数组在大多数情况下效果最佳，即最方便前端编码。在我的前端，我需要这些标签使用正确的英文拼写，以便它们可以在 UI 中按原样使用：

customerStats: [
  ["Owned products", 100],
  ["Used products", 50],
],

我的问题是关于 Web 开发中的最佳实践或标准。我在过去的项目中一直不一致，我会在随机位置转换数据，有时是客户端，有时是在后端，有时转换一种方式然后再返回，因为我需要 JSON 数据结构。

是否有编码约定应如何将数据提供给前端？

现在我所有的数据都以 JSON 格式传输到前端。将数据转换为前端或后端所需的形式是最佳实践吗？如果我需要 JSON 属性在客户端上进行进一步计算怎么办？

我正在使用的技术：

前端：javascript / React 后端：Javascript / Node.js + Java / Java Spring

【问题讨论】：

数据结构应尽可能晚地转换为人类可读的标签，通常只在最终的 html 模板中（如果适用）。什么时候“最新”的可能点取决于您的特定应用。

@deceze 是的，我就是这么想的。您是否有类似博客文章或文章的参考，可以更详细地解释此声明？那么我会接受它作为答案。

您还没有提到您在前端或后端使用哪些技术，这些信息会极大地影响您将获得的响应。

@ChrisSchaller 我添加了技术：前端：Javascript / React。后端：Javascript / Node.js + Java / Java Spring。我问了一个一般性的问题，我期待一个一般性的答案。你的回答相当广泛。谢谢！

【参考方案1】：

是否有关于如何将数据传输到前端的编码约定

如果你的前端是基于 JavaScript 的，那么 JSON (Java Script Object Notation) 是最简单的消费形式，它是内存中对象的 字符串化 版本. See this healthy discussion for more information on JSON

鉴于当今最流行的前端开发语言是 JavaScript，(see the latest SO Survey on technology) 使用 JSON 格式在解决方案的后端和前端之间传输数据是非常普遍和广泛接受的。在非基于 JavaScript 的解决方案中使用 JSON 的决定受到您使用的开发和部署工具的影响，因为越来越多的开发人员正在使用 JavaScript，我们的大多数工具都经过精心设计，以在一定程度上支持 JavaScript。

不过，使用其他结构化格式（如 XML）同样可以接受。

JSON 通常比 XML 更轻量，因为用于传输有关模式的元数据的规定较少。对于内部数据流，在每次数据传输时传输完全指定的 XML 模式可能是多余的，因此在发送方和接收方之间没有数据结构问题的情况下，JSON 是一个不错的选择。

XML 是一种更正式的数据传输格式，它可以包含完整的模式文档，使接收者可以在很少或不需要额外文档的情况下使用信息。

CSV 或其他自定义格式可以减少通过线路发送的字节数，但在需要时很难直观地检查数据，并且在发送端和接收端都存在格式化和解析数据的开销。

将数据转换为前端或后端所需的形式是最佳做法吗？

最佳做法是减少需要转换数据元素的次数。理想情况下，您永远不必在标签和数据属性名称之间进行转换……这也是使用 JSON 作为数据传输格式的主要原因。

因为 JSON 可以在 JavaScript 前端中进行本地解释，所以在 JavaScript 前端中，我们可以从本质上将转换减少到仅对数据进行序列化/反序列化的服务器端边界。实际上，前端根本没有任何转换。

如何通过属性名称而不是视觉标签

来引用数据

这个领域普遍接受的约定是将数据模型和用户体验、视图之间的关注点分开。重要的是，视图是离用户最近的层，它代表数据模型的给定“视图”。

如果没有为上下文提供任何语言或代码，很难为 OP 定制代码解决方案，抽象意义上，应用此概念意味着不尝试让数据模型携带有关数据应该如何存储的最终信息显示，而不是您有另一段代码提供呈现数据所需的信息。

在不同的技术和平台中，我们以不同的方式引用这一点，但将模型与视图或表示分离的核心概念始终通过这些设计模式表示：

Exploring the MVC, MVP, and MVVM design patterns MVP vs MVC vs MVVM vs VIPER

对于 OP 的特定场景，这可能涉及如下映射结构：

customerStatsLabels: 
  ownedProducts: "Owned products",
  usedProducts: "Used products",

如果这个问题用一些关于如何构建 UI 的代码来更新，我会用更具体的东西更新这个响应。

注意：

在 JavaScript 中，对象只是数组的数组，因此很容易将基于数组的现有代码调整为基于对象的代码，反之亦然。