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

Поле select

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

Поле radio

Аналогично полю select за исключением того, что для выбора используются радиокнопки.

Автор: http://ptitov.habrahabr.ru/