자바 스크립트 백분율 계산기 최적화

Question

두 개의 필드 (소매 및 네트워크)에서 백분율을 계산 한 다음 그 백분율을 다른 필드 (마크 업)로 덤프하는 자바 스크립트가 있습니다.

JS의 세계에 비교적 새로운 점으로 여러 행의 코드를 재사용하게되었습니다. 이것은 DRY 및 KISS 원칙에 어긋나며, 두 필드를 처리하고 세 번째 필드에 값을 덤프 할 수 있도록 코드를 최적화하는 방법에 대한 의견을 제공 할 수 있는지 궁금합니다.

다음은이를 사용하는 내 양식 세그먼트의 스크린 샷입니다. 여기

http://i.imgur.com/FHvDs.png

은 내가 사용하고 내 코드, 나는 그것을 네 번 재사용 예를 들어, 네 가지 기능에 코드를 삽입해야했다한다 (백분율 1, 백분율 2, 백분율 3, 백분율 4) 각 함수는 스크린 샷에 표시되는 일련의 필드를 처리합니다. 나는 그것이 잘못된 값을 제공 진수, 어떤 아이디어로 나눌 때

function percentage1() 
       { 


       //the dividee 
       x = document.getElementById('tariff_data'); 
       //the divider 
       y = document.getElementById('network_data'); 

        //if the first value is lower than the second, append a "-" sign 
        if (x.value < y.value) 
        { 
         z = "-"+(x.value/y.value)*100; 
         document.getElementById('markup_data').value = z; 
        } 
        //not a negative percentage 
        else 
        { 
         z = (x.value/y.value)*100; 
         document.getElementById('markup_data').value = z; 


        } 

       } 
function percentage2() 
       { 


       //the dividee 
       x = document.getElementById('tariff_rental'); 
       //the divider 
       y = document.getElementById('network_rental'); 

        //if the first value is lower than the second, append a "-" sign 
        if (x.value < y.value) 
        { 
         z = "-"+(x.value/y.value)*100; 
         document.getElementById('markup_rental').value = z; 
        } 
        //not a negative percentage 
        else 
        { 
         z = (x.value/y.value)*100; 
         document.getElementById('markup_data').value = z; 


        } 

       } 
etc etc.... 

이 기능은 진수의 정확한 비율을 계산하기 위해 어떻게 HTML onchange를 속성 또한

를 사용하여 호출된다 ?

내 코드는 이상한 출력 밖으로 준다 : 오히려 최적화보다는

Answer 1

코드를 DRYing하는 것과 관련하여; 당신이 할 수있는 기억

• 패스 당신의 기능에 대한 매개 변수와 귀하의 경우 반환 키워드

를 사용하여 함수 내에서

반환 값을 그 인수를 사용, 당신은 모든 곱셈 코드를 가지고 되풀이했다. 이미 언급 한 번호 문제 maerics 대 문자열을 해결하기 위해 노력하는 동안, 당신이 뭔가를 할 수 있습니다 :

// We're assuming 'dividee' and 'divider' are numbers. 
function calculatePercentage(dividee, divider) { 
    var result; 

    // Regardless of the positive/negative result of the calculation, 
    // get the positive result using Math.abs(). 
    result = Math.abs((dividee.value/divider.value) * 100); 

    // If the result was going to be negative... 
    if (dividee.value < divider.value) { 
     // Convert our result to negative. 
     result = result * -1; 
    } 

    // Return our result. 
    return result; 
} 

그런 다음 비율 기능에, 당신은 단지 호출 할 수있는 코드를과 같이 :

function percentage1() { 
    var tariff, network, markup; 

    tariff = parseFloat(document.getElementById('tariff_data').value, 10); 
    network = parseFloat(document.getElementById('network_data').value, 10); 
    markup = document.getElementById('markup_data'); 

    markup.value = calculatePercentage(tariff, network); 
} 

분명히, 이것을 더 취하여 ID를 취하고 요소 등에서 값을 추출하는 함수를 만들 수는 있지만 이러한 팁을 기반으로 직접 만들어야합니다.

Maerics는 또한주의해야 할 매우 좋은 점을 제시합니다. JavaScript의 좋은 부분에 대해 자세히 알아보십시오. Douglas Crockford의 저서는 훌륭하고 모든 JS 개발자가 읽고 이해해야합니다.

희망 사항은 코드 정리에 도움이됩니다.

Answer 2

NaN의 무한

감사의 처음 정확성에 초점을하자 =)

주를이 HTMLInputElement.value 속성에는 "string"유형이 있으므로 산술 연산자가 암시 적 유형 변환을 수행하고 있습니다. h는 예상하는 숫자 연산 대신 문자열 연결을 자주 수행한다는 것을 의미합니다.

난 강력하게 명시 적으로 numbers 첫째로 변환하고 유효하지 않은 입력을 확인하는 것이 좋습니다 또한, 첫번째, 그래서 그들은 잠재적으로 전역을 소지품하지 않는 var를 사용하여 변수를 선언하는 것을 잊지 마세요 예 :

var x = Number(document.getElementById('tariff_data')); 
var y = Number(document.getElementById('network_data')); 
if (!isFinite(x) || !isFinite(y)) { 
    // Handle non-numerical input... 
} 

당신이 원하는 경우 당신은 또한 parseFloat 기능을 사용할 수 있습니다 예 :

var x = parseFloat(document.getElementById('tariff_data'), 10); 

내가보기 엔 자바 스크립트 언어에 대한 몇 가지 공식 교육을하는 것이 좋습니다

; 함정으로 가득차 있지만 the "good parts"을 고수하면 많은 번거 로움과 두통을 덜 수 있습니다.