如何在JS中保持箭头函数的小巧和可读性？

Question

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

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

Answer 1

我假设您谈论的是这个文件是如何开始的：

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

它工作得很好，但可能是随着时间的推移而增长的东西之一。(至少，很多时候我在事件处理程序中只用两三行代码就编写了这行代码，几天后就有了100行代码，是时候清理一下了。)

还是我错了，这对于JS来说是完全可以接受的？

语言并不关心。它是否可接受取决于您和使用相同代码的人员。

对于这样的事情，最佳实践是什么？

把事情分解成模块是很常见的。在我看来，这个代码示例只是...举个例子。使用绑定器来处理模块可能超出了简单教程的范围。对于参加这个Udemy类的人来说，把所有这些都放在一个地方可能更容易。