Question

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

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 （字符串），但它可以采用任何有意义的形式。应该采用什么形式？

我已经尝试了一个三维数组，其中定义的值为skus，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，因此它变得复杂。您在大小和速度（以及可读代码，如果可能）之间做出最佳权衡的数据结构是什么，请记住它将在客户端运行？

Answer 1

你真的确定速度是一个问题吗？你的目录是非常大的（成千上万的项目）？

为什么不使用扁平结构？

{
"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"}
}

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

除非您已经确认速度是一个问题，否则我不会忽略这种简单的方法。

Answer 2

这里有两个问题。 1.有效地将信息传播到浏览器2.有效地搜索该信息。我建议尽可能高效地将这些信息提供给浏览器，同时保持JSON，这样至少数据应该本地解析，然后将垃圾编入索引，制作有效执行搜索所需的任何字典。我可以从三个词典开始，每个词典用于选择的类别，然后对于值，使用一个数组用于匹配键的skus（使用sku的其他两个属性）。至于用户做出多个选择时要使用哪个字典，这取决于你，但是使用每个键的值最少值的字典作为默认值并且在用户时仅使用其他两个字典可能是有意义的只做了一个选择。

你有很多选择，我只给你几个。而且，请记住，这些都是优化，你做得越多，改变新行为就越难。

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

2 个答案: