如何学好JS（上） | 青训营笔记写好JS的原则：职能分离（HTML，CSS，JS各司其职），组件分装（将页面变成一个个

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

写好JS的原则

让HTML、CSS和JS职能分离。

JS是行为，CSS是表现，HTML是结构，结构表现行为分离。JS不应直接控制CSS的内容。可以利用class表示状态，来连接JS与CSS。在主要展示样式的情况下，可以尽量减少JS的使用

例子：更改页面背景颜色

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

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

从第一种变到第二种，好处在于：~~首先，代码变少了~~，JS可以只对className进行操作，就能改变页面背景，具体的样式更改在CSS中完成，符合各司其职的原则。第一种代码虽然也能完成页面背景转换，但是JS直接对样式进行了操作。这样做会可读性变差，可能不只其他程序员读不懂，半年之后的自己也读不懂。

再分离的更彻底一点：只使用CSS就能实现该功能（加入checkbox）

  width: 100%;
  height: 100%;
  max-width: 600px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body {
  box-sizing: border-box;
}

.content {
  height: 100%;
  padding: 10px;
  transition: background-color 1s, color 1s;
}

div.pic img {
  width: 100%;
}

#modeCheckBox {
  display: none;
}

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

#modeBtn {
  font-size: 2rem;
  float: right;
}

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

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

组件封装

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

例子：电商轮播图

基本方法

结构设计
展现效果
行为设计
1. API （功能）
2. Event （控制流）

如何改进：三次重构

1. 插件化：解耦

将控制元素抽取成插件
插件与组件之间通过依赖注入方式建立联系

2. 模板化

将HTML模板化，更易于扩展

3. 抽象化（组件框架）

将组件通用模型抽象出来

如何学好JS（上） | 青训营笔记