时间戳

首页 > 解决方案 > 编码约定：将后端与前端标签匹配

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

问题描述

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

customerStats: {
  ownedProducts: 100,
  usedProducts: 50,
},

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

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

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

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

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

我正在使用的技术：

标签： frontendbackenddata-conversionconventions

解决方案

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

如果您的前端是基于 JavaScript 的，那么 JSON （Java Script Object Notation）是最简单的消费形式，它是内存中对象的字符串化版本。有关 JSON 的更多信息，请参阅此健康讨论

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

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

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

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

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

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

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

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

如何通过属性名称而不是视觉标签来引用数据

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

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

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

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

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

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

笔记：

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

推荐阅读