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

JavaScript课程笔记（上）

一、重点内容

1. JavaScript 好代码的标准
2. HTML/CSS/JS 各司其责
3. 组件的定义解析及特征
4. 组件封装基本方法
5. 利用原生 JS 实现电商网站轮播图
6. 过程抽象概念
7. 高阶函数使用模式
8. JavaScript 编程范式

二、详细知识点

1、写好JS的编码原则

1. 各司其责

   让HTML、CSS和JavaScript职能分离

2. 组件封装

   好的UI组件具备正确性、扩展性、复用性

3. 过程抽象

   应用函数式编程思想

2、各司其责

1. 应当避免不必要的由JS直接操作样式
2. 可以用class来表示状态
3. 纯展示类交互寻求JS方案

3、组件封装

（1）概念

组件是指web页面上抽离出来的一个个包含模板、功能和样式的单元，好的组件具备封装性、正确性、拓展性、复用性。

（2）组件设计的原则：

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

（3）实现组件的步骤：

1. 结构设计
2. 展现效果
3. 行为设计

（4）三次重构

• 插件化
• 模板化
• 抽象化

3、过程抽象

（1）过程抽象

• 用来处理局部细节控制的一些方法。
• 函数式编程思想的基础应用。
• React Hooks典型过程抽象

（2）高阶函数

等价函数 函数的参数和函数的返回值任何状态下都是一样的

高阶函数 在等价函数基础上，改变了某些参数或返回值，或其他修改

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

（3）一些常用的高阶函数

① Once

• 如果在同一个任务的选项框 连续快速点击多次，会出现错误，提示已经移除
• 这里添加{once: true}，事件就会只触发一次，不会出现错误
• 类似这样多个请求，只调用一次。可以将过程封装成once过程抽象（高阶函数）

② Throttle

• 节流函数（Underscore、lodash等类库也有节流函数）
• 应用场景： 鼠标移动mousemove事件、页面滚动scroll

③ Debounce

• 防抖函数
• 应用场景： 自动保存，等编辑完成之后才会保存，正在编辑中时不保存

④ Consumer

• 延时调用
• 每隔一个时间才会调用function

⑤ Iterative

• 可迭代方法
• 同时操作多个元素
• 可迭代的话，就调用函数if isIterable里面的方法；不可迭代就调用if之外的，只调用一次。

（4）编程范式

1. 命令式：面向过程、面向对象

   当多了一个其他的状态时，需要修改函数内部的代码。

2. 声明式：逻辑式、函数式。声明式代码更简洁

   当多了一个其他的状态时。只需要将状态多写一个即可，具有更强的可扩展性

5、纯函数：无状态幂等函数

（1）纯函数

• 任何状态下，输入a，输出的一定是b
• 没有副作用，行为可预期

（2）非纯函数

非纯函数的测试，需要init()、setup()进行初始化，结束后环境销毁teardown(); 测试难度比纯函数高、成本也大、系统维护性越差

三、实践练习

1、白天夜间模式切换

深夜食堂

2、轮播图

四、个人总结

1. SetColor和SetColors都是非纯函数
2. 尽可能在编写过程中使用纯函数（例如高阶函数）
3. 抽象包括两个方面，一是过程抽象，二是数据抽象。