这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天。
今日学习：JS编码原则：
- 各司其职
- 组件封装
- 过程抽象
各司其职
例：写一段JS，控制一个页面，让它支持浅色和深色两种浏览模式。
方法一：
注册一个点击的事件，改变当前页面的文字颜色和背景颜色样式。
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中改变了样式，如果以后要对页面深色模式和浅色模式的样式更改，仍需要在JS中更改，我们知道，关于页面样式的设置是在CSS中设置的，而JS是负责页面的行为，这种写法使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中进行设置，但是还有没有更好的方法呢？
方法三：
由于更改浏览模式是在改变页面显示样式，并没有进行一些高级行为的操作，我们可以直接在html中加入一个id为modeCheckBox的复选框，在CSS中，在复选框被选中时，设置浏览模式的样式。
<input id="modeCheckBox" type="checkbox">
#modeCheckBox:checked + .content {
background-color: black;
color: white;
transition: all 1s;
}
到此，我们已经可以通过点击复选框来更改浏览模式，但仍需进行一些美化。
我们在html中添加一个按钮modeBtn，通过label标签，将按钮与复选框划为一组，然后在CSS中对modeBtn设置样式。
<label id="modeBtn" for="modeCheckBox"></label>
然后在CSS中将复选框隐藏，便可以实现在页面中通过点击按钮modeBtn更改浏览模式。
#modeCheckBox {
display: none;
}
结论：
- HTML/CSS/JS各司其责
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
组件封装
组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。
比如做一个电商网站的轮播图：
- 在html中使用无序列表实现
- 使用CSS绝对定位将图片重叠在同一个位置，轮播图的切换状态使用修饰符（modifier），轮播图的切换动画使用CSS transition
- 在JS中使用API实现页面的滑动，使用自定义事件设置控制按钮和切换上下图片的行为
总结：
基本方法：
-
结构设计
-
展现效果
-
行为设计
- API（功能）
- Event（控制流）
解耦：
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立连接。
过程抽象
过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
操作次数限制
- 一些异步交互
- 一次性的HTTP请求
Once
- 为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程我们称为过程抽象。
高阶函数
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
常用高阶函数
- Once
- Throttle(节流函数)
- Debounce（防抖函数）
- Consumer/2
- Iterative（批量操作元素）
编程范式
- 命令式
- 声明式
- 三态
