变量声明后的三元条件被认为是使用 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 编码标准，上面的代码是否不是一个好的模式或在某些方面是错误的。

更新： 好吧，所以我想正确的方法，标准 js-wise，做上面的是：

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

Link: 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 将尝试调用 not-a-function document.getElementById('menu') 作为函数来查看它是否 returns 一个值然后评估您的 if，此时您的错误弹出。

Answer 2

另一个想法是使您的三元组更具体地针对您实际切换的内容，并将 return 值用于 select 方法：

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

这样您就不必重复自己，并且可以一起回避这个问题。

变量声明后的三元条件被认为是使用 StandardJS 时的不良做法

Ternary condition after variable declaration considered bad practice when using StandardJS

javascript

ternary-operator