这是我参与[第四届青训营]笔记创作活动的第1天

一. 各司其职

1. HTML/CSS/JS各各司其职
   1. 避免不必要的由JS直接操作样式
   2. 可以用class来表示状态
   3. 纯展示类交互寻求JS方案

二. 组件封装

1. 组件：Web页面中可以单独拿出的，一个个包含模板（HTML），样式（CSS），功能（JS）
2. 组件特点：封装性，正确性，扩展性，复用性
3. 一般有以下三个设计：结构设计，效果设计，行为设计；
4. 组件设计原则：
   1. 层次结构和 UML 类图(用于快速帮助了解应用程序布局和其他细枝末节)对于前端组件的UML类图可以有 State、Props、Methods、Event、Slot、与其他组件的关系
   2. 扁平化、面向数据的 state/props
   3. 低耦合、辅助代码分离
   4. 避免直接操作DOM，避免使用ref、减少访问全局变量
   5. 入口处检查参数的有效性，出口处检查返回的正确性
   6. 单一职责组件要建立在可复用的基础上、对于不可复用的单一职责组件仅作为独立组件的内部组件
5. 行为设计：
   1. API（功能）
   2. Event(控制流)
6. 三次重构：
   1. 插件化：
      1. 当要修改某个组件中的一些元素时，使用“解耦”
      2. 解耦：将控制元素抽取成插件
      3. 插件与组件之间通过依赖注入方式建立联系
   2. 模板化
   3. 抽象化（组件框架）

总结+思考

1. 封装可以避免重复的工作，为开发提升效率

2. 代码逻辑清晰，方便项目的后期维护与修改

3. 对于组件的了解，还需要更多的实战去体会

4. 封装组件让组件的使用者不用去关心组件的内部实现以及原理，使团队更好的有层次的去运行项目