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

前言

之前学习的也是pink的js，因为最开始是学java的，所以学js感觉没有那么难，急忙忙的向前跑，基础却打的不扎实，在用js刷题的时候才发现自己差的太多，也一直想补补js，这次js的课程就帮我回顾了很多。 这里也推荐官方文档的一篇文章(重新介绍 JavaScript（JS 教程） - JavaScript | MDN (mozilla.org))

各司其职

让 HTML、CSS和 JavaScript 职能分离，HTML是页面的骨架，CSS是页面的皮肤，JavaScript是页面的动作了。我们在写代码的时候应该他们各自负责自己该负责的部分，尽可能的少用 JS 干扰 CSS 和 HTML ，这样的代码才是高质量的。

代码演示：

版本一：

我们在js中操作了body的style，修改了元素的样式和结构，显得结构混乱。 版本二：

这样的逻辑就更为清晰，不要一点一点的操作style里面的每一个元素来进行修改，这也是很笨的做法。在版本二中，js仅仅是修改元素的类名className，描述了这是一个深色（night）模式的状态，这样就便于别人快速理解业务需求，能更直观的表达代码想表达的意思，可读性也提高了。

版本三：

在这个版本中，我们通过 CSS 来完成了效果。让选中状态用伪类选择器#modeCheckBox:checked来标记。这一个版本也是我所欠缺的，在css上还要多下功夫

结论：

• HTML/CSS/JS 各司其责，HTML结构、CSS表现、JS行为
• 应当避免不必要的由 JS 直接操作样式
• 可以用 class 来表示状态
• 纯展示类交互寻求零 JS 方案