javascript - 如何在 JS 中保持箭头函数小而易读？

Question

我完成了一个关于如何使用 JS 和 HTML/CSS 在浏览器中制作俄罗斯方块游戏的教程，但我无法理解作者对 JS 部分的编码实践是否良好，如果不是，如何改进它们。为清楚起见，可以在此处找到相关代码：https ://github.com/kubowania/Tetris-Basic/blob/master/app.js

我从阅读中了解到，作者创建了一个箭头函数，该函数在加载所有 DOM 内容并且游戏的所有功能都存在时运行。我不明白的是，为什么他们只是将所有变量、函数和事件侦听器看似随意地扔到一个函数中。我认为这很难遵循并想学习如何改进它——这样的最佳实践是什么？有没有办法在文件或其他 JS 文件的其他地方声明函数和变量？还是我不正确，这对 JS 来说是可以接受的？

标签： javascriptarrow-functionsreadability

Answer 1

我假设您正在谈论文件如何以以下方式开头：

document.addEventListener('DOMContentLoaded', () => {

它工作得很好，但可能是随着时间的推移而发展起来的事情之一。（至少，我经常在事件处理程序中用 2 或 3 行代码编写这行确切的代码，然后几天后其中有 100 个东西，是时候清理一下了。）

还是我不正确，这对 JS 来说是完全可以接受的？

语言不在乎。是否可以接受取决于您和使用相同代码的人员。

对于这样的事情，最佳做法是什么？

通常将事物分解为模块。在我看来，这个代码示例只是……一个示例。使用打包程序处理模块可能超出了简单教程的范围。参加 Udemy 课程的人可能更容易将这一切集中在一个地方。