变量声明后的三元条件考虑了使用StandardJS时的不良做法

Question

在使用JS标准(没有分号)时，我遇到了一个有点令人困惑的问题，我认为下面的代码出错了：

window.onload = function () {
  var menu = document.getElementById('menu')
  (window.pageYOffset > 10)
    ? menu.classList.add('scrolled')
    : menu.classList.remove('scrolled')
}

这会在控制台中产生一个document.getElementById is not a function错误，并在var声明的末尾添加一个分号来修复它。我想知道的是，如果使用的是JS编码标准，那么上面的代码是否不是一个好的模式，或者在某种程度上是错误的。

更新：好的，所以我想，就标准而言，做以上操作的正确方法是：

  var menu = document.getElementById('menu')
  ;(window.pageYOffset > 10)
    ? menu.classList.add('scrolled')
    : menu.classList.remove('scrolled')

链接：https://standardjs.com/rules.html#semicolons

Answer 1

问题在于JS需要如何在没有分号的情况下解释代码：

var menu = document.getElementById('menu')
(window.pageYOffset > 10)
    ? menu.classList.add('scrolled')
    : menu.classList.remove('scrolled')

删除空格后，您可以像这样重新组织它：

var menu = document.getElementById('menu')(window.pageYOffset > 10)
    ? menu.classList.add('scrolled')
    : menu.classList.remove('scrolled');

因此，现在JS将尝试将非a函数document.getElementById('menu')调用为一个函数，以查看它是否返回一个值，然后计算您的if，此时将弹出错误。

Answer 2

另一个想法是使您的三元组更特定于实际切换的内容，并使用返回值来选择方法：

var menu = document.getElementById('menu')
menu.classList[window.pageYOffset > 10 ? 'add' : 'remove']('scrolled')

这样你就不用重复你自己了，你就可以把这个问题放在一起了。