变量声明后的三元条件在使用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将尝试将非函数document.getElementById('menu')作为函数来调用它是否返回一个值，然后评估你的if，此时你的错误会弹出。

Answer 2

另一个想法是使您的三元组更具体地实现您实际切换的内容并使用返回值来选择方法：

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

这样你就不必重复自己了，而且你可以将这个问题全部放在一起。