Question

我刚开始学习javascript

以下是我的代码。
我觉得它太长了所以我需要帮助缩短它。

<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>

如何改进此javascript代码？
我该怎么办？

Answer 1

只需快速扫描代码我就会注意到一些可以改进的内容，我将在下面列出。但是，仅仅因为一段特定代码很长，并不会使代码变坏。分解代码可以使它更具可读性，即使它更长一点。可读性比简洁更重要。

1 - 保持一致 您使用document.getElementById使用原始javascript，然后使用jquery选择器。 document.getElementById('top').value vs $("#top")。如果您打算使用jquery，请在任何地方使用它。 Jquery也很好地照顾了跨平台的恶意软件

2 - 空白和可读性 在代码的各个部分之间插入一些空格。分隔构造top，top2和mySelect的代码片段。插入空格的位置是一种艺术形式，没有严格的规则，但是使用一些直觉，你的代码不会像一个难以阅读的句子那样阅读。

3 - 缓存变量
您创建了top，top2和myselect，但不将它们存储在变量中，而是在myFunction中重新查找它们。虽然这是一个简单的例子，但要养成缓存变量的习惯，以避免代价高昂的jquery定位器查找。甚至对于那些微不足道的代码也要这样做，因为你永远不知道什么时候实际上会产生影响，直到为时已晚。

4 - 避免重复 复制是任何程序员生活的祸根。在你获得的每一个机会中，狠狠地和凶猛地摆脱它。 alert(sonuc);位于if和else中，但可以移到其后。无需在两者中复制它。

为了说明我的观点，我稍微重写了你的代码。

最后，改进代码是一个持续的，永无止境的过程，有时候有点主观。改进编写代码方式的最佳方法是继续练习。给我的一个非常好的建议是阅读比你更好的其他人的代码。 github上有大量的存储库，有很多值得尊重的项目，您可以仔细阅读。额外的好处是，您最有可能学到的不仅仅是如何改进代码。

祝你好运

<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>

Answer 2

我想指出两件事。

缓存多次使用的jQuery元素。（提高绩效）
为什么要从javascript创建元素。直接从html

您的代码应该是

function formattedDate(seperator) {
  var vandaag = new Date(),
      month = '' + (vandaag.getMonth() + 1),
      day = '' + vandaag.getDate(),
      year = vandaag.getFullYear();
  if (month.length < 2) month = '0' + month;
  if (day.length < 2) day = '0' + day;
  return [day, month, year].join(seperator);
}
document.write('<br> Vandaag met (-) :  ' + formattedDate('-')); 
document.write('<br> Vandaag met (/):  ' + formattedDate('/'));
document.write('<br> Vandaag met (+):  ' + formattedDate('+'));
document.write('<br> Vandaag met (=):  ' + formattedDate('='));
document.write('<br> Vandaag met (----):  ' + formattedDate('----'));
document.write('<br> Vandaag met (POKEMON):  ' + formattedDate('POKEMON'));

如何在此程序中使用Code缩写

2 个答案: