Нажмите кнопку-через калькулятор расхода с помощью jQuery


Я создал калькулятор для CTR с помощью jQuery. Калькулятор работает точно так, как я хочу, но я довольно новыми для jQuery и я задаюсь вопросом, если я использую jQuery и эффективно.

Цель кодекса заключается в том, что если ввести 2 значения и кнопка нажата, то соответствующая функция называется и цвет фона на выходе будет меняться.

<div class="container">
<div class="alert alert-info" role="alert">
    <span class="align-middle">CTR Calculator</span>
</div>


 <div>         
    <label for="v1">Number of Impressions:</label> <br/> 
    <input id="v1" type="text" style="width:10em;"/> <br/>

    <label for="v2">Number of Clicks:</label> <br/>
    <input id="v2" type="text" style="width:10em;"/> <br/>

    <label for="v3">CTR:</label><br/> 
    <input id="v3" type="text" style="width:10em;"/> <br/>

<div>
    <button id ="btn" type="button" class="btn btn-secondary">Calculate</button>
</div>
<div class="alert alert-info result" role="alert">
        <span id="result" class="align-middle"></span>
</div>  

  $(document).ready(function(){
      $("#btn").on("click",function(event){
        if ($("#v1").val() === '' && $("#v2").val() === '' && $("#v3").val() === '') {
            $('#v1,#v2,#v3').css('background-color', 'transparent');
            alert("Please enter atleast 2 values!");  
        } else if ($("#v1,#v2").val() === '' || $("#v1,#v3").val() === '' || $("#v2,#v3").val() === '') {
            $('#v1,#v2,#v3').css('background-color', 'transparent');
            alert("Please enter atleast 2 values!");
        } else if ($("#v1").val() === '') {
            var mathImp = (parseInt($('#v2').val()) / parseInt($('#v3').val())) * 100;
            $('#v1').val(mathImp);
            $('#v1').css('background-color', 'beige');
            $('#v2,#v3').css('background-color', 'transparent');
        }  else if ($("#v2").val() === '') {
            var mathClicks = (parseInt($('#v1').val()) * parseInt($('#v3').val())) / 100;
            $('#v2').val(mathClicks);
            $('#v2').css('background-color', 'beige');
            $('#v1,#v3').css('background-color', 'transparent');
        } else if ($("#v3").val() === '') {
            var mathCTR = (parseInt($('#v2').val()) / parseInt($('#v1').val())) * 100;
            $('#v3').val(mathCTR);
            $('#v3').css('background-color', 'beige');
            $('#v1,#v2').css('background-color', 'transparent');
        } else {
            alert("Please enter only 2 values!");
        }
     });
});


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

Я думаю, что этот стиль, что вызывает много "на jQuery бардак" вы слышали, как говорят. Позвольте мне попытаться объяснить, почему.

Что происходит, заключается в том, что код пытается обработать все возможные изменения состояния представления.
Например, когда вы хотите выделить определенный входной сигнал, также нужно учитывать, что один или оба из других материалов выделяются уже и так вам нужно будет их прятать.
Что вы можете сделать вместо этого, чтобы "сбросить" состояние просмотра до каждого запуска, и в этом случае следует учитывать только один случай.
Это называется декларативным программированием, поскольку вы в принципе заявить, что ваш вид будет выглядеть как определенное состояние, но вы не заботитесь о переходе из одного состояния в другое.

В вашем случае, вы хотели "сбросить" Ваше мнение государства, как так:

$('#v1,#v2,#v3').css('background-color', 'transparent')

Добавив эту простую строку в начале вашего кнопку-обработчик удаляет кучу шума от остальной части кода.

Вот несколько других вещей, которые могут быть улучшены:


  1. Только используйте, а не " так же

  2. Не дублируйте селекторов jQuery

  3. Использовать лучше имена, чем В1,В2,В3

  4. Если вас интересует только то, что пользователь вводит два значения, проверить, что (в отличие от проверки точных комбинаций)

Вот еще одна попытка рефакторинга (не проверял):

$(document).ready(() => {
$('#btn').on('click', () => {
let $impressions = $('#v1')
let $clicks = $('#v2')
let $ctr = $('#v3')
let inputs = [$impressions, $clicks, $ctr]

inputs.forEach($input => $input.css('background-color', 'transparent'))

let nFilled = inputs.filter($input => $input.val() !== '').length
if(nFilled !== 2){
alert('Please enter exactly 2 values!')
return
}

let setCalculatedInput = ($input, value) => {
$input.val(value)
$input.css('background-color', 'beige')
}

if($impressions.val() === ''){
setCalculatedInput($impressions, (parseInt($clicks.val()) / parseInt($ctr.val())) * 100)
}else if($clicks.val() === ''){
setCalculatedInput($clicks, (parseInt($impressions.val()) * parseInt($ctr.val())) / 100)
}else if($ctr.val() === ''){
setCalculatedInput($ctr, (parseInt($clicks.val()) / parseInt($impressions.val())) * 100)
}
})
})

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

Используется собственный API модели DOM

Вы не нуждаетесь в jQuery.


  • Она изолирует вас от обучения очень зрелые родной интерфейс дом.

  • Она поощряет плохие практики код, как по своей конструкции, и бессчетное количество дурных примеров в интернете.

  • Она коптит ваш исходный код с повторяющимися обозначениями, что делает его труднее читать и более склонны к ошибкам.

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

Как вы новичок, ваше время гораздо лучше потратить на обучение, чтобы использовать родной дом напрямую. Это даст вам более широкие, в будущем навыки.

Прямая ссылка элемент

Если вы правильно использовать идентификаторы элементов (они должны быть уникальными) можно использовать идентификатор, чтобы напрямую ссылаться на элементы в JavaScript. Это поддерживается всеми браузерами.

<input id="v1" type="text" style="width:10em;"/>
<script>
v1.value = "Hi all.";

// same as
$("#v1").val("Hi all.");
</script>

ЕС6+

Ваш код может быть переписан с использованием ЕС6+

addEventListeren("load", () => {

const color = "beige";
const setBG = (col, ...els) => {
for (const el of els) { el.style.background = col }
};
const sumVals = (...els) => els.reduce((sum, el) => sum + el.value !== "" ? 1 : 0, 0);

btn.addEventListener("click", () => {

setBGCol("transparent", v1, v2, v3);
if (sumVals(v1, v2, v3) === 2) {
if (v1.value === '') {
v1.value = v2.value / v3.value * 100;
setBG(color, v1);
} else if (v2.value === '') {
v2.value = v1.value * v3.value / 100;
setBG(color, v2);
} else {
v3.value = v2.value / v1.value * 100;
setBG(color, v3);
}
} else {
alert("Please enter only 2 values!");
}
});
});

В ES5

Или в ES5, совместимый с IE11

addEventListeren("load", function() {
var color = "beige";
function setBG(col, elements) {
elements.foreach(function(el) {
el.style.backgroundColor = col
});
};
function hasValue(element) {
return element.value !== "" ? 1 : 0;
}
btn.addEventListener("click", function() {
setBG("transparent", [v1, v2, v3]);
if (hasValue(v1) + hasValue(v2) + hasValue(v3) === 2) {
if (v1.value === '') {
v1.value = v2.value / v3.value * 100;
setBG(color, [v1]);
} else if (v2.value === '') {
v2.value = v1.value * v3.value / 100;
setBG(color, [v2]);
} else {
v3.value = v2.value / v1.value * 100;
setBG(color, [v3]);
}
} else {
alert("Please enter only 2 values!");
}
});
});

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