JavaScript-фреймворк для создания веб-калькуляторов

<р>На днях мне понадобилось сделать веб-калькулятор. Это был не первый калькулятор, который я писал, и воспоминания о кодировании на JavaScript логики вычислений, каждый раз заново, вовсе не прибавляли энтузиазма. Очевидно, с этим нужно было что-то сделать, отделив логику вычислений, свою на каждом сайте, от кода и алгоритма самого калькулятора («посмотреть выбранное пользователем значение — вычислить сколько это стоит»).



<р>Первое, что приходит на ум в таких случаях, это использование стандартных массивов или объектов. Но такой подход черезчур тяжеловесный. Намного удобнее было бы использовать хэши, но их поддержка в JavaScript очень ограничена. Позтому я решил применить библиотеку Prototype, в которой есть праьтически полноценный класс Hash, и описывать логику работы калькулятора и поля формы хэшем calculations. Это позволило сделать код калькулятора достаточно простым (хотя я тут вижу широкое поле для рефакторинга) и расширяемым.

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 + ' руб.'
}

<р>Для получения значений радиокнопок используется вспомогательная функция getRadioValue.

function getRadioValue(radio) {
for(i = 0; i < radio.length; i++){
if(radio[i].checked)
return radio[i].value
}
return 0;
}

<р>Ключами хэша calculations являются имена полей формы, значениями — хэши с правилами вычисления цены по данному полю. Каждое правило содержит ключ fieldtype, указывающий на тип поля, а также другие ключи, описывающие, как обрабатывать поле (в моем случае price и prices). Такая архитектура позволяет при необходимости легко наращивать функциональность и сложность калькулятора, не переписывая созданный ранее код. Я использовал три типа полей.</р>

<р>Кроме того, правила в хэше calculations могут модифицироваться динамически, например, при AJAX-загрузке частей формы.</р>

Поле counter

<р>Текстовое или иное поле, в котором указывается количество; сумма рассчитывается умножением введенного пользователей количества на значение ключа price.</р>
calculations['units'] = $H({ fieldtype:'counter', price:5.50 })
<input type="text" value="2" name="counter">

Поле select

Выбор списка из нескольких элементов. У каждого элемента есть свой алфавитно-цифровой идентификатор и определенная стоимость. Зависимость идентификатор—цена задается хэшем в ключе prices правила.
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>

Поле radio

Аналогично полю 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" /> красное