Оптимизация кода JavaScript - создание многоразовых классов

Question

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

Вот ссылка на мой jsfiddle демо-версии: JSFiddle Demo

<form id="tyreForm"> 
<div id="currentTyre"> 
<h2>Current Tyre Size</h2> 

<div id="errorDisplay"></div> 

<input type="number" id="sectionWidth">/
<input type="number" id="aspectRatio"> R 
<input type="number" id="rimDiameter"> 

<p>Sidewall: <span class="output"></span></p> 
<p>Width: <span class="output"></span></p> 
<p>Diameter: <span class="output" id="fullDiameter"></span></p> 
<p>Circumference: <span class="output"></span></p> 
<p>Reverse/Mile: <span class="output"></span></p> 
</div> 

<div id="newTyre"> 
<h2>New Tyre Size</h2> 

<input type="number" id="newSectionWidth">/
<input type="number" id="newAspectRatio"> R 
<input type="number" id="newRimDiameter"> 

<p>Sidewall: <span class="output"></span></p> 
<p>Width: <span class="output"></span></p> 
<p>Diameter: <span class="output" id="newFullDiameter"></span></p> 
<p>Circumference: <span class="output"></span></p> 
<p>Reverse/Mile: <span class="output"></span></p> 
</div> 
<div id="result"> 
<h2>Tyre difference</h2> 
<p>Diameter Difference(%): <span id="diameterDifference"></span></p> 
</div> 
     <button type="submit">Calculate</button> 
    </form> 

document.getElementById('tyreForm').addEventListener('submit', function(e) { 
e.preventDefault(); 

var sw = this.sectionWidth.value; 
var ar = this.sectionWidth.value; 
var rd = this.sectionWidth.value; 

var nsw = this.newSectionWidth.value; 
var nar = this.newAspectRatio.value; 
var nrd = this.newRimDiameter.value; 

/* Form Validation Starts */ 
var errorDisplay = document.getElementById('errorDisplay'); 
errorDisplay.style.display = 'block'; 

if (sw == '' || ar == '' || rd == '') { 
    errorDisplay.style.color = "red"; 
    errorDisplay.textContent = "Error: Please fill all the fields"; 
    return false; 
} 

if (sw == 0 || ar == 0 || rd == 0) { 
    errorDisplay.style.color = "red"; 
    errorDisplay.textContent = "Error: Please check your input fields. 0 is  not valid"; 
    return false; 
} 
/* Form Validation Finishes */ 

this.getElementsByClassName("output")[0].textContent = sidewall(sw, ar).toFixed(2); 
this.getElementsByClassName("output")[1].textContent = width(sw, ar, rd).toFixed(2); 
this.getElementsByClassName("output")[2].textContent = diameter(sw, ar, rd).toFixed(2); 
this.getElementsByClassName("output")[3].textContent = circumference(sw, ar, rd).toFixed(2); 
this.getElementsByClassName("output")[4].textContent = reverseMile(sw, ar, rd).toFixed(2); 

this.getElementsByClassName("output")[5].textContent = sidewall(nsw, nar).toFixed(2); 
this.getElementsByClassName("output")[6].textContent = width(nsw, nar, nrd).toFixed(2); 
this.getElementsByClassName("output")[7].textContent = diameter(nsw, nar, nrd).toFixed(2); 
this.getElementsByClassName("output")[8].textContent = circumference(nsw, nar, nrd).toFixed(2); 
this.getElementsByClassName("output")[9].textContent = reverseMile(nsw, nar, nrd).toFixed(2); 

var fd = document.getElementById('fullDiameter').textContent; 
var nfd = document.getElementById('newFullDiameter').textContent; 
document.getElementById('diameterDifference').textContent = diameterDifference(fd, nfd); 
}, false); 

/* All functions */ 
function sidewall(sw, ar) { 
return ((sw * (ar/100))/25.4); 
} 

function width(sw, ar) { 
return (sw/25.4); 
} 

function diameter(sw, ar, rd) { 
return ((sidewall(sw, ar) * 2) + parseFloat(rd)); 
} 

function circumference(sw, ar, rd) { 
return (((((sw * (ar/100))/25.4) * 2)+ parseInt(rd)) * 3.14); 
} 

function reverseMile(sw, ar, rd) { 
return (63360/(((((sw * (ar/100))/25.4) * 2)+ parseInt(rd)) * 3.14)); 
} 

function diameterDifference(fd, nfd) { 
return fd * nfd; // Just dummy formula 
} 

Основная идея:

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

Пожалуйста, проверьте jsfiddle для получения дополнительной информации.

Заранее благодарен!

Лучшие

Answer 1

Вы должны создать Tyre прототип, который принимает sectionWidth, aspectRatio и rimDiameter в «конструктор» и более всех ваших функций в этом прототипе. Это упростит логику вашего кода и поможет вам придерживаться принципов DRY (не повторяйте себя).

var Tyre = function(sectionWidth, aspectRatio, rimDiameter) { 
    this.sw = sectionWidth; 
    this.ar = aspectRatio; 
    this.rd = rimDiameter; 

    this.isEmpty = function() { 
     return this.sw === '' || this.ar === '' || this.rd === ''; 
    }; 

    this.isZero = function() { 
     return this.sw == 0 || this.ar == 0 || this.rd == 0; 
    }; 

    this.width = function() { 
     return this.sw/25.4; 
    }; 

    this.sidewall = function() { 
     return this.width() * this.ar/100; 
    }; 

    this.diameter = function() { 
     return 2 * this.sidewall() + parseFloat(this.rd); 
    }; 

    this.circumference = function() { 
     return this.diameter() * Math.PI; 
    }; 

    this.reverseMile = function() { 
     return 63360/this.circumference(); 
    }; 

    this.diameterDifference = function(other) { 
     return this.diameter() * other.diameter(); 
    }; 
}; 

document.getElementById('tyreForm').addEventListener('submit', function(e) { 
    e.preventDefault(); 

    var currentTyre = new Tyre(this.sectionWidth.value, this.aspectRatio.value, this.rimDiameter.value); 

    var newTyre = new Tyre(this.newSectionWidth.value, this.newAspectRatio.value, this.newRimDiameter.value); 

    /* Form Validation Starts */ 
    var errorDisplay = document.getElementById('errorDisplay'); 
    errorDisplay.style.display = 'block'; 

    if (currentTyre.isEmpty()) { 
     errorDisplay.style.color = "red"; 
     errorDisplay.textContent = "Error: Please fill all the fields"; 
     return false; 
    } 

    if (currentTyre.isZero()) { 
     errorDisplay.style.color = "red"; 
     errorDisplay.textContent = "Error: Please check your input fields. 0 is not valid"; 
     return false; 
    } 
    /* Form Validation Finishes */ 

    this.getElementsByClassName("output")[0].textContent = currentTyre.sidewall().toFixed(2); 
    this.getElementsByClassName("output")[1].textContent = currentTyre.width().toFixed(2); 
    this.getElementsByClassName("output")[2].textContent = currentTyre.diameter().toFixed(2); 
    this.getElementsByClassName("output")[3].textContent = currentTyre.circumference().toFixed(2); 
    this.getElementsByClassName("output")[4].textContent = currentTyre.reverseMile().toFixed(2); 

    if (newTyre.isEmpty() || newTyre.isZero()) 
     return; 

    this.getElementsByClassName("output")[5].textContent = newTyre.sidewall().toFixed(2); 
    this.getElementsByClassName("output")[6].textContent = newTyre.width().toFixed(2); 
    this.getElementsByClassName("output")[7].textContent = newTyre.diameter().toFixed(2); 
    this.getElementsByClassName("output")[8].textContent = newTyre.circumference().toFixed(2); 
    this.getElementsByClassName("output")[9].textContent = newTyre.reverseMile().toFixed(2); 

    document.getElementById('diameterDifference').textContent = currentTyre.diameterDifference(newTyre); 
}, false);