这是我参与「第四届青训营」笔记创作活动的的第三天
原则
1.让HTML，CSS和JavaScript职能分离
各司其职
2.组件封装-合理有用的封装UI
3.函数式编程思想
在课程中
提供三个版本的程序
Part1
1.既修改样式又修改页面结构
- 获取切换界面模式的按钮
- 给按钮绑定点击事件
- 获取Body元素
- 判断当前按钮元素的内容
- 根据内容进行样式改变 2.只修改类名
- 通过给按钮添加after伪元素，可以改变按钮的内容，也就是不使用JS就可以改变页面的结构
- 设置黑夜情况下类的样式，还可以加入一些新的效果
- 通过设置不同的类名来展示不同的样式 3.不写JS代码-大盒子
- 用大盒子把我们的内容装起来，然后通过label元素代替之前的button元素，将它指向大盒子外面的checkbox元素
- 由于HTML的结构，点击label就相当于点击了checkbox（label指向了checkbox，checkbox可以通过点击，记住用户的勾选和不勾选的两个状态，对应我们的白色模式和深色模式两种状态）
- 将大盒子外面的checkbox隐藏起来 display: none
- 通过 checkbox 的伪类选择器checked，点击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>
Part2
组件
组件是指web页面上抽出来一个个包含模板（HTML），功能（JS）和样式（CSS）的单元，好的组件具有封装性，正确性，拓展性，复用性
- 组件设计的原则：封装性，正确性，拓展性，复用性
- 实现组件的步骤：结构设计，展现效果，行为设计
- 三次重构：插件化，模板化，抽象话（组件框架） Part3 函数式编程思想 类似变量 常量等使用
