这是我参与「第五届青训营」伴学笔记创作活动的第4天。
一、本堂课重点内容
本节课详细介绍了前端技术栈之一JavaScript的三个编码原则-各司其职、组件封装、过程抽象，本篇笔记将对各司其职这一原则作记录并提出自己的想法。
二、详细知识点介绍
各司其职的编码原则
各司其职这一原则指在开发时将不同的任务分别交给JSS、HTML、JavaScript这三种语言来承担，具体而言就是由HTML控制网页结构、由JSS负责样式表现、最后由JavaScript负责网页的功能实现。
举例尝试-深夜食堂
- 版本一
分析：在这一版本中，通过在js代码中对页面的样式进行修改，并为元素绑定鼠标点击事件以实现页面的切换，我们实际上已经实现了本案例的全部功能。但可以发现在版本一中我们实现目标的方式是在js中进行编写，而经过上一节课的学习，我们已经了解到js主要负责行为控制，css主要负责样式，因此我们可以进行修改，由css实现功能。
- 版本二
分析：在版本二中，js直接操控的只有body的状态，而将添加night属性的任务交给了css，即：当不存在night时便添加一个，若已经存在则删除night属性。在本版本中，对样式的操作修改全部由css完成，这符合JavaScript编写的各司其职原则，但我们仍然能够继续尝试编写不含js代码的前端来完成
- 版本三
分析：在版本三中实现了无js展示页面，在此版本中首先由label指向CheckBox，在css中由CheckBox设置checked的状态并决定content的样式，同时通过display隐藏CheckBox，之后通过for语句定义label点击button相当于点击CheckBox切换状态。
三、课后个人总结
- HTML/CSS/JS各司其职
- 应当避免不必要的有JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
四、引用参考
csdn
