个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我刚刚开始学习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
我有一个包含数字和整数的文件，我只想读取整数， 如果它们令人讨厌，请忽略宏，但是我只需要有整数，但是我必须确保还要读取字符串，然后忽略它们 我必须在这里修改什么: #include #include
我有一个这样格式化的txt文件: MyDepartureTown MyDestinationTown 123.45 Vehicle 12 我正在尝试将数据导入到我的 C 程序中。这是我用来实现这一目标
我创建了一个简单的文件，使用 flex，它生成了一个文件 lex.yy.c，现在，我想把它放到 C++ 程序中。 %{ #include %} %% stop printf("Stop co
我的一个程序用 c++ 代码生成一个大文件。有没有办法从另一个C++类调用将生成的代码插入其中？ 这是一个小例子，可以清楚地说明我想要实现的目标。 生成的文件示例: FirstClass first
我需要了解我的程序“检查输入十六进制消息的第三个位置” 程序将采用十六进制值输入消息。例如0x0123456789abcdef 程序将检查输入消息的第三个位置，即 0 现在程序将采用另一条十六进制值的
当我将输入从输入文件重定向到 yacc 程序时，在它完成解析文件后，我希望 yacc 解析器打印其所做操作的摘要。如果我通过键盘输入内容然后按 Ctrl+D，我希望它执行相同的操作。有办法做到这一点吗
我正在扫描该文件，但它有两种不同的结构。 文件: ParisRoubaix "Marco MARCATO" 33 UAD ITA 26 5:43:31 ParisRoubaix "Sam BEWLEY
我想将winsock2.lib 添加到我的程序中，但不希望将其包含到最终的可执行文件中。有什么方法可以让我动态加载与winsock2关联的dll吗？如果没有，是否有任何 dll(Windows 附带)
我尝试了一个基本程序来将数据从数据库表检索到java程序中。编译结束后，运行代码时出现异常。控制台中没有显示错误。显示异常消息 import java.sql.*; public class clas
我想用 C++ 创建一个跨平台安装程序。它可以是任何压缩类型，例如 zip 或 gzip，像普通安装程序一样嵌入程序本身。我不想在不同的平台、linux 和 windows 上创建很多更改。如何跨平台
每次尝试用鼠标输入两个顶点时，我都会崩溃。我最近改变了组织每个形状的方式，以确保新形状与旧形状重叠。 这个项目的想法是制作各种交互式 Canvas 。用户可以在直线、三角形和矩形之间进行选择，然后选择
我想在我的程序中显示以下文本。当我在 python 中粘贴以下文本时，它会将反斜杠解释为转义序列并弄乱我的 ascii 艺术..任何解决这个问题的想法极客。这是我的文本想出现在我的节目中 _ _
我正在尝试加载名为 Tut16_ReadText.txt 的文件，并使其运行程序以输出其重或轻。 我收到了粘贴在下面的错误。我无法抽出时间让这个程序运行。谁能解释一下我必须做什么才能使这个程序正常工作
我想使用命令行将列表作为参数传递，例如: $python example.py [1,2,3] [4,5,6] 我希望第一个列表 [1,2,3] 成为 first_list，[4,5,6] 成为 se
在分析 C# 应用程序时，我发现名为“ThePreStub”的系统 (?) 方法中有相当多的 CPU 使用率。这是什么？ 最佳答案 参见:CLR Inside out - The Performanc
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this qu
我正在用 Python 开发一个游戏，想知道如何给它自己的图标。我使用的是 Windows 计算机，没有安装 Python 的额外东西。哦，我也在使用 3.3 版，这甚至可能吗？ P.S 我在 Sta
我正在使用 tkinter 使用 Python 开发一个项目，该项目将允许对 IP 地址进行地理定位。我有原始转换，我可以获取 IP 地址并知道城市、州、国家、经度、纬度等。我想知道是否有任何方法可以
我编写了一个程序，您可以在其中选择任意数字并将其与任意数字的幂相关联。代码运行正常，直到它到达某个部分，然后我必须输入一个字符以使其移动到代码的下一部分。这就是我的意思: #include int
我正在编写“HACKING Art Of Exploitation”一书练习 Convert2.c 第 61 页。 这是我的代码。下面是我的问题。 #include void usage(char
我是一名优秀的程序员,十分优秀！