<p>そのような場合に最初に頭に浮かぶのは、標準の配列またはオブジェクトの使用です。 しかし、このアプローチは重すぎます。 ハッシュを使用する方がはるかに便利ですが、JavaScriptでのハッシュのサポートは非常に限られています。 そのため、実用的なHashクラスを備えたPrototypeライブラリを使用し、計算機のロジックと計算ハッシュを含むフォームフィールドを記述することにしました。 これにより、電卓のコードを十分にシンプルにし（ここではリファクタリングのための幅広い分野を見ていますが）、拡張可能にしました。
var calculations = new Hash({})
function calcPrice() {
var f = document.forms['calculator']
var price = 0
calculations.each(function(pair) {
if(f[pair.key] == null){
alert(pair.key)
}
if(pair.value['fieldtype'] == 'counter' && f[pair.key].value.match(/^\d+$/)){
price += f[pair.key].value * pair.value['price']
}
if(pair.value['fieldtype'] == 'radio'){
val = getRadioValue(f[pair.key])
} else {
val = f[pair.key].value
}
if(pair.value['fieldtype'] == 'radio' || pair.value['fieldtype'] == 'select'){
if(val != 0){
price += pair.value['prices'][val]
}
}
})
$('pricevalue').innerHTML = price + ' .'
}
<p>ラジオボタンの値を取得するには、 getRadioValueヘルパー関数を使用します。
function getRadioValue(radio) {
for(i = 0; i < radio.length; i++){
if(radio[i].checked)
return radio[i].value
}
return 0;
}
<p> 計算ハッシュのキーはフォームフィールドの名前です。値は、このフィールドの価格を計算するためのルールを持つハッシュです。 各ルールには、フィールドのタイプを示すfieldtypeキーと、フィールドの処理方法（私の場合は価格と価格）を記述する他のキーが含まれています。 このアーキテクチャにより、必要に応じて、以前に作成したコードを上書きせずに、電卓の機能と複雑さを簡単に高めることができます。 3種類のフィールドを使用しました。</ p>
<p>さらに、 計算ハッシュのルールは、たとえばフォームのAJAX読み込み部分など、動的に変更できます。</ p>
カウンターフィールド
<p>数量が示されているテキストまたはその他のフィールド。 金額は、ユーザーが入力した数量に価格キーの値を掛けて計算されます。</ p>
calculations['units'] = $H({ fieldtype:'counter', price:5.50 })
<input type="text" value="2" name="counter">
フィールドを選択
複数のアイテムのリストを選択します。 各要素には、独自の英数字識別子と特定の値があります。 依存識別子—価格は価格ルールキーのハッシュによって指定されます。
calculations("color") = $H({ fieldtype:'select', prices:$H({white:20.95,red:49.55}) })
<select name="color">
<option value="white"></option>
<option value="red"></option>
</select>
電波場
選択と同じですが、ラジオボタンが選択に使用される点が異なります。
calculations("color") = $H({ fieldtype:'radio', prices:$H({white:20.95,red:49.55}) })
<input type="radio" name="color" value="white" />
<input type="radio" name="color" value="red" />