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

今天学习了JS编程的三大重要原则：各司其责、组件封装、过程抽象。
一个优秀的前端工程师应该具备写出规范、清晰的代码的能力。而本文从三个方面介绍了编程的三大原则，并通过举例加深理解。

各司其责

三大件中HTML负责结构，CSS负责表现，JS负责行为。各司其责指的是讲不同的功能分给响应的语言来完成。

实现界面白天和夜间模式的切换。

切换成：↓ （再次点击可以切回）

首先利用基础的DOM API可以写出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 = '🌞';
  }
});

即给点击的button绑定点击事件，如果button的文本是太阳，则修改body样式背景为黑色，字体为白色。反之则修改字体为白色，背景为黑色。与此同时修改文本内容。但是这样做不够直观，因为用JS修改了一些样式的内容，并不能直接让人看出是在干什么，这个对应什么需求？于是可以写出第二版：

body.night {
  background-color: black;
  color: white;
  transition: all 1s;
}

#modeBtn::after {
  content: '🌞';
}
body.night #modeBtn::after {
  content: '🌜';
}

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

这里简化了JS代码，给button绑定点击事件的内容是，修改body的样式类名，这样可以很容易看出，我们这个按钮的功能就是修改body的样式类，换成另一个样式。同时在CSS文件中添加了要修改的night样式，即不点击按钮时用默认样式，点击后修改为night样式。同时给button添加伪类::after，在每次点击按钮之后，修改button元素的content。

再进一步想一下，我们这个功能其实只涉及修改样式，只修改样式的话可以只用CSS完成即可。这一版代码没有JS也可以完成。

#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: '🌜';
}

这里往html中添加一个checkedbox，通过checkedbox的勾选状况来决定展示什么样式。CSS中通过兄弟节点来控制content的文本内容。

结论

HTML/CSS/JS负责各自的功能
避免直接用JS操作样式
可以用class类表示状态
纯展示类的页面，追求0JS完成

组件封装

组件是指页面上抽出来一个包含模板、样式和功能的单元。

组件设计原则：封装性、正确性、扩展性、复用性
实现组件的步骤：结构设计、展现效果、行为设计
三次重构：插件化、模板化、抽象化（组件框架）

这样写没有破坏各司其责的原则，HTML/CSS/JS可以写在一个文件里，仍然是负责各自的功能。

过程抽象

过程抽象是处理局部细节控制的一些方法。

命令式和声明式编程

命令式：

let list=[1,2,3,4];
let map=[];
for(let i=0;i<list.length;l++){
    map.push(list[i]*2);
}

声明式：

let list=[1,2,3,4];
const double=x=>x*2;
list.map(double);

JS代码质量优化

写代码时的关注点：风格/效率/约定/使用场景/设计
其中需重点关注使用场景，科学得出代码写得好与不好。

前端JS编码原则 | 青训营笔记