JavaScript ｜青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 3 天

课程重点

编码原则
组件封装
过程抽象概念
高阶函数使用模式
JavaScript 编程范式

详细知识点介绍

编码原则

各司其职，组件封装，过程抽象

我们在编码的时候需要注意，尽量让HTML/CSS/JS各司其职，避免不必要的由JS直接操作样式。

组件封装

组件是指一个包含模板、功能、样式的单元，好的组件具有封装性、正确性、扩展性、复用性。

过程抽象

过程抽象用来处理细节控制的一些方法。需要函数式编程的思想。

函数式编程，简单理解就是无副作用的输入->处理->输出。

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

高阶函数（HOF）介绍

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

常见的高阶函数

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

实践练习例子

实现一个只能执行一次的函数：

// 只执行一次函数
const once = (fn) => {
  let done = false;
  return function (...args) {
    if (!done) {
      done = true;
      return fn.apply(this, args);
    }
  }
}

// 测试
const sayHello = (name) => {
  console.log(`Hello ${name}`);
};

const sayHelloOnce = once(sayHello);

sayHelloOnce('xiaoming'); // Hello xiaoming
sayHelloOnce('xiaohong'); // undefined

课后个人总结

本次课程让我学到了很多有关编程原则、组件封装、过程抽象概念、高阶函数使用模式以及JavaScript编程范式的知识，收获很大。

对于高阶函数，过去只是略有了解，现在能够真正去理解它们是什么，以及它们的用处如何。

引用参考

https://bytedance.feishu.cn/file/boxcnxKucsHPvnJ7PfXyCQF5WCd

JavaScript ｜ 青训营笔记