0

ユーザーは、製品データの最大 3 つのディメンションから選択して、必要な製品を選択できます。たとえば、私が知っているズボンの場合:

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 (文字列) を配信する必要がありますが、意味のある任意の形式を取ることができます。それはどのような形を取るべきですか？

null定義された値が sku であるか、未定義の値が使用できない構成である 3 次元配列を試しました。

[ // 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

ここには2つの問題があります。1.ブラウザへの情報の効率的な伝播2.その情報の効率的な検索。その情報をJSONに保持しながら、可能な限り効率的にブラウザーに取得することをお勧めします。これにより、少なくともデータをネイティブに解析してから、データのがらくたをインデックスに登録し、検索を効率的に実行するために必要な辞書を作成する必要があります。まず、選択したカテゴリごとに3つの辞書から始め、次に値に対して、キーに一致するskusの配列を使用します（skuの他の2つの属性を使用）。ユーザーが複数の選択を行った場合に使用する辞書については、それはあなた次第です。

あなたにはたくさんの選択肢があります、私はあなたにほんの少しだけ与えています。さらに、これらは最適化であり、作成すればするほど、新しい動作に変更するのが難しくなる可能性があることを忘れないでください。

于 2012-08-06T16:38:18.623 に答える