Калькулятор для площадь комнаты


Я создал программу, которая вычисляет площадь комнаты. И я добавил форму после первого расчета, который автоматически обновляет значения при любом значении изменения. Но код для этой формы дублирует некоторые функции. Я буду рад за совет по улучшению кода.

$(function(){
 $('.card').hide();
 const e = 0.09290304;
 var newLength = function(a){return $('#lengthChange').val(a)};
 var newWidth = function(a){return $('#widthChange').val(a)};
 var lengthA = "";
 var widthA = "";
 var areaFeet ="";
 var convert = function(a){return parseFloat(a.val());};
 var inFeet = function(a, b){return a * b};
 var inMeters = function(a){return Math.pow(a, 2) * e};
 $('#inputBtn').click(function(){
  $('#startForm').hide();
  $('.card').show();
  lengthA = convert($('#lengthInput'));
  widthA = convert($('#widthInput'));
  newLength(lengthA);
  newWidth(widthA);
  areaFeet = inFeet(lengthA, widthA);
  $('#squareFeet').text(areaFeet);
  $('#squareMeters').text(inMeters(areaFeet));
  $(this).hide();
 });
 var changeArea = function(){
  lengthA = convert($('#lengthChange'));
  widthA = convert($('#widthChange'));
  areaFeet = inFeet(lengthA, widthA);
  $('#squareFeet').text(areaFeet);
  $('#squareMeters').text(inMeters(areaFeet));
 };

  $('#lengthChange').on('input', function(){
   return changeArea();
   });
  $('#widthChange').on('input', function(){
   return changeArea();
   });
 
});
.input{width: 80px; padding-left: 5px}
.card{width: 600px}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="container mt-5 text-center">
 <h2 class="mb-4">Area of a Rectangular Room</h2>
 <form id="startForm">
  <div class="form-group">
   <label>What is the length of the room in feet?</label>
   <input type="number" class="input" id="lengthInput" name="" step="any" min="0" oninput="validity.valid||(value='');">
  </div>
  <div class="form-group">
   <label>What is the width of the room in feet?</label>
   <input type="number" class="input" id="widthInput" name="" step="any" min="0" oninput="validity.valid||(value='');">
  </div> 
 </form>
 <button class="btn btn-primary" id="inputBtn">Quick Calculations</button>
 <div class="card text-center mx-auto">
  <div class="card-header">
   <form class="inline-form">
    <label class="mr-2 font-weight-bold">Length:</label>
    <input type="number" class="input" id="lengthChange" value="" name="" step="any" min="0" oninput="validity.valid||(value='');">
    <span class="ml-2">feet</span>
    <span class="ml-2 mr-2 font-weight-bold">X</span>
    <label class="mr-2 font-weight-bold">Width:</label>
    <input type="number" class="input" id="widthChange" name="" step="any" min="0" oninput="validity.valid||(value='');">
    <span class="ml-2">feet</span>
   </form>
  </div>
  <div class="card-body text-left mt-3">
   <dl class="row">
    <dt class="col-sm-5 pl-5">The area is</dt>
    <dd class="col-sm-7"><span id="squareFeet" class="font-weight-bold"></span> square feet</dd>
                <dd class="col-sm-7 offset-sm-5"><span id="squareMeters" class="font-weight-bold"></span> square meters</dd>
   </dl>
  </div>
 </div>
</div>



Комментарии
2 ответа

Пользовательский интерфейс выглядит очень приятно, и я был удивлен, что это было только несколько строк кода. Молодец.

Когда я впервые попробовал его, я был смущен, когда UI корне изменилась после нажатия кнопки "быстрые расчеты кнопку". Насчет снятия первой части пользовательского интерфейса в целом?

const e = 0.09290304;

Имя e это плохо, потому что это не дает никакого понятия о том, что количество означает. Лучшее название будет squareMeterPerSquareFoot.

var newLength = function(a){return $('#lengthChange').val(a)};
var newWidth = function(a){return $('#widthChange').val(a)};

Тебе не нужны эти две функции, так как вы никогда не использовать их возвращаемых значений.

var lengthA = "";
var widthA = "";
var areaFeet ="";

Эти переменные не должны быть заявлены здесь, так как они не используются в этой внешней функции. Они используются только во внутренней функции ниже, и там они должны быть определены с помощью const вместо var. Это говорит о человеческом читателя, что они не будут изменены.

var convert = function(a){return parseFloat(a.val());};

Имя этой функции является слишком широким. Конечно, преобразует что-то, но когда эта функция вызывается как output = convert(input)Я понятия не имею, что здесь происходит. Лучшее имя floatValue.

var inFeet = function(a, b){return a * b};

Эта функция не имеет ничего общего с ногами. Она должна называться area. Может быть, даже rectAreaно поскольку эта программа только беспокоит прямоугольников, что может быть слишком долго.

var inMeters = function(a){return Math.pow(a, 2) * e};

Эта функция не должна квадрат своего аргумента. Параметр a есть жуткое имя. Чтобы избежать ошибок в вашей программе, все переменные должны содержать единицы измерения. Вместо aлучше имя lengthInFeet. Эта ошибка становится очевидной после того, как вы вызываете эту функцию с areaFeed, который, очевидно, имеет единицы измерения отличаются от lengthInFeet.

var changeArea = function(){
lengthA = convert($('#lengthChange'));
widthA = convert($('#widthChange'));
areaFeet = inFeet(lengthA, widthA);
$('#squareFeet').text(areaFeet);
$('#squareMeters').text(inMeters(areaFeet));
};

Поэтому зона в метрах areaFeet * areaFeet * e? Это ошибка.

Вместо var changeArea = function() { ... };вы должны написать function changeArea() { ... }. Это короче и спасает var и точку с запятой. Он также фиксирует намерение более четко, так как вы определяете функцию, а не переменную здесь.

 $('#lengthChange').on('input', function(){
return changeArea();
});
$('#widthChange').on('input', function(){
return changeArea();
});

Как бритва Оккама уже говорилось, при вызове функции без параметров в функцию обратного вызова, как это можно передать функцию непосредственно:

 $('#widthChange').on('input', changeArea);

1
ответ дан 3 марта 2018 в 09:03 Источник Поделиться

Это один-лайнер функции-это отличная возможность использовать более лаконичные стрелки функции.

так это..

var newLength = function(a){return $('#lengthChange').val(a)};

становится это...

var newLength = a=>$('#lengthChange').val(a);

Некоторые люди со мной не согласятся, но я лично предпочитаю определять мои Варс все сразу, и чтобы сохранить функции отдельно от переменных. Кроме того, я хотел бы использовать const для функции.

var lengthA = "", 
widthA = "",
areaFeet ="",
const newLength = a=>$('#lengthChange').val(a);
const newWidth = a=>$('#widthChange').val(a);
const convert = a=>parseFloat(a.val());
const inFeet = (a, b)=>a * b;
const inMeters = a=>Math.pow(a, 2) * e;

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

это...

$('#widthChange').on('input', function(){
return changeArea();
});

может также просто быть...

$('#widthChange').on('input', changeArea);

Помимо того, что хорошо сделано. Это выглядит красиво.

2
ответ дан 2 марта 2018 в 01:03 Источник Поделиться