这是我参与[第五届青训营]伴学笔记创作活动的第5天，和大家分享自己学习《跟着月影学 JavaScript》章节课程的收获。

一、本堂课重点内容

• JavaScript好代码的标准
• HTML/CSS/JS各司其职
• 组件的定义解析及特征
• 组件封装基本方法
• 过程抽象概念
• 高阶函数使用模式
• JavaScript编程范式

二、详细知识点介绍

1.写好JS的一些原则

各司其责、组件封装、过程抽象

2.前端三件套各司其责

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

3.什么是组件？

组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）、样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。

4.组件封装的基本方法

结构设计--> 展现效果--> 行为设计（功能、控制流）

5.三次重构

（1）插件化

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

（2）模板化

将HTML模板化，更易于扩展

（3）抽象化（组件框架）

将通用的组件模型抽象出来

6.过程抽象

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

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

7.高阶函数

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

8.编程范式

• 过程抽象/HOF/装饰器
• 命令式/声明式

三、课后个人总结

本节课由浅入深，从实践维度解读了JavaScript的基本知识，其中，对于组件封装、过程抽象、编程范式的等方面仍需加强。