前端语言听课笔记4：JavaScript编码原则|青训营

JavaScript作为众多编程语言中的一种，它的基本结构与c语言也是很相近的。但是有一点需要注意，即Java与JavaScript并不相同（即使它们的名字中都有Java）。但本文不会详细探讨二者之间的异同点，感兴趣的话可自行上网查找相关内容，本文不再赘述。
本文将探讨的是一项使用JavaScript时最好遵循的原则：各司其责。
所谓各司其责其实就是在编码时让JavaScript去做他自己该负责的事。这样在进行项目的修改或交接时能够方便其他人看出这段代码所对应的原始需求。
举例来说，关于网页的深色模式切换按钮，涉及到JS的代码如下：

const btn = document.getElementById('modeBtn');
btn.addEventListener('click',(e)) => {
    const body =document.body;
    if(body.className !=='night')  {
    body.className = 'night';
    } else {
      body.className = '';
    }
});

可以发现这一小段代码的底层逻辑其实就是一种样式的切换。但是就控制样式这方面的功能，CSS是最合适的。比如CSS的伪类选择器：

#modeCheckBox:checked + .content {
  background-color: black;
  color: white;
  transition: all ls;
}

在前端工程师的实际操作中原则上应当避免不必要的JS直接操作样式，并且对于纯展示类的交互，我们通常寻求零JS的方案。这个原则虽然看上去很简单，但其可应用到的领域还是很广的。践行语言各司其责的原则可以大幅提高日后个人或团队的开发效率。