这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
课堂笔记
课程重点内容：
- 各司其职
- 组件封装
各司其职：
在前端三大件js、css、Html中,它们都有各自的分工，为了提高代码的可扩展性、可维护性等，应该让它们明确自己的任务能更好地提升代码的质量。
Html：主要负责页面元素的结构
Css：负责页面元素的样式
Js：负责处理用户的行为，应当避免不必要的由js操作样式，可以利用class来表示状态
具体案例：
版本一：利用js修改css样式
版本二：利用js修改html元素的类名
版本三：纯css展示
以上三个版本中，版本一的缺陷为功能的可读性和可扩展性比较差；版本二中利用了class来表示状态基本实现各司其职的原则，但由于需求仅为修改样式，纯展示类交互寻求零js方案，故最好的方法是版本三。
组件封装：
组件是指在Web页面上抽出一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元，好的组件具备封装性、正确性、扩展性、复用性。
具体案例：
一般封装方法：
代码参考
重构插件化：解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系 代码参考 code.h5jun.com/weru/3/edit…
重构模板化：解耦
- 将HTML模板化，更易于扩展
代码参考
重构组件框架：抽象
- 将通用的组件模型抽象出来，变为一个通用的模板组件，包含构造器，插件注册，HTML模板
代码参考
总结：
- 组件设计的原则：封装性、正确性、扩展性、复用性
- 实现组件的步骤：结构设计、展现效果、行为设计
- 三次重构
- 插件化
- 模板化
- 抽象化（组件框架）
