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

JS各司其职

引力（仿老师代码）实现夜间模式切换

<!DOCTYPE html>
<html lang="en">
<head>
  <title>深夜食堂</title>
</head>
<body>
  <header>
    <button id="modeBtn">😊</button>
    <h1>深夜食堂</h1>
  </header>
  <main>
    <div class="pic">
      <img src="https://t7.baidu.com/it/u=88572622,1112425149&fm=218&app=126&size=f242,150&n=0&f=GIF?s=A2C29C4F563697CE42E439880300C080&sec=1673974800&t=076786e370090d4ce6cde2e024d0a988" />
    </div>
    <div class="description">
      <p>
        测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
      </p>
    </div>
  </main>
</body>
</html>

body,html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body {
  padding: 10px;
  box-sizing: border-box;
}
div.pic img {
  width: 100%;
}
#modeBtn {
  font-size: 2rem;
  float: right;
  border: none;
  background: transparent;
}

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 = '😊';
  }
});

存在的问题？如何改进

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

对比：版本1中我们使用JS来控制了CSS，也就是说JS做了CSS该做的事情。而我们追求的则是各司其职，这样在后面改动需求比较方便。

小结

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

组件封装

组件是指web页面上抽出来一个个包含模板（HTML），功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。

实现组件化的步骤

结构设计
展现效果
行为设计

三次重构

插件化、模板化、抽象化

过程抽象

过程抽象：处理“局部细节控制”的一些方法。何为“局部细节控制”？在前端业务逻辑中，经常会有“点击事件”的功能需求，如轮播图中的左右按钮、点击发送请求获取数据...若用户频繁触发点击事件，则会出现不可预估的错误，对于这种情况，我们就需要对该点击事件进行“防抖”处理，即让事件在一定的时间后再执行，若中间被多次触发，则重新计时，这样就可以限制用户因为频繁触发而导致事件回调多次执行的现象。

JS总结 ｜ 青训营笔记