这是我参加[第五届青训营]伴学笔记创作第四天

一、本堂课的重点

如何写好JavaScript？
1. 各司其责
2. 组件分离
3. 过程抽象

二、各司其责？

2.1 名词解释：

简单来说在JavaScript中各司其责就是让HTML，CSS，JavaScript各干各的，具体来说HTML负责结构，CSS负责样式，JS负责行为。

2.2 深色模式转化例子：

写一段代码，控制一个网页，让其接受深色和浅色两种状态
实现效果如下：

版本一：

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来控制css中的样式，从而来实现深色和浅色的转化。这种方式虽然实现了效果，但是不灵活，不能满足客户多样化需求。
版本二：

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

这个版本相比版本一比较简单，是用className这个属性来控制的，但是还可以更加优化。
版本三：


#modeCheckBox {
  display: none;
}

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

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

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

因为转化深色还是浅色，说白了就是改变样式，所以也可以用css来实现模式的转化。
通过这个案例，可以说HTML，CSS，JavaScript各司其职是很重要的，可以避免直接用js来操作样式。当然“最重要的”不仅可以显示自己的专业素养，提升团队的码代码的速率，还可以“前人栽树，后人乘凉”。

三、组件封装

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

那我们学习的比较典型的例子就是，一些网站上面的轮播图。代码较多不展示了。

3.1 轮播图的例子：

轮播图简单来说就是三步：

用HTML（ul>li）做结构
用CSS（绝对定位）来做图片重叠的效果
用js来做行为设计，由API 功能和Event控制流

那么有了这个例子，做组件封装的步骤跟上面的步骤差不多：

遵循组件封装的原则
结构设计
展示效果
行为设计
三次重构等

跟着月影学JavaScript | 青训营笔记