这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天，以下是我根据课程内容整理的笔记。
课堂笔记
课程介绍
本节课将主要围绕编码三大原则的“组件封装”原则展开。组件是 Web 页面上所抽取的模版、功能与样式的单元，自从 React，Vue 等前端框架在市面上大量使用之后，组件化开发逐渐成为了前端主流开发方式。
课程重点
- 组件的定义解析及特征
- 组件封装基本方法
- 利用原生 JS 实现电商网站轮播图
笔记内容
组件的定义解析及特征
1、什么是组件？
组件是指Wb页面上抽出来一个个包含模版(HTML)、功能(S)和样式(CSS)的单元。好的组件具备封装性、正确性、扩展性、复用性。
2、组件的特征：
1）组件化具有高内聚、低耦合的特性，既保证自身功能的完整性，又不会跟项目中的其它代码发生冲突。
2）每一个组件都有自己明缺的功能和职责，并且较低的耦合使单元测试和重复使用带来了方便。
3、组件的优点：
-
提高开发效率
-
方便重复使用
-
简化调试步骤
-
提升整个项目的可维护性
-
便于协同开发
组件封装基本方法
表现：CSS
-
使用CSS绝对定位将图片重叠在同一个位置
-
轮播图切换的状态使用修饰符(modifier)
-
轮播图的切换动画使用CSS transition
行为：JS
- 行为：API
-
Slider
-
+getSelectedltem()
-
+getSelectedltemlndex()
-
+slideTo()
-
+slideNext(
-
+slidePrevious()
-
- 行为：控制流
- 使用自定义事件来解耦。
总结：基本方法
-
结构设计
-
展现效果
-
行为设计
- API(功能)
- Event(控制流)
重构：插件化
解耦
-
将控制元素抽取成插件
-
插件与组件之间通过依赖注入方式建立联系
-
将HTML模板化，更易于扩展
组件框架
抽象
- 将组件通用模型抽象出来
总结
- 组件设计的原则：封装性、正确性、扩展性、复用性
- 实现组件的步骤：结构设计、展现效果、行为设计
- 三次重构
- 插件化
- 模板化
- 抽象化(组件框架)
结语
通过本次课程的学习，真的收获到了许多，以前对一些比较模糊的知识点也逐渐的清晰了起来。
