这是我参与「第四届青训营 」笔记创作活动的第4天

写好JavaScript

一定要对自己的代码上心，不能说只是解决问题，应当去寻找最优解

三个原则 ：

• 各司其则 ： HTML、CSS、JavaScript职能分离
• 组件封装 ： 好的UI组件具备正确性、扩展性、复用性
• 过程抽象 ： 应用函数式变成思想

各司其则

首先考虑项目是否可以将HTML、CSS、JavaScript的职能分离，避免不必要的JS代码去操作样式，按照结构，表现，行为方式划分

一个项目中我们需要去更改HTML的样式，我们初学首先想到的肯定是利用JS代码去更改HTML对应的属性，其次往更好的方向去想，我们可以划分类名，通过使用JS去更改类名来达到目的，此时方案确实比第一种要优雅许多，但是我们可以在细想，这个只是单纯的更改样式，那么我们是否能够通过不使用JS，只使用CSS去更改样式囊？答案当然是可以的！我们可以利用checkbox 去控制元素点击与否，利用伪元素去更改元素内容，此时同样可以实现想要的效果。（下面附上样例关键代码）

<input id="modeCheckBox" type="checkbox">
<label id="modeBtn" for="modeCheckBox"></label>

//将input选择框隐藏起来，使其不占有位置
#modeCheckBox {
  display: none;
}
//通过伪类选择器+兄弟选择器 选择变化主题的盒子，下面主题标识变化同理
#modeCheckBox:checked + .content {
  background-color: black;
  color: white;
  //这里利用过渡，让主题变化平滑
  transition: all 1s;
}

#modeBtn::after {
  content: '🌞';
}

#modeCheckBox:checked + .content #modeBtn::after {
  content: '🌜';
}

通过label标签的绑定,扩大checkbox选择范围,来控制checkbox的选择与否,进而控制元素样式和内的更改。

结论

• HTML/CSS/JS各司其责
• 应当避免不必要的有JS直接操作元素样式
• 可以用class来表示状态
• 纯展示类交互寻求零JS方案