前端组件设计和封装原则
组件设计原则
1. 层次结构和 UML 类图(⽤于快速帮助了解应⽤程序布局和其他细枝末节)
对于前端组件W的UML类图可以有 State、Props、Methods、Event、Slot、与其他组件的关系
2. 扁平化、⾯向数据的 state/props
3. 低耦合、辅助代码分离
4. 避免直接操作DOM，避免使⽤ref、减少访问全局变量
5. ⼊⼝处检查参数的有效性，出⼝处检查返回的正确性
6. 单⼀职责组件要建⽴在可复⽤的基础上、对于不可复⽤的单⼀职责组件仅作为独⽴组件的内部组件
相关技术和⼯具
选⽤TypeScript代替替换JavaScript
代码检测 ESLint：eslint-config-standard（相对没airbnb严格）
代码美化 Prettier，解放⼈⾁美化，同时利于不同⼈协作的风格⼀致
打包⼯具可选⽤Rollup（Scope Hoisting将模块构建在⼀个函数内的做法更适合类库的打包）
commit规范选⽤Angular 团队的⽅案配合commitizen依赖实现强制规范化
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
commit head type如下（必填）
feat: 新特性
fix: 修改问题
docs: ⽂档修改
refactor: 代码重构
style: 代码格式修改(⾮css修改)
test: 测试⽤例修改
chore: 代码优化，其他修改, ⽐如构建流程, 依赖管理
组件封装原则
1. ⾼内聚低耦合，尽可能少的暴露组件的api，将功能尽量封装在组件内部
2. 组件内部根据业务需求设置了⼀些组件默认的配置项
组件⽂档建⽴
使⽤VitePress，⽂档的内容要简单明了，组件⽰例/props 参数说明/events 监听事件说明/slot 插槽说明，如有内部事件暴漏出去，添加其它事件说明
CSS规范
CSS命名使⽤BEM
以下为参考
最外层盒⼦不写宽⾼，使⽤⾃适应（⾃适应）
使⽤⽗套⼦的⽅式，给类名加权重和作⽤域，以保证绝对的样式‘内部性’
尽可能使⽤flex布局，不要写死宽⾼
避免使⽤！important写死样式
记住我必要时限制max或者min
避免使⽤标签选择器
有暴露外部的样式书写⼊⼝
统⼀使⽤scss书写
遵循先盒⼦主体样式，后渲染样式，即遵循先定位、宽⾼、display等，再font-size、color、缩进，边框，背景⾊等书写顺序
可以做适配，例如IPhoneX
避免为0值制定单位，例如⽤ margin: 0; ⽽避免使⽤ margin: 0 px;
对于⼩于1的值，省略前⾯的0，例如 .5 代替 0.5
避免过量的使⽤简写，防⽌样式覆盖，例如使⽤ background-color: red; 代替 background: red;
对于 z-index 的值，在可控范围内，尽量写的⼩⼀点，分层级时区分数量级，同⼀层级，使⽤同⼀数量级值,(除弹窗外，不⾼于100；弹窗类最⾼999)
所有的声明都要以分号结尾，最后⼀个是可选项，但是也要书写，避免出错
每条声明之后，都要有⼀个空格
声明的花括号应该单独成⾏，单⾏声明除外
分区块增加注释分割，书写顺序符合⽂档流顺序
书写托底的默认样式
参考
封装Vue组件的⼀些技巧