JS 迷你函数

Question

在 JavaScript 中使用迷你函数是否值得？例子：

function setDisplay(id, status) {
    document.getElementById(id).style.display = status;
}

之后，每次你想要操作任何给定对象的显示属性时，你可以调用这个函数：

setDisplay("object1", "block");
setDisplay("object2", "none");

以这种方式编码会有什么好处吗？

如果多次更改该特定属性，它将减少文件大小并因此减少页面加载时间。或者每次调用该函数都会给处理带来额外的负担，这会使页面加载更慢？

Answer 1

值得在 JavaScript 中使用迷你函数吗？

是的。如果做得好，它将在以下方面得到改进：

• 分离关注点。例如，一组这样的函数可以为涉及表示（显示）的内容创建一个抽象层。仅包含大量将详细 DOM 操作与业务逻辑相结合的指令的代码并不是最佳实践。

• 仅编码一次。一旦你遇到了可以多次调用这样的函数的情况，你就已经获益了。当您没有（大量）代码重复时，代码维护会变得更容易。

• 可读性。通过为这些函数提供精心选择的名称，可以使代码更加易于解释。

关于你的例子：

function setDisplay(id, status) {
    document.getElementById(id).style.display = status;
}

[...]

setDisplay("object1", "block");
setDisplay("object2", "none");

这个例子还可以改进。遗憾的是，第二个论点与实施方面密切相关。当谈到“关注点分离”时，最好用布尔值替换该参数，因为本质上您只对开/关功能感兴趣。其次，该函数应该是容错的。所以你可以这样做：

function setDisplay(id, visible) {
    let elem = document.getElementById(id);
    if (elem) elem.style.display = visible ? "block" : "none";
}

setDisplay("object1", true);
setDisplay("object2", false);

以这种方式编码有什么好处吗？

绝对地。

会[它]减少文件大小...

如果您多次调用同一函数：是的。但这不是您应该非常关心的指标。如果我们专门谈论“单行”功能，那么在现代基础设施上几乎不会注意到尺寸的增加。

...以及页面加载时间

它不会对页面加载时间产生明显影响。

每次调用该函数都会给处理带来额外的负载，这会使页面加载更慢吗？

不，不会的。函数调用的开销很小。即使您有数百个这样的函数，您也不会看到任何性能下降。

其他考虑因素

当您定义此类函数时，值得付出额外的努力来使这些函数变得健壮，以便它们可以优雅地处理不寻常的参数，并且您可以依赖它们而无需返回它们。

将它们分组为模块，其中每个模块处理应用程序的一层：表示、控制、业务逻辑、持久性……

Answer 2

如果多次更改该特定属性，它将减少文件大小，从而减少页面加载时间。或者每次调用该函数都会给处理带来额外的负载，这会使页面加载速度更慢？

它不会使页面加载速度变慢。用vanilla js到处添加几行不会影响页面加载时间，毕竟页面的加载时间是加载html js和css文件的时间，所以js中的几行不会影响它。性能问题不太可能发生，除非您正在做一些真正需要进行大量计算或大量递归的事情。

值得在 JavaScript 中使用迷你函数吗？

我认为 - 是的。您不想在不必要的时候过度使用它，毕竟您不想在函数中编写每一行代码，对吧？在许多情况下，创建迷你函数可以提高代码的简洁性和可读性，并且可以使编码变得更容易、更快。

您es6可以使用单行函数，非常好且简单：

const setDisplay = (id, status) => document.getElementById(id).style.display = status;