这是我参与「第五届青训营」笔记创作活动的第4天。以下是我在观看学习视频的同时进行的笔记记录，今天学习了好多新知识，感觉好充实！同时也希望大佬们进行补充和改正，大家一起加油努力呀!

本节课重点内容

• JavaScript 好代码的标准
• HTML/CSS/JS 各司其责
• 组件的定义解析及特征
• 组件封装基本方法
• 利用原生 JS 实现电商网站轮播图

本节课知识点介绍

JavaScript编码原则

结构设计HTML、展示效果CSS、行为设计API（功能），Event（控制流）

各司其职

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

组件封装

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

• 原则：封装性、这个雀形、扩展性、复用性
• 实现组件的步骤：结构设计、展现效果、行为设计
• 三次重构：插件化、模板化、抽象化

过程抽象

用来处理局部细节控制的一些方法。

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

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

高阶函数

• Once、Throttle、Debounce、Consumers/2、Iterative

实践练习例子

个人总结

通过学习本节课，我对javascript的知识方面的理解更加深刻了，更清楚了HTML、CSS、JavaScript各自的作用，增长了知识面，对于编写项目时有了一个大局观。在这节课我学到了JavaScript 好代码的标准，HTML/CSS/JS 各司其责，组件的定义解析及特征，组件封装基本方法。学习了这节课后我认为收获很大，希望自己可以继续坚持，加油，一起努力！