0

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

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

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

4

2 回答 2

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

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

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

于 2012-08-06T15:51:18.130 回答
0

这里有两个问题。1. 信息向浏览器的有效传播 2. 信息的有效搜索。我建议尽可能高效地将这些信息发送到浏览器，同时将其保存在 JSON 中，这样至少数据应该在本地解析，然后从中索引废话，制作有效执行搜索所需的任何字典。我可能会从三个字典开始，每个字典用于选择的类别，然后对于值使用与键匹配的那些 sku 的数组（具有 sku 的其他两个属性）。至于如果用户做出了多项选择，使用哪个字典，这取决于你，

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

于 2012-08-06T16:38:18.623 回答