这是我参与「第四届青训营 」笔记创作活动的第1天
js的优化与改进
- 具体的样式代码定义到类中，再利用改变类名来设置转换，整个代码更加简洁。
|
- checkbox可以设置伪类属性:checked属性也可以改变样式，不是必须引用JS代码
注意：
- HTML(结构) / CSS(表现) / JS(行为)各司其职
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
组件分装
组件是指Web页面上抽出来一个个包含模版(HTML)、功能(JS)和样式(cSS)的单元。好的组件具备封装性、正确性、扩展性、复用性（组件设计的原则）。
轮播图
- 结构：轮播图是一个典型的列表结构，可以使用无序列表ul元素来实现
- 表现：使用 CSS 绝对定位将图片重叠在同一个位置轮播图切换的状态使用修饰符(modifier)轮播图的切换动画使用 CSS transition
- 行为：API(应用程序编程接口)--->控制流（使用自定义事件来解耦）
总结：基本方法
- 结构设计
- 展现效果
- 行为设计（API功能 Event控制流）
轮播图是否还有改进空间？
三次重构----插件化、模块化、抽象化（组件框架）
插件化：使里面的一些组件更灵活
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
- 将HTML模块化，更易于扩展
- 将组建通用模型抽象出来
过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
经典实例：操作次数限制
要求：一次异步交互、一次性的HTTP请求
高阶函数
once：为了能够让“只执行一次”的需求覆盖不同的事件处理，可以将这个需求剥离出来。这个过程我们称为过程抽象。
