Javascript学习 | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 3 天

本节课的课程重点是JavaScript好代码的标准以及HTML/CSS/js各司其职的内容，通过“深夜食堂”这个小栗子更好的理解。

介绍

前端三大件HTML/CSS/js，其中HTML负责结构，css负责样式，js负责行为。在编写页面时，要遵守各司其职的原则，这样的优点是便于后续代码的阅读和维护，同时提高代码的可读性。

各司其职

实现页面白天和黑夜样式的转换，点击太阳转换成黑夜，点击月亮转换成白天，同时字体颜色和背景同时改变

深夜食堂版本一

const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
  const body = document.body;
  if(e.target.innerHTML === '🌞') {
    body.style.backgroundColor = 'black';
    body.style.color = 'white';
    e.target.innerHTML = '🌜';
  } else {
    body.style.backgroundColor = 'white';
    body.style.color = 'black';
    e.target.innerHTML = '🌞';
  }
});

在版本一中，是我们最容易想到的一种方式，直接使用js去操作DOM,但是这种方式虽然可以实现功能，但是页面性能却不可以，而且js代码中做了css的事情，导致代码在后期维护时，如果需要对样式改进时，改动的代码会很多，根据各司其职的思想，尽量使js完成功能逻辑上的操作。

版本二

#modeBtn::after {
  content: '🌞';
}
body.night {
  background: black;
  color: white;
  transition: 1s;
}
body.night #modeBtn::after {
  content: '🌜';
}

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

在版本二中，利用伪类::after和content配合，同时在body中添加night类，实现样式的变化，这样的作法，减少了js操作DOM和css，各司其职，使代码便于维护。
实现思路：添加night类，利用伪类::after搭配content实现按钮的转换。在js中，为按钮添加监听事件，判断document.className是否存在，存在时值为''表示不添加任何样式，保留原来样式，否则为其添加night样式，实现黑夜白天的转换效果。

版本三

<input id="modeCheckBox" type="checkbox">
<div class="content">
  <header>
    <label id="modeBtn" for="modeCheckBox"></label>
    <h1>深夜食堂</h1>
  </header>
</div>

body {
  margin: 0;
}
.content {
  height: 100%;
  padding: 18px;
  transition: 1s;
}
div.pic img {
  width: 100%;
}
#modeCheckBox {
  display: none;
}
#modeCheckBox:checked+.content {
  background-color: black;
  color: white;
}
#modeBtn {
  font-size: 2rem;
  float: right;
  cursor: pointer;
}
#modeBtn::after {
  content: '🌞';
}
#modeCheckBox:checked+.content #modeBtn::after {
  content: '🌜';
}

由于功能主要是用于现实的，因此可以使用html和css直接实现，从而不使用js，在版本三中，利用input类型为checkbox，利用for与按钮进行关联，在css中将input进行隐藏，利用input的checked和相邻兄弟选择器实现功能。

总结

写好js的一些原则：

css、html、js各司其职
尽量避免js直接操作DOM和css样式
善于利用css中的选择器（这个不是很熟悉，后面继续学习从这个小栗子中对::after更加熟悉了）