这是我参与「第四届青训营 」笔记创作活动的第 2 天
JavaScript
各司其职
深夜食堂
修改网页属性, 白天模式和夜间模式切换
版本一
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 = '太阳';
}
})
版本二
版本一使用 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 = '';
}
})
版本三
直接使用 css 的状态伪类实现
#modeCheckBox:checked + .content {
background-color: black;
color: white;
transition: all 1s;
}
总结
- 避免不必要的由 js 直接操作样式
- 纯展示类交互追求零 js 方案
组件封装
轮播图
-
结构: 使用无序列表
-
表现:
- 绝对定位
- 选择展示一个, 其余的隐藏
- 切换动画
-
行为:
- 使用 js 去操作控件
- slider, getSelectItem, getSelectedItemIndex, slideTo, slideNext
重构
插件化
- 将控制元素抽象为插件
- 插件与组件之间通过依赖注入方式建立联系
模板化
- 将 HTML 模板化, 更易于扩展
抽象化(组件封装)
- 将组件通用模型抽象出来
总结
组件设计的原则
封装性, 正确性, 扩展性, 复用性
实现组建的步骤
结构设计, 展现效果, 行为设计
三次重构
插件化, 模板化, 抽象化
过程抽象
用来处理局部细节控制的一些方法
函数式编程思想的基础应用
操作次数限制
一次异步交互
一次性的 HTTP 请求
高阶函数
Once
为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为 过程抽象。
HOF
以函数为参数, 以函数为返回值, 常用于作为函数装饰器
其他
Throttle(节流), Debounce(防抖), Consumer / 2(延时), Iterative(迭代)
为什么需要高阶函数
- 简化复杂流程
- 大大减少使用非纯函数的可能性, 提高库的可维护性
命令式与声明式
命令式
详细指令指明下一步要干什么
let list = [1, 2, 3, 4];
let mapl = [];
for(let i = 0; i < list.length; i++) {
mapl.push(list[i] * 2);
}
声明式
告诉计算机, 要得到什么样的结果
let list = [1, 2, 3, 4];
const double = x => x * 2;
list.map(double);
总结
- 过程抽象 / HOF / 装饰器
- 命令式 / 声明式
