Wie funktioniert Code Abkürzung in diesem Programm

Ich habe gerade angefangen zu lernen JavascriptWie funktioniert Code Abkürzung in diesem Programm

Hier ist mein Code unten.
Ich denke, es ist zu lang, also brauche ich eine Hilfe, um es kürzer zu machen.

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title></title> 
    </head> 
    <body> 
    <button onclick="myFunction()">do it</button> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script> 
     var x = document.createElement("INPUT"); 
     x.setAttribute("type", "text"); 
     x.setAttribute("value", ""); 
     x.setAttribute("id", "top2"); 
     document.body.appendChild(x); 
     var x = document.createElement("INPUT"); 
     x.setAttribute("type", "text"); 
     x.setAttribute("value", ""); 
     x.setAttribute("id", "top"); 
     document.body.appendChild(x); 
     var x = document.createElement("SELECT"); 
     x.setAttribute("id", "mySelect"); 
     document.body.appendChild(x); 
     $("#mySelect").append($("<option value='toplama'></option>").text("Toplama")); 
     $("#mySelect").append($("<option value='çıkarma'></option>").text("Çıkarma")); 

     function myFunction() { 
     var sayi1 = document.getElementById('top').value; 
     var sayi2 = document.getElementById('top2').value; 
     var sonuc; 
     if ($("#mySelect").val() == "toplama") { 
      sonuc = parseInt(sayi1) + parseInt(sayi2); 
      alert(sonuc); 
     } else if ($("#mySelect").val() == "çıkarma") { 
      sonuc = parseInt(sayi1) - parseInt(sayi2); 
      alert(sonuc); 
     } 
     } 
    </script> 
    </body> 
</html>

Wie kann ich diesen JavaScript-Code verbessern?
Was soll ich tun?

Quelle

2016-12-09 A.Gecu

kann dieser Link hilft Ihnen http://javascript.crockford.com/code.html –

einfach den Code scannen schnell bemerke ich ein paar Dinge, die verbessert werden können, die ich weiter unten auflistet. Aber nur weil ein bestimmter Codeabschnitt lang ist, macht er keinen schlechten Code. Durch das Aufteilen von Code kann es lesbarer werden, auch wenn es ein wenig länger ist. Lesbarkeit ist wichtiger als Kürze.

1 - Seien Sie konsequent
Sie raw Javascript verwenden von document.getElementById verwenden und dann verwenden Sie später die Jquery Selektoren. document.getElementById('top').value vs $("#top"). Wenn Sie jQuery verwenden, verwenden Sie es überall. JQuery kümmert sich gut um Cross-Plattform-Gemeinheiten auch für Sie

2 - Leer und Lesbarkeit
einige Leerzeichen zwischen den Abschnitten des Codes ein. Trennen Sie die Teile des Codes, die top, top2 und mySelect konstruieren. Whitespaces einzufügen ist ein bisschen eine Kunstform, es gibt keine festen Regeln, aber benutze eine Intuition und dein Code wird nicht wie ein langer, schwierig zu lesender Satz gelesen.

3 - Cache Variablen
Sie erstellen top, top2 und myselect aber lagern sich nicht in Variablen und suchen sie in myFunction wieder auf. Obwohl dies ein triviales Beispiel ist, gewöhnen Sie sich an, Ihre Variablen zwischenzuspeichern, um teure jQuery-Locator-Lookups zu vermeiden. Tun Sie dies sogar für Code, der trivial ist, da Sie nie wissen, wann es tatsächlich einen Unterschied machen wird, bis es zu spät ist.

4 - Vermeidung von Doppel
Vervielfältigung ist der Fluch jeden Programmierer Leben. Bei jeder sich bietenden Gelegenheit werden Sie bösartig und wild davon befreit. Die alert(sonuc); ist sowohl im if als auch im else, kann aber danach verschoben werden. Keine Notwendigkeit, es in beiden zu duplizieren.

Ich habe Ihren Code ein wenig umgeschrieben, nur um die Punkte zu veranschaulichen, die ich gemacht habe.

Abschließend ist die Verbesserung von Code ein fortlaufender, nie endender Prozess, der manchmal ein wenig subjektiv ist. Der beste Weg, die Art, wie Sie Code schreiben, zu verbessern, ist das Üben. Ein sehr guter Rat, der mir gegeben wurde, ist, anderen Code zu lesen, der besser ist als du. Es gibt Unmengen von Repositories auf github mit angesehenen Projekten, die Sie sich ansehen können. Der zusätzliche Vorteil ist, dass Sie sehr viel mehr lernen werden, als nur Ihren Code zu verbessern.

Best of luck

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title></title> 
    </head> 
    <body> 
     <button onclick="myFunction()">do it</button> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script> 
     var body = $("body"); 

     var input1 = $("<input>") 
      .attr("type", "text")   
      .attr("id", "top2"); 

     body.append(input1); 

     var input2 = $("<input>") 
     .attr("type", "text")   
     .attr("id", "top"); 

     body.append(input2); 

     var operation = $("<select>") 
     .attr("type", "text")   
     .attr("id", "mySelect"); 

     body.append(operation); 

     operation.append($("<option>").attr("value", "toplama").text("toplama")); 
     operation.append($("<option>").attr("value", "Çıkarma").text("Çıkarma")); 

     function myFunction() { 
      var sayi1 = $("#top").value(); 
      var sayi2 = $("#top").value(); 
      var sonuc; 
      if ($("#mySelect").val() == "toplama") { 
      sonuc = parseInt(sayi1) + parseInt(sayi2);      
      } 
      else if ($("#mySelect").val() == "çıkarma") { 
      sonuc = parseInt(sayi1) - parseInt(sayi2);      
      } 
      alert(sonuc); 
     } 
     </script> 
    </body> 
    </html>

Quelle

2016-12-09 13:27:25 n4rzul

Es gibt zwei Dinge, die ich zeigen möchte.

Cache jQuery Elemente, die mehrfach verwendet werden. (Um die Leistung zu erhöhen)
Warum Elemente von Javascript erstellen. Erstellen Sie sie direkt HTML-Formular

Ihr Code aussehen sollte

<body> 
    <button onclick="myFunction()">do it</button> 
    <input type="text" value="" id="top2" /> 
    <input type="text" value="" id="top" /> 
    <select id="myselect"> 
     <option value='toplama'>Toplama</option> 
     <option value='çıkarma'>Çıkarma</option> 
    </select> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script> 
     function myFunction() { 
      var sayi1 = document.getElementById('top').value, 
       sayi2 = document.getElementById('top2').value, 
       sonuc, 
       $dropDown = $("#mySelect"); 

      if ($dropDown.val() == "toplama") { 
       sonuc = parseInt(sayi1) + parseInt(sayi2); 
       alert(sonuc); 
      } 
      else if ($dropDown.val() == "çıkarma") { 
       sonuc = parseInt(sayi1) - parseInt(sayi2); 
       alert(sonuc); 
      } 
     } 
    </script> 
</body>

Quelle

2016-12-09 11:43:48 Kenny

Während ich, dass die oben zustimmen eine viel einfachere Art und Weise ist es, die Funktionalität, die ich glaube, zu erreichen Der Punkt der Übung (der in jedem Turorial oder Buch, das er gerade liest) war, so viel wie möglich in Javascript zu tun. denn das ist der Stoff, der gelehrt wird. – n4rzul

Wie funktioniert Code Abkürzung in diesem Programm

Antwort

Verwandte Themen