表示可用产品的所有组合的数据结构

Data structure to represent all combinations of available product?

本文关键字：组合 数据结构 表示      更新时间：2023-09-26

用户可以从多达三个维度的产品数据中进行选择，以选择他们想要的产品。例如，对于一条我可能知道的裤子：

colors = ["red", "blue", "soylent green"]
waists = ["28W", "30W", "omg random description", "32W"] // The values are not always numeric
lengths = ["26L", "27L", "28L", "29L"]

在DOM中表示为：

<ul class="colors">
  <li><button name="red" value="red"/></li>
  <li><button name="blue" value="blue/></li>
  …
</ul>
<ul class="waists">
  <li><button name="28W" value="28W"/></li>
  <li><button name="30W" value="30W"/></li>
  …
</ul>
<!-- you get the picture -->

我们也知道，你不可能得到颜色、腰围和长度的每一种组合。当选择部分配置时，我们标记HTML，以指示在该选择下可以使用哪些配置。为我提供可用组合的数据必须以JSON形式提供，并且必须提供产品配置的sku（字符串），但它可以采取任何有意义的形式。应该采取什么形式？

我试验了一个三维数组，其中定义的值是sku和null，或者未定义的值不可用的配置：

[ // Arrays of colors
  [ // Arrays of waists
    [ // Array of lengths
      "sku-1", "sku-2", "sku-3", null, "sku-4"
    ], [
      "sku-abc", null, "sku-def"
    ]
  ], [
    [ … ], …
  ] …
]

这是最紧凑的，但会导致代码缓慢、不可读。当客户将鼠标悬停在腰部大小的按钮上时，我必须在腰部数组中找到该值的索引，并消除腰部的所有其他维度，然后获得null值的索引并将其标记为不可用。这里有很多for循环。

我尝试的另一种方法是使用嵌套对象。不可用的组合只是未定义：

{
  "red": {
    "28W": {
      "28L": "sku-123",
      "30L": "sku-456"
…
}}}

但是，如果用户悬停在"28L"上，我必须遍历所有外部对象，以找到不具有28L属性的对象。

如果我只需要知道哪些配置不可用，我可以列出这些配置，但由于我还需要sku，这变得很复杂。您在大小和速度（以及可读代码，如果可能的话）之间做出最佳权衡的数据结构是什么，请记住它将在客户端运行？

你真的确定速度是个问题吗？你们的目录很大吗（成千上万的商品）？

为什么不使用平面结构？

{
"sku-123" : ["purple", "28W", "32L"],
"sku-998" : ["orange", "44W", "10L"]
}

或使用键

{
"sku-123" : {color: "purple", w: "28W", l: "32L"},
"sku-998" : {color: "orange", w: "44W", l: "10L"}
}

当然这不是最快的，你必须遍历所有产品才能过滤掉它们。但它将使代码更可读（可以使用谓词），更容易适应其他情况（例如添加新字段）。

除非你已经验证了速度是一个问题，否则我不会放弃这种简单的方法

这里有两个问题。1.信息到浏览器2的有效传播。有效搜索该信息。我建议尽可能高效地将这些信息发送到浏览器，同时将其保存在JSON中，这样至少数据应该进行本地解析，然后对其中的垃圾进行索引，生成高效执行搜索所需的任何词典。我可能会从三个字典开始，每个字典都用于所选的类别，然后对于值，为那些与键匹配的sku（以及sku的其他两个属性）使用一个数组。如果用户做出了多个选择，那么该使用哪一个字典，这取决于您，但默认情况下，使用每个键的值最少的字典，并且当用户只做出一个选择时，只使用其他两个字典可能是有意义的。

你有很多选择，我只给你几个。此外，请记住，这些都是优化，你做得越多，就越难为新的行为进行更改。

相关文章：