个人中心
gpt4 book ai didi

javascript - 如何在该程序中进行代码缩写

转载 作者：行者123 更新时间：2023-12-03 05:28:13 24 4
gpt4 key购买 nike

我刚刚开始学习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 代码？
我应该做什么？

最佳答案

只要快速扫描代码，我就会发现一些可以改进的地方，我将在下面列出。然而，仅仅因为一段特定的代码很长，并不意味着它就是糟糕的代码。分解代码片段可以使其更具可读性，即使它有点长。可读性比简洁性更重要。

1 - 保持一致
您通过 document.getElementById 使用原始 javascript，然后使用 jquery 选择器。 document.getElementById('top').value与 $("#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>

关于javascript - 如何在该程序中进行代码缩写，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41059467/

24 4 0
文章推荐： javascript - 将光标放在文本框中 Angularjs addmode
文章推荐： 带进度条的 WPF SplashScreen
文章推荐： asp.net-mvc - 当我调试 ASP.NET MVC 应用程序时，为什么 Application_Start() 事件不触发？
文章推荐： javascript - FileSaver.js 中的换行符
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com