这是我参与「第四届青训营 」笔记创作活动的的第4天
写好JS的三大原则之「各司其责」
大家好，这里是听完上午月影老师的课程就赶紧停下整理吸收的Vic，上午的课程可以说是干货满满，相信各位听了课程的同学都收获颇丰。在这里Vic将分三篇文章来给大家带来上午课程的全部攻略。
首先介绍上午的课程，上午的课程主要讲解了写好JS的三大原则，分别为各司其责、组件封装、过程抽象。
在这里首先给大家讲解各司其责的原则。
什么是各司其责原则呢？
指的是让HTML、CSS和JavaScript职能分离，HTML只负责结构，CSS只负责样式，JavaScript只负责页面的行为。
在各司其责原则中，月影老师使用了深色/浅色模式切换作为案例来进行讲解，在这里，我们同样使用这个例子进行讲解（注：本文使用的代码为月影老师上课的源码）。
新手版本
对于新手来说，常常使用JS操作DOM的方法来实现这个效果，代码如下：
可以看到在代码中使用的是通过JS中的DOM语句来修改页面样式的。这严重违反了各司其责的原则，其中的JS代码既修改了元素的样式，也修改了元素的结构。
进阶版本
为了解决这个问题，我们引入进阶版本的代码。
进阶版本的思路是通过JS更改类名，从而实现样式的更改，其代码如下：
新手同学可能会迷惑，如何实现的按钮中值的切换。在这段代码中采用的方式是利用::after伪元素。::after伪元素的作用是创建一个伪元素使之成为选中元素的最后一个子元素。通过content进行里面值的设置。
另外，在这段代码的CSS样式中，还给body加上了过渡样式transition: all 1s;。
终极版
当完成上述的进阶版本时，我们可以发现，在这段程序中，我们只需要对CSS的样式进行交互操作，那么，有没有办法使我们不用写JS代码，从而完成操作呢？
答案是有的，下面就是我们的终极版本的代码：
在这段代码中，我们在页面中使用了一个隐藏的checkbox，利用其伪类:checked来进行模式的切换。这是一个非常巧妙的方法。
总结
在JS代码的编写中，我们应遵循各司其责的原则。尽量避免出现使用JS直接操作样式的情况，当遇到状态切换的场景，可以使用class来完成场景的转换，另外，当面对纯展示类交互的时候，建议寻求零JS方案。
至此就是各司其责的全部内容。
顺便吐槽，添加代码块的功能，当添加代码块且打开预览界面的时候，掘金的Markdown编辑器就变得奇卡无比，出现N次内容回溯。。。
