Оптимизация кода. Правила хорошего тона при написании скриптов
Всем привет! Ребят, помогите оптимизировать код... написал небольшой скрипт - кредитный калькулятор, правда, не до конца... хочу чтоб вы покритиковали код, подсказали, как изящнее решать проблемы итд итп...
скрипт рабочий, кстати)) буду очень признателен за толковые советы... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Кредитный калькулятор. Разработка</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="../../jquery-1.4.2.js"></script> <script type="text/javascript" src="../../ui/jquery-ui-1.8.4.custom.min.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> <link type="text/css" href="../demos.css" rel="stylesheet" /> <style> dl{ clear:both } dt{ float:left; width:150px } dd input,dd div{ float:left } .slider{ width:300px; position:relative; left:30px; top:6px } .slider span{ position:absolute } p#max{ font-size:70px } </style> <script type="text/javascript"> $(function() { //Слайдеры - объявление и получение значения в инпут $("#slider0").slider({ animate:true, min: 8000, max: 500000, value: 20000, slide: function(event, ui) { $("#income").val(ui.value); income = $("input#income").val() * 6; paying = (income * insurance * time/(1 + percent/100)).toFixed(2); $("p#max").text(paying); } }); $("#income").val($("#slider0").slider("value")); $("#slider1").slider({ animate:true, min: 1, max: 60, value: 6, slide: function(event, ui) { $("#time").val(ui.value); time = $("input#time").val(); if($("input#insurance").is(":checked")){ if($("input#time").val() <= 12){ percent = 17; } else if($("input#time").val() <= 24) { percent = 18; } else { percent = 19; } } else { if($("input#time").val() <= 12){ percent = 18; } else if($("input#time").val() <= 24) { percent = 19; } else { percent = 20; } }; paying = (income * insurance * time/(1 + percent/100)).toFixed(2); $("p#max").text(paying+" | "+insurance+" | "+percent); } }); $("#time").val($("#slider1").slider("value")); $("#slider2").slider({ animate:true, range: "min", min: 30000, max: 1000000, value: 30000, slide: function(event, ui) { $("#sum").val(ui.value); } }); $("#sum").val($("#slider2").slider("value")); //Определение переменных при загрузке страницы insurance = $("input#insurance").is(":checked") ? (0.6) : (0.5); income = $("input#income").val() * 6; time = $("input#time").val(); percent = $("input#insurance").is(":checked") ? 17 : 18; paying = (income * insurance * time/(1 + percent/100)).toFixed(2); $("#sum").val(paying); $("#slider2").slider({value: paying}); $("p#max").text(paying); //Слайдеры - изменение положения ползунка при наборе цифр в инпуте $("dd input").not("#time").keyup(function(){ $(this).next("div").slider({value: $(this).val()}); income = $("input#income").val() * 6; paying = (income * insurance * time/(1 + percent/100)).toFixed(2); $("p#max").text(paying); }); //Слайдер срок кредитования - изменение процентной ставки на значение инпута $("dd input#time").keyup(function(){ $(this).next("div").slider({value: $(this).val()}); time = $("input#time").val(); if($("input#insurance").is(":checked")){ if($(this).val() <= 12){ percent = 17; } else if($(this).val() <= 24) { percent = 18; } else { percent = 19; } } else { if($(this).val() <= 12){ percent = 18; } else if($(this).val() <= 24) { percent = 19; } else { percent = 20; } }; paying = (income * insurance * time/(1 + percent/100)).toFixed(2); $("p#max").text(paying+" | "+insurance+" | "+percent); }); //Наличие страхования $("input#insurance").click(function(){ insurance = $("input#insurance").is(":checked") ? 0.6 : 0.5; paying = (income * insurance * time/(1 + percent/100)).toFixed(2); $("p#max").text(paying); }); }); </script> </head> <body> <form id="calculator"> <dl id="row_income"> <dt>Ежемесячный доход, руб.</dt> <dd> <input id="income" type="text"> <div id="slider0" class="slider"> <span style="left:-1px;top:-17px">8 000</span> <span style="left:254px;top:-17px">500 000</span> </div> </dd> </dl> <dl id="row_time"> <dt>Срок кредитования, мес.</dt> <dd> <input id="time" type="text"> <div id="slider1" class="slider"></div> </dd> </dl> <dl id="row_sum"> <dt>Сумма кредита, руб.</dt> <dd> <input id="sum" type="text"> <div id="slider2" class="slider"><div class="ui-slider-range ui-slider-range-min ui-widget-header" style="width: 39.6744%; display: block;"></div></div> </dd> </dl> <dl id="row_insurance"> <dt>Страхование жизни</dt> <dd> <input id="insurance" type="checkbox"> </dd> </dl> <br /><br /> Максимальная сумма кредита: <p id="max"></p> Ежемесячный платеж <p id="monthly"></p> </form> </body> </html> |
Не используйте глобальные переменные.
|
Часовой пояс GMT +3, время: 09:27. |