这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天，希望继续坚持。
编码原则
- 各司其职
- 组件封装
- 过程抽象
各司其职
在编码的时候需要尽量让HTML/CSS/JS各司其职，避免不必要的由JS直接操作样式。
组件封装
组件是指一个包含模板、功能、样式的单元，好的组件具有封装性、正确性、扩展性、复用性。
过程抽象
过程抽象用来处理细节控制的一些方法。 需要函数式编程的思想。
函数式编程，简单理解就是无副作用的输入->处理->输出。
为了能够让只执行一次的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程我们称为过程抽象。
高阶函数
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
常见的高阶函数
Once
用于只需要执行一次的函数
function once(fn) {
return function(...args) {
if(fn) {
const ret = fn.apply(this, args);
fn = null;
return ret;
}
}
}
复制代码
使用方法：
const print = (content) => {
console.log(content)
}
const printOnce = once(print)
printOnce("1") // 输出 1
printOnce("2") // 不输出
复制代码
常用于只需要执行一次的的事件侦听器（也可以使用事件侦听器自带的once option，或者手动在执行后移除侦听器）
节流（Throttle）
如果快速调用函数，那么只有第一次能成功调用函数，之后时间间隔之内的调用会被忽略。常用于滚动条事件/瀑布流无限滚动的场景（限制函数调用频率，保证一段时间内函数只调用一次）
function throttle(fn, time = 500) {
let timer = null;
return function (...args) {
if (timer) return;
fn.apply(this, args);
timer = setTimeout(() => {
timer = null;
}, time);
}
}
防抖
当在时间间隔之内快速调用函数时，函数将始终没法执行，直到停止后，函数才会被执行。常用于一些文本输入的场景（比如搜索框停止输入后，展示联想词；文章编辑器中，输入停止后，进行草稿的保存）。
function debounce(fn, time = 500) {
let timer = null;
return function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, time);
}
}
Consumer
从名字也很好理解，当快速点击时，函数并不会立刻被调用，而是先将任务推入列表，然后在一定时间后一个一个消费掉。
function consumer(fn, time = 500) {
let tasks = [];
let timer = null;
return function (...args) {
tasks.push(args);
if (timer) return;
timer = setInterval(() => {
fn.apply(this, tasks.shift());
if (tasks.length === 0) {
clearInterval(timer);
timer = null;
}
}, time)
}
}
Lterative 可迭代函数
编程范式
命令式与声明式。
命令式趋向于怎么做。声明式趋向于做什么。
JS是既有命令式又有声明式。
命令式
let list =[1,2,3]
let map = []
for(let i =0; i<list.length ;i++){
map.push(list[i]*2);
}
声明式
let list = [1,2,3,4];
const double = x => x*2;
list.map(double);
课后总结
本次课程讲述了了很多有关编程原则、组件封装、过程抽象概念、高阶函数使用模式以及JavaScript编程范式的知识，使我受益匪浅。
