这是我参与「第四届青训营 」笔记创作活动的第2天
- 各司其职
- 组件封装
- 过程抽象
主要内容
各司其职
结论：
- HTML/CSS/JS 各司其责
- 应当避免不必要的由 JS 直接操作样式
- 可以用 class 来表示状态
- 纯展示类交互寻求零 JS 方案
组件封装
-
组件设计的原则：封装性、正确性、扩展性、复用性
-
实现组件的步骤：结构设计、展现效果、行为设计
-
三次重构
- 插件化
- 模板化
- 抽象化（组件框架）
结构、表现、行为分离：轮播图
- 结构：HTML
- 轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现。
- 表现：CSS
- 使用 CSS 绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符（modifier）
- 轮播图的切换动画使用 CSS transition
- 行为：JS
- API
- 控制流：用自定义事件来解耦
组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。
改进：重构构造函数代码，将控制函数抽象成插件-->插件化、模板化、抽象化
插件化：
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
过程抽象
为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。
函数式编程:函数式编程更加强调程序执行的结果而非执行的过程，倡导利用若干简单的执行单元让计算结果不断渐进，逐层推导复杂的运算，而不是设计一个复杂的执行过程。
高阶函数
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
once()：让一个其他方法可以只执行一次的方法，当再次执行该方法时，直接返回第一次执行的结果，不再重新执行，但不影响其他传入的方法的执行
使用场景：
- 初始化单例资源或并发访问只需初始化一次的共享资源，或在测试的时候初始化一次测试资源。
高阶函数
命令式(面向过程和面向对象)与声明式（逻辑和函数式）
案例
- 深夜食堂（支持浅色和深色模式）
版本一：
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if(e.target.innerHTML === '🌞') {
body.style.backgroundColor = 'black';
body.style.color = 'white';
e.target.innerHTML = '🌜';
} else {
body.style.backgroundColor = 'white';
body.style.color = 'black';
e.target.innerHTML = '🌞';
}
});
操作了body，jS操作了CSS，假如需求变化，很难从代码上理解原始需求的含义
版本二：
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if(body.className !== 'night') {
body.className = 'night';
} else {
body.className = '';
}
});
封装了类：night，在效果上有了渐入渐出效果，且代码更加简洁。
版本三：
指利用CSS的伪类选择器和check实现
#modeCheckBox {
display: none;
}
#modeCheckBox:checked + .content {
background-color: black;
color: white;
transition: all 1s;
}
