这节课是青训营前端基础班的第四节课，看了将近两个小时终于把4个视频看完了T-T,下面是我的笔记
三个原则
- 各司其责
- 组件封装
- 过程抽象
各司其责
例子1 深夜食堂
定义、读取button。当点击太阳图标时转换为黑夜模式；点击月亮图标时转换为白天模式。
思考
版本有什么问题？如何优化？
第一个版本在JS里用了css的样式，不符合我们各司其责的原则。
第二个版本多出了过度动画，可以避免短时间色彩变化过大而引起的对用户视觉的刺激。
部分小结
HTML/CSS/JS各司其责
应当避免不必要的由JS直接操作样式
可以用class来表示状态（如上面的例子）
纯展示类交互寻求零JS方案
组件封装
例子2 轮播图
- 第一步 构建结构
用HTML来实现。轮播图是典型的列表结构，使用无序列表ul元素来实现。
- 第二步 展现效果
使用css绝对定位（position:absolute）将图片重叠在同一位置，轮播图切换状态使用修饰符，轮播图的切换动画使用css transition。
- 第三步 行为设计
使用自定义事件来解耦
思考
问题：修改麻烦
改进：解耦。将控制元素抽取承插件，通过依赖注入来构建联系。
问题：不易于扩展
改进：将HTML模板化
部分小结
组件设计的原则：封装性、正确性、扩展性、复用性
组件设计的步骤：结构设计、展现效果、行为设计
三次重构：插件化、模板化、抽象化
过程抽象
-
用来处理局部细节控制的一些方法
-
函数式编程思想的基础应用
高阶函数
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
思考
为什么要用高阶函数？
-
纯函数，结果固定，可预期，没有副作用
-
非纯函数，可维护性越差
高阶函数可以大大减少使用非纯函数的可能性
个人的思考
在这节课中我学习到了一些新的词汇、概念，如高阶函数、纯函数、解耦等，这在我学习编程的道路上是迈出了一小步，同时，我也从课程中学习到一些实践中会遇到的问题以及如何解决问题，如何比较两段代码的区别和优缺点。
