组件设计原则
-
层次结构和 UML 类图(用于快速帮助了解应用程序布局和其他细枝末节)
对于前端组件W的UML类图可以有 State、Props、Methods、Event、Slot、与其他组件的关系
-
扁平化、面向数据的 state/props
-
低耦合、辅助代码分离
-
避免直接操作DOM，避免使用ref、减少访问全局变量
-
入口处检查参数的有效性，出口处检查返回的正确性
-
单一职责组件要建立在可复用的基础上、对于不可复用的单一职责组件仅作为独立组件的内部组件
相关技术和工具
-
选用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: 代码优化，其他修改, 比如构建流程, 依赖管理
组件封装原则
- 高内聚低耦合,尽可能少的暴露组件的api,将功能尽量封装在组件内部
- 组件内部根据业务需求设置了一些组件默认的配置项
组件文档建立
使用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组件的一些技巧 https://juejin.cn/post/6844903821513064456