다른 조합의 가격을 표시하는 가장 좋은 디자인

Question

전자 상거래 사이트가 있고 제품에 3 가지 변형이있을 수 있습니다. 이것은 내가 세 개의 드롭 다운이 브라우저에

color | size | material | price 
blue | medium | leather | $21.00 
blue | large | leather | $27.00 
blue | large | cotton | $47.00 
white | large | cotton | $57.00 

이 무엇 :

구매자가 다음 옵션을 변경 내가 업데이트 된 가격을 표시해야합니다

color : blue/white 
size : medium/large 
material: leather/cotton 

.

서버 측에서는 가격을 얻기 위해 데이터베이스 쿼리를 수행했을 것입니다. 브라우저에서 가격을 얻으려면 JavaScript를 사용해야합니다. 그것을 성취하는 가장 좋은 방법은 무엇입니까?

하나 개의 솔루션은 자바 스크립트

{"blue-medium-leather" : 21.00} 

이 전략이 작동에 거대한 해시를 유지했다. 그러나 내가 알고있는 JavaScript에서 더 나은 솔루션이 있는지 궁금합니다.

Answer 1

2^3 = 8 개의 조합이 있습니다. 이 경우이 같은 구조를 중첩 제안 :

var prices = { 
    medium: { 
     leather : { 
      blue: 21.0, 
      white: //... 
     }, 
     cotton: { 
      //... 
     } 
    }, 
    large: { 
     leather : { 
      blue: 27.0, 
      white: //... 
     }, 
     cotton: { 
      blue: 47.0, 
      white: 57.0 
     } 

    } 
} 

쿼리는 의외로 간단하다 :

var price = prices.large.cotton.white; //57.0 

또는 당신은 (jQuery를에) 드롭 다운에서 문자열 값을 가져 오는 경우 :

var size = $('#size').val(); 
var material = $('#material').val(); 
var color = $('#color').val(); 
var price = prices[size][material][color]; 

분명히 모든 조합에서이 개체의 크기는 기하 급수적으로 커집니다.

Answer 2

JS에 데이터베이스를 보관할 수 없습니까? 필요한 것은 색상, 크기 및 재질을 전달하는 웹 서비스이며 서버는 가격을 반환합니다. Ajax를 사용하여 JavaScript에서 호출 할 수 있습니다.