时间戳

首页 > 解决方案 > 如何使这些功能更短

javascript - 如何使这些功能更短

问题描述

我正在制作一个简单的计算器，每个数字有两个输入框，下面的每个操作有四个按钮。按下其中一个按钮（例如：添加）后，他们将执行操作。但是，在每个函数中，我必须继续编写这两行：

var Value1 = document.getElementById('Value1').valueAsNumber;
var Value2 = document.getElementById('Value2').valueAsNumber;

在制作每个单独的功能之前，有没有办法可以编写这些？有更多技能的人可以告诉我我能做什么吗？

function add() {
    var Value1 = document.getElementById('Value1').valueAsNumber;
    var Value2 = document.getElementById('Value2').valueAsNumber;
    var Total = Value1 + Value2;
    document.getElementById('demo').innerHTML = "Total: " + Total;
}
function sub() {
    var Value1 = document.getElementById('Value1').valueAsNumber;
    var Value2 = document.getElementById('Value2').valueAsNumber;
    var Total = Value1 - Value2;
    document.getElementById('demo').innerHTML = "Total: " + Total;
}
function mul() {
    var Value1 = document.getElementById('Value1').valueAsNumber;
    var Value2 = document.getElementById('Value2').valueAsNumber;
    var Total = Value1 * Value2;
    document.getElementById('demo').innerHTML = "Total: " + Total;
}
function div() {
    var Value1 = document.getElementById('Value1').valueAsNumber;
    var Value2 = document.getElementById('Value2').valueAsNumber;
    var Total = Value1 / Value2;
    document.getElementById('demo').innerHTML = "Total: " + Total;
}
First Number: <input type="number" id="Value1"><br><br>
Second Number: <input type="number" id="Value2"><br><br>

<button type="button" onclick="add()">Add</button>
<button type="button" onclick="sub()">Subtract</button>
<button type="button" onclick="mul()">Multiply</button>
<button type="button" onclick="div()">Divide</button>
<p id="demo" style="color:red;font-size:20px"></p>

标签： javascriptfunction

解决方案

在制作每个单独的功能之前，有没有办法可以编写这些？

您可以只获取一次元素：

const input1 = document.getElementById("Value1");

然后当你需要它的价值时：

const value1 = input1.valueAsNumber;

一般来说，您通常可以编写一个函数来避免重复的逻辑。在这种情况下可能不合适，但例如：

function getValueAsNumber(id) {
    return document.getElementById(id).valueAsNumber;
}

然后

const value1 = getValueAsNumber("Value1");

一些旁注：

  • 在 JavaScript 和相关语言中，压倒性的约定是对不引用构造函数的变量使用首字母小写字母。所以value1而不是Value1，value1Element而不是Value1Element等等。
  • var不再是 JavaScript 中的最佳实践。在新代码中，更喜欢let或const因为它们更有用的作用域。
  • 当只将纯文本放入元素中时，最好使用textContent而不是innerHTML，因为浏览器不会尝试将您提供的文本解析为 HTML。
  • onxyz-attribute-style 事件处理程序不是最佳实践，尤其是因为它们调用的函数必须是全局的，并且全局命名空间很拥挤。考虑使用现代事件处理（addEventListener等等）。

仅举一个例子，这是您的代码，其中应用了上述一些内容，但没有过火：

const gid = id => document.getElementById(id);
const input1 = gid("Value1");
const input2 = gid("Value2");
const demo = gid("demo");

gid("add").addEventListener("click", () => {
    const total = input1.valueAsNumber + input2.valueAsNumber;
    demo.textContent = "Total: " + total;
});

gid("sub").addEventListener("click", () => {
    const total = input1.valueAsNumber - input2.valueAsNumber;
    demo.textContent = "Total: " + total;
});

gid("mul").addEventListener("click", () => {
    const total = input1.valueAsNumber * input2.valueAsNumber;
    demo.textContent = "Total: " + total;
});

gid("div").addEventListener("click", () => {
    const total = input1.valueAsNumber / input2.valueAsNumber;
    demo.textContent = "Total: " + total;
});
First Number: <input type="number" id="Value1"><br><br>
Second Number: <input type="number" id="Value2"><br><br>
<button type="button" id="add">Add</button>
<button type="button" id="sub">Subtract</button>
<button type="button" id="mul">Multiply</button>
<button type="button" id="div">Divide</button>
<p id="demo" style="color:red;font-size:20px"></p>

或者我们可以抽象出除操作本身之外的所有内容（只是为了好玩）：

const gid = id => document.getElementById(id);
const input1 = gid("Value1");
const input2 = gid("Value2");
const demo = gid("demo");
const clickHandler = (id, operation) => {
//                        ^^^^^^^^^
    gid(id).addEventListener("click", () => {
        const total = operation(input1.valueAsNumber, input2.valueAsNumber);
        //            ^^^^^^^^^
        demo.textContent = "Total: " + total;
    });
};
clickHandler("add", (a, b) => a + b);
//                  ^^^^^^^^^^^^^^^
clickHandler("sub", (a, b) => a - b);
clickHandler("mul", (a, b) => a * b);
clickHandler("div", (a, b) => a / b);
First Number: <input type="number" id="Value1"><br><br>
Second Number: <input type="number" id="Value2"><br><br>
<button type="button" id="add">Add</button>
<button type="button" id="sub">Subtract</button>
<button type="button" id="mul">Multiply</button>
<button type="button" id="div">Divide</button>
<p id="demo" style="color:red;font-size:20px"></p>

你甚至可以走得更远，但它开始变得难以遵循。:-)

推荐阅读