这是我参与「第四届青训营 」笔记创作活动的的第二天
前言：主要记录的是学习JavaScript中的一些思维和原则，从原则和思维上去了解编程思想
1.写好JS的一些原则
- 各司其职
让HTML，CSS和JavaScript职能分离
- 组件封装
好的UI组件具备正确性，拓展性，复用性
- 过程抽象
应用函数式编程思想
2.原则一：各司其职
- HTML/JS/CSS各司其职
- 避免不必要的由js直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零js方案
版本一的代码逻辑：（既修改样式又修改页面结构）
- 获取切换界面模式的按钮
- 给按钮绑定点击事件
- 获取Body元素
- 判断当前按钮元素的内容
- 根据内容进行样式改变
缺点：违背了各司其职的原则，这里的JS代码，既修改了元素的样式，也修改了元素的结构，可读性太差，而且不方便添加其他的功能
版本二的代码逻辑：（只修改类名）
- 通过给按钮添加after伪元素，可以改变按钮的内容，也就是不使用JS就可以改变页面的结构
- 设置黑夜情况下类的样式，还可以加入一些新的效果
- 通过设置不同的类名来展示不同的样式
优点：可读性增加，js不再参与页面的结构和样式，只是修改了类名
版本三的代码逻辑（不写JS代码）
- 用大盒子把我们的内容装起来，然后通过label元素代替之前的button元素，将它指向大盒子外面的checkbox元素
- 由于HTML的结构，点击label就相当于点击了checkbox（label指向了checkbox，checkbox可以通过点击，记住用户的勾选和不勾选的两个状态，对应我们的白色模式和深色模式两种状态）
- 将大盒子外面的checkbox隐藏起来 display: none
- 通过 checkbox 的伪类选择器checked，点击checkbox就会触发这个伪类
知识补充
- label 标签为 input 元素定义标注（标签）。
- label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。
作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
如何绑定元素呢
- 第一种用法就是用label标签直接包含input表单， 适合单个表单选择
- 第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。
- 举例：
<input type="checkbox" id="cbox1" value="first_checkbox">
<label for="cbox1">This is the first checkbox</label>
</p>
<p>
<input type="checkbox" id="cbox2" value="second_checkbox" checked="checked">
<label for="cbox2">This is the second checkbox, which is checked</label>
</p>
- 通过相邻兄弟选择器
+选择到checkbox下面的大盒子
知识补充
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）
