[ JavaScript 编码原则之过程抽象 | 青训营笔记]

这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天，以下是我根据课程内容整理的笔记。

课程介绍

在学习编程的过程中，一个核心的任务是编写可以完成任务的函数，本节课通过由浅入深的过程案例讲解，详细解读编码三大原则的“过程抽象”原则。

课程重点

1. 过程抽象概念
2. 高阶函数使用模式
3. JavaScript 编程范式

笔记内容

过程抽象

• 用来处理局部细节控制的一些方法

• 函数式编程思想的基础应用

操作次数限制

• 一些异步交互

• 一次性的HTTP请求

const list document.querySelector('ul');
const buttons = list.querySelectorAll('button');
buttons.forEach((button)=>{
    button.addEventListener('click',(evt)=>{
        const target = evt.target;
        target.parentNode.className = 'completed '
        setTimeout(()=>{
            list.removeChild(target.parentNode);
        },2008):
    })
)

高阶函数

Once

为了能够让"只执行一次"的需求覆盖不同的事件处理，我们可以将这个需求别离出来。这个过程我们称为过程抽象。

function once(fn){
    return function(...args){
        if(fn){
            const ret = fn.apply(this,args);
            fn = null;
            return ret;
        }
    }
}

高阶函数的使用模式

HOF

• 以函数作为参数
• 以函数作为返回值
• 常用于作为函数装饰器

• Once
• Throttle
• Debounce
• Consumer/2
• Iterative

function HOF0(fn){
    return function(...args){
        return fn.apply(this,args);
    }
}

编程范式

命令式与声明式

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);

例子

• Toggle-命令式

• Toggle-声明式

• Toggle-三态

总结

• 过程抽象/HOF/装饰器

• 命令式/声明式

结语

通过本次课程的学习，真的收获到了许多，以前对一些比较模糊的知识点也逐渐的清晰了起来。