7.27 跟着月影学 JavaScript ｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第4天。这节课主要讲了写好JS的一些原则。
各司其职
HTML CSS JS职能分离
结构Structural-表现Presentational-行为Behavioral分离
避免不必要的由JS直接操作样式
可以用class表示状态
- 纯展示类交互寻求0JS的解决方案
组件封装
好的组件具备正确性、扩展性、复用性
组件指Web页面上抽出包含模板（HTML）、功能（JS）和样式（CSS）的单元
以轮播图为例：
- 结构：HTML 无序列表ul
<div id="my-slider" class="slider-list">
<ul>
<li class="slider-list__item--selected">
<img src="<https://p5.ssl.qhimg.com/t0119c74624763dd070.png>">
</li>
<li class="slider-list__item">
<img src="<https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg>">
</li>
<li class="slider-list__item">
<img src="<https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg>">
</li>
<li class="slider-list__item">
<img src="<https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg>">
</li>
</ul>
</div>
-
表现：CSS
- 使用 CSS 绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符（modifier）
- 轮播图的切换动画使用 CSS transition
-
行为：JS
- API
在Slider中定义 constructor(id)， getSelectedItem()，slideTo(idx)，slideNext()，slidePrevious()方法。
-
控制流
- 用自定义事件解耦合
- 避免组件的状态和图片的状态耦合
const detail = {index: idx} const event = new CustomEvent('slide', {bubbles:true, detail}) this.container.dispatchEvent(event)总结：基本方法
-
结构设计
-
展现效果
-
行为设计
- API （功能
- Event （控制流）
改进
重构：插件化
解耦
-
将控制元素抽取成插件
-
插件与组件之间通过依赖注入方式建立联系
图片作为数据传入，生成对应的模板
课程讲到了一些还需要继续学习的内容，再次先记录一下：CustomEvent 自定义事件，Shadow-DOM
组件框架
抽象
将组件通用模型抽象出来
组件封装
-
组件设计的原则：封装性、正确性、扩展性、复用性
-
实现组件的步骤：结构设计、展现效果、行为设计
-
三次重构
- 插件化
- 模板化
- 抽象化（组件框架）
改进空间
没有做CSS的模板化，仍然是手写的代码
过程抽象
Procedural Abstraction
为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。
过程抽象应用函数式编程思想
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
- 函数是"第一等公民"
- 只用"表达式"，不用"语句"
- 没有"副作用"（意味着函数要保持独立，所有功能就是返回一个新的值，没有其他行为，尤其是不得修改外部变量的值。） 4. 不修改状态 5. 引用透明，指的是函数的运行不依赖于外部变量或"状态" React hooks也用到了这样的思想
高阶函数 HOF：函数返回一个新的函数
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
高阶函数通常基于HOF0
function HOF0(fn) {
return function(...args) {
return fn.apply(this, args);
}
}
以todolist为例
需要限制重复点击时对parentNode的removeChild只触发一次，定义函数once()
- 参数是函数
- 作用是使函数只调用一次
function once(fn) {
return function(...args) {
if(fn) {
const ret = fn.apply(this, args);
fn = null;
return ret;
}
}
}
为什么使用高阶函数
- 纯函数：A Pure Function，结果可预测（当输入确定时，输出是唯一确定的），无副作用
- 纯函数可维护性更佳
常用高阶函数
Once Throttle 节流函数
- 优化高频率执行js代码的方式，对事件加以调用次数限制
- 每隔一段时间，只执行一次函数。
- 应用场景：高频点击提交, 搜索框联想
Debounce 防抖函数
- 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
- 应用场景：窗口大小的 resize, mousemove
- Consumer 异步消耗 Iterative 迭代函数
编程范式
JS兼备命令式与声明式 命令式强调How，声明式强调What
