在方括號中使用classList方法

將方括號中的classList方法視爲良好實踐嗎？我的意思是，有時候我喜歡做的事：在方括號中使用classList方法

elem.classList[ifTrue ? 'add' : 'remove']('className');

，而不是：

if (ifTrue) { 
    elem.classList.add('className'); 
} else { 
    elem.classList.remove('className'); 
}

此外，沒有使用括號對代碼執行的性能/速度產生任何影響？

2015-04-01 covfefe

我不知道性能方面的問題，但最重要的表示法很難閱讀，而且不夠靈活。性能差異（如果有的話）可能會很小。 – ryanyuyu 2015-04-01 19:07:56

第一部分（良好做法）是基於意見的（我的投票：請不要寫這個，你殺了可讀性）。第二部分（性能）將（a）取決於正在使用的JS引擎（b）可能是微不足道的差異（c）甚至可能更糟。記住它，看看，但真的請不要代表未來的代碼維護者。 – 2015-04-01 19:08:30

把方括號裏面的classList方法放在了認爲是好的做法？

它沒有什麼錯。它更短，更簡潔，沒有代碼重複。正如你所說，你有時更喜歡它 - 如果你知道什麼時候使用，什麼時候不使用，那麼它很好。這些因素是：

可讀性。基於多數意見。我喜歡它，其他人不喜歡。瞭解你的觀衆，我不會爲新手提出這個建議。
可維護性。當根據ifTrue需要完成其他事情時，我會選擇if-else。另一方面，elem.classlist和'classname'的重寫也不是最優的。
性能。第二個更有可能被優化（因爲靜態方法名稱），這是真的。但是在執行速度上幾乎沒有可衡量的影響，因爲最重要的工作是在DOM中完成的。無論如何，你並沒有在性能關鍵的部分使用這段代碼。（你呢？然後基準）。

有雖然是完全不同的，更好的第三種方式：使用toggle method of classlists。它確實需要第二個參數來做你想做的事情：

elem.classList.toggle('className', ifTrue);

它只是爲這個非常常見的情況而發明的！無可否認，由於許多開發人員不知道toggle的功能，因此可讀性更差。

2015-04-01 19:14:16 Bergi

回答