仅使用函数来引用 DOM 元素

Question

我正在从一本书中学习 JS，作者经常使用函数来引用 DOM 元素，如下所示：

const navItems = () => document.querySelectorAll("nav li");

为什么他不只是声明一个这样的变量：

const navItems = document.querySelectorAll("nav li");

以我迄今为止的经验，它对代码几乎没有什么影响，只是你必须使用括号来调用函数。 出于某种原因，第一个被认为是更好的风格吗？

Answer 1

const navItems = () => document.querySelectorAll("nav li");

navItems是一个 function ，只要您想获取元素，就可以像navItems()一样调用它。

const navItems = document.querySelectorAll("nav li");

这里的navItems是一个变量，如果在定义后添加任何li项目，则不会返回实时计数。

Answer 2

在保持相同内容的网站中，两者之间没有区别。 但是，在更复杂的站点中，可能会在页面加载后动态添加元素，第一种方法将具有更新的值，而第二种方法则不会。 如果添加新元素，第一个只会是更好的样式。