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

一、本堂课重点内容

• 各司其职
• 组件封装
• 过程抽象
• 编程范式

二、详细知识点介绍

1、各司其职

2、组件封装

• 组件设计的原则：封装性、正确性、扩展性、复用性
• 实现组件的步骤：结构设计、展现效果、行为设计
• 三次重构：1.插件化2.模板化3.抽象化(组件框架)

3、过程抽象

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

• 常用高阶函数：Once、Throttle、Debounce、Consumer等

4、编程范式

• 命令式编程语言：面向过程、面向对象
• 声明式编程语言：逻辑式、函数式

三、实践练习例子

• 深夜食堂
• 轮播图
• 交通灯
• 4的幂数
• 洗牌
• 分红包
  命令式 let list=[1,2,3,4]; let map=[]; 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);

四、课后个人总结

本次课程学习到了注意到了js书写过程中要各施其职，以及组件封装的流程。在过程抽象中，了解到了纯函数等，理解了算法在前端的重要性。

五、引用参考

bytedance.feishu.cn/file/boxcnx… bytedance.feishu.cn/file/boxcnD…