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

导言：HTML，CSS以及JavaScript作为前端的三大基石是每一个前端入门必须学习的东西，他们或深或浅但是都不是一下子能够学会的，此笔记作为我个人在青训营中学习到的自己曾经遗漏了部分或者是三件套的介绍以及个人认为较重要的部分的笔记。

【第三课】跟着月影大佬学Javascript

前端工程师需要让前端三件套需要各司其责

HTML负责结构
CSS负责表现样式
Javascript负责行为逻辑

总结：

这样才能让代码更加利于维护与回看应，
当避免不必要的由JS直接操作样式
可以用class来表示状态
纯展示类交互寻求零JS方案

组件封装

设计原则

封装性
正确性
拓展性
复用性

基本方法

结构设计
展现效果
行为设计 (API)功能 | Event(控制流)

升级

重构：插件化

目的：让组件能够更加灵活方便的去使用。

解耦

将控制元素抽取成插件
插件与组件之间通过依赖注入方式来建立联系

但是实际上插件化还是不够完美

再升级

重构：模板化

目的：让组件能够更加灵活方便的去使用，去自定义。

解耦

将HTML模板化，使其更易于拓展

梅开二度升级

组件框架化

抽象

将组件通用模型抽象出来

# 过程抽象

-   用来处理局部细节控制的一些方法
-   函数式编程思想的基础应用

# 高阶函数

### **什么是高阶函数**

-   高阶函数 (Higher-order function)

    -   可以把函数作为参数传递给另一个函数
    -   可以把函数作为另一个函数的返回结果

-   函数作为参数

-   常用于作为函数装饰器

### Once

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

## 常用高阶函数HOF

-   Once (使用一次)
-   Throttle（[节流](https://www.notion.so/189777dc1e364e9eb8853ff2f86e65f1)）
-   Debounce ([防抖](https://www.notion.so/d6c3c41c78424d7fb204f55b5918af18))
-   Consumer/2
-   Iterative(可迭代)

### 为什么要使用高阶函数？

为了库的可维护性，减少非纯函数的出现次数(纯函数概念，输入一定时输出一定)

# 编程范式

### 命令式与声明式

命令式——强调怎么做

更简单逻辑直观

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

前端三件笔记【3】 | 青训营笔记