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

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

本堂课重点内容

今天的JavaScript课程从实践的角度去讲解JavaScript的编码原则：各司其责、组件封装和过程抽象。通过现实具体例子“left-pad 事件”来说明判断一段代码的好坏不能单方面从代码的写法去判断，也讲解了编码的操作规范。

1. 如何写好 JavaScript
2. 代码质量优化

详细知识点介绍

如何写好 JavaScript

想要写出一段好的 JavaScript 代码，可从各司其责、组件封装和过程抽象三个方面来考虑。这里主要详细记录各司其责。

各司其责

一个页面由HTML、CSS和JavaScript组成，各司其责就是让每个部分做他自己所负责的那个功能，让HTML、CSS和JavaScript职能分离。

通过一个简单的主题色切换的例子来说明。

先看看版本一

// 核心代码
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样式，虽然能实现功能，但并不符合我们的各司其责的原则，下面我们看看版本二。

版本二

// 核心代码
if (body.className !== 'night') {
  body.className = 'night'
} else {
  body.className = ''
}

在版本二中我们只修改了其类名，通过不同的类名来展示不同的主题色，样式最终由css进行修改。同时通过类名可以直观的看出当前处于什么模式。虽然样式最终是由css进行的修改，但还是由js修改了类名，那么能不能只用css实现该功能呢？有，直接看版本三 版本三

/* 核心代码 */ 
#modeCheckBox {
  display: none;
}

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

可以看到，完全由css的代码就可实现主题色的切换（可能需要对css选择器有一定的了解），并且其代码符合各司其责的编码原则。

课后个人总结

JavaScript一样是基础，但是会使用不代表其代码写得好，这次的课程从实际例子的角度出发，一步一步去深入讲解如何写好JavaScript，从各司其责到组件封装，再到过程抽象。不仅仅是JavaScript的编码原则，其实也是其他各个语言的编码原则。