@Sp1keazyYT

Как оптимизировать и сократить мой большой код на JavaScript?

Добрый вечер. Имеется следующий код на JavaScript. Кто скажет, что тут можно оптимизировать и сократить, чтобы было красиво и правильно?
<div class="item-views blocks row maxwidth-theme">
    <div class="col-md-6">
        <p>Заполните поля калькулятора.</p>
        <form action="" id="ajax_form" method="post">
            <div class="row">
                <div class="form-group">
                    <div class="pb-10 col-md-12">
						<a id="inner_area"></a>
                        <label>Внутреняя площадь дома, м2</label>
                        <input type="number" class="form-control" name="inner_area" id="area">
                    </div>
                    <div class="pb-10 col-md-12">
                        <label>Количество этажей</label>
						<select class="form-control" name="floors" id="floors">
						  <option value="0"></option>
						  <option value="1">1</option>
						  <option value="2">2</option>
						  <option value="3">1+мансарда</option>
						</select>
                    </div>
                    <div class="pb-10 licence_block bx_filter col-md-12">
						<input type="checkbox" name="garage" id="garage" onclick="validate('#garage', '#garage_area')">
                        <label for="garage">Гараж</label>
                    </div>
                    <div id="garage_area" class="hide pb-10 col-md-12">
                        <label>Площадь гаража</label>
                        <input type="number" class="form-control" name="garage_area">
                    </div>
                    <div class="pb-10 licence_block bx_filter col-md-12">
						<input type="checkbox" name="aux_prem" id="aux_prem" onclick="validate('#aux_prem', '#aux_prem_area')">
                        <label for="aux_prem">Вспомогательные помещения</label>
                    </div>
                    <div id="aux_prem_area" class="hide pb-10 col-md-12">
                        <label>Площадь вспомогательных помещений (крыльцо, терасса)</label>
                        <input type="number" class="form-control" name="aux_prem_area">
                    </div>
                    <div class="pb-10 licence_block bx_filter col-md-12">
						<input type="checkbox" name="roof" id="roof">
                        <label for="roof">Кровля крыльца/террасы</label>
                    </div>
                    <div class="pb-10 col-md-12">
                        <label>Кровля крыльца/террасы</label>
						<select class="form-control" name="roof_pt" id="roof_pt" disabled></select>
                    </div>
                    <div class="pb-10 col-md-12">
						<a id="wall_mat_mess"></a>
                        <label>Материал стен</label>
						<select class="form-control" name="wall_mat" id="wall_mat" onchange="getOption()">
						  <option value="0"></option>
						  <option value="1">Газобетон без отделки</option>
						  <option value="2">Газобетон с отделкой фасада декоративной штукатуркой</option>
						  <option value="3">Керамический блок с облицовочным кирпичем</option>
						</select>
                    </div>
                    <div class="pb-10 col-md-12">
                        <label>Материал кровли</label>
						<select class="form-control" name="roof_mat" id="roof_mat">
						  <option value="0"></option>
						  <option value="1">Металлочерепица (Металлопрофиль)</option>
						  <option value="2">Гибкая черепица (Технониколь)</option>
						</select>
                    </div>
                    <div class="pb-10 col-md-12">
						<!--input type="checkbox" value="" maxlength="100" name="mounting" id="mounting"-->
                        <label for="mounting">Установка окон/дверей</label>
                        <a>В подарок!</a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <input type="button" value="Отправить" id="btn" class="btn btn-default btn-lg" data-loading-text="Loading...">
                </div>
            </div>
        </form>
    </div>
    <div id="result_form" class="col-md-6"></div>
</div>

<script>
	const area = document.querySelector('#area')
	const floors = document.querySelector('#floors')

	area.addEventListener('change', refresh)
	floors.addEventListener('change', refresh)

	function refresh() {
	  var value = area.value

	  const notify = function(mess) {
		document.getElementById('inner_area').innerHTML = mess;
	  }

	  const twoFloors = (floors.value == 2)

	  if (value > 300) {
		notify("Дома рассчитываются индивидуально!<br>");
		value = 300;
	  } else if (twoFloors && value < 120) {
		notify("Дома рассчитываются индивидуально!<br>");
		value = 120;
	  } else if (value < 90) {
		notify("Дома рассчитываются индивидуально!<br>");
		value = 90;
	  } else {
		notify("")
	  }

	  area.value = value;
	}
	
    function validate(cbid, divid) {
        if ($(cbid).is(':checked')) {
            $(divid).removeClass('hide');
        } else {
            $(divid).addClass('hide');
        }
    }
	
	function getOption() {
		
		const notify = function(mess) {
			document.getElementById('wall_mat_mess').innerHTML = mess;
		}
		
		var selected = $("#wall_mat").val();
		if (selected == 3) {
			notify("Обратите внимание, при выборе строительстве дома с облицовкой - размеры дома увеличиваются, так как наружная стена становится толще на 125мм.<br>");
		} else { notify(""); }
	}
	
	$( document ).ready(function() {
		
		$("body").on("change", "#roof_mat", function() {
		  let donor = $(this);
		  $("#roof_pt")
			.html("")
			.append(donor.find('[value="' + donor.val() + '"]').clone())
			.val(donor.val());
		});
		
		$("#btn").click(
		
			function(){
				var wallmat = $("#wall_mat").val();
				
				if (floors.value == 1) {

				  AC1 = 1;
				  if (area.value <= 120) AC1 = 1.26;
				  else if (area.value <= 140) AC1 = 1.24;
				  else if (area.value <= 160) AC1 = 1.23;
				  else if (area.value <= 200) AC1 = 1.22;
				  else if (area.value <= 260) AC1 = 1.2;
				  else if (area.value <= 300) AC1 = 1.19;
				  
				  MWC1 = 1;
				  if (wallmat == 1) {
					  if (area.value < 200) MWC1 = 1.04;
					  else if (area.value >= 200) MWC1 = 1.02;
				  }
				  
				} else if (floors.value == 2 || floors.value == 3) {
				  
				  AC2 = 1; // ? для меньше 100 
				  if (area.value >= 100 && area.value <= 130) AC2 = 1.3;
				  else if (area.value <= 160) AC2 = 1.27;
				  else if (area.value <= 200) AC2 = 1.24;
				  else if (area.value <= 300) AC2 = 1.22;
				  
				  MWC2 = 1;
				  if (wallmat == 1) {
					  if (area.value < 200) MWC2 = 1.06;
					  else if (area.value >= 200) MWC2 = 1.04;
				  }

				}
			}
		);
	});
</script>
  • Вопрос задан
  • 184 просмотра
Решения вопроса 1
Per_Ardua
@Per_Ardua
Frontend developer
У меня есть такие советы:
1. Выдели данные и вынеси наверх с говорящими названиями (чтобы понимать что вообще происходит)
2. Определись, наконец-то, используешь ты jQuery или пользуешься нативными средствами js (чтобы прийти к единообразию)
3. Если вдруг решил, что используешь - подумай ещё разок
4. Если есть возможность, то используй какой-нибудь архитектурный фреймворк под тип vue, react (да-да, я в курсе, что его называют библиотекой) и иже с ними (при их использовании придётся данные относить к данным, а обработкой заниматься в обработчиках, и в общем у кода появится структура, он станет хотя бы понятен. Не, там тоже можно наговнакодить, но сделать это будет чуть сложнее, и разбирать эту субстанцию будет чуть проще)
5. Сократи код, вынеся все повторяющиеся моменты (вместо кучки элсэифов можно сделать пару функций с параметрами)

Ну и общая рекомендация: почитай про dry, kiss и solid, и применяй (пока везде применяй, где можешь, потом разберёшься, где это не нужно. Ps: нужно почти везде)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы