一、开发规范
1、组件 props 原子化
提供默认值
使用 type 属性校验类型
使用 props 之前先校验该 prop 是否存在
使用 validator 属性校验参数是否符合要求
2、避免使用 this.$parent
3、谨慎使用 this.$refs
4、在组件中绑定的原生事件和定时器应在组件销毁时清除
5、对于开销大且不会频繁显隐的组件通过 v-if 实现懒加载
6、对于data中不需要监听相应的数据使用 Object.freeze 冻结
7、及时清除代码中的调试信息 console, 在调试结束之后
关于命名
kebab-case (短横线分隔命名)
PascalCase (单词首字母大写命名)
- 命名、注册、导入时遵循 PascalCase 规则
- 使用、组件文件名遵循 kebab-case 规则
- 通用组件添加公司或者项目缩写前缀
关于注释
- 公共组件使用说明
- 重要函数、参数说明
- 复杂业务逻辑处理说明
- 特殊情况处理说明、变量用途、临界值、设计思路
- 组件的修改时间、内容、原因等, 例: fix: 2022.03.03 修复了 xxx 问题
二、组件设计
设计原则
1、子组件中的数据由父组件传入, 子组件中的数据只能在子组件中使用
尽可能的保证数据的内聚, 防止外部修改内部组件数据的情况
2、不要依赖于 vuex
如果要抽离组件, 尽量不要在组件内部使用 vuex 来实现参数的传递, 如果需要 vuex
中的数据, 可以在父组件中获取并传入子组件中.
3、预留可修改的空间, 留一个 solt
凡事留一线, 日后好相见.
4、组件的设计原则同函数的设计原则是想通的, 故也可以参考 S.O.L.L.D 五大原则原则
关于五大设计原则这里不做具体的解释, 感兴趣的可以自行查询
组件除了本身的功能外, 最重要的是 扩展性、通用性、健壮性
扩展性需要符合设计的 `开放封闭` 原则
通用性需要尽可能的 `高内聚、低耦合、与业务解绑`
健壮性需要对 参数处理、边界处理、异常错误处理
5、不要不停的扩展
组件在设计之初需要考虑到扩展性, 但是随着组件的不断扩展, 必然会降低组件的 易用性,
且组件的维护难度也会随之提高, 组件的职责也不再单一, 过长的组件代码也会降低代码 可读性,
因此在扩展组件时不可盲目扩展, 考虑是否需要扩展, 还是单独再写一个组件, 亦或者考虑对组件
整体进行重构, 将其通用的部分进行再封装.
组件分类
按照业务可以区分为
业务组件
非业务组件
按照功能可以区分为
无状态组件: 组件没有内部的变量, 只通过外部传入数据并展示
普通组件
高阶组件: 可以通过此组件生成新的组件
按照层级可以区分为
容器组件: 处理业务逻辑、接口请求、传入数据等
视图组件: 数据的展示、用户交互
遇到问题, 思考讨论
1、如果父组件需要用到子组件中的一些方法? 如果这个子组件在一个页面中有多个? 如果不通过 ref 呢?
2、有两个页面相同的js逻辑占 80% 如何处理? 相同元素结构占 50% 如何处理?
3、你是如何判断一个组件是否封装? 如何封装设计?
判断依据:
有多个地方可能用到这个组件
这是一个完整的模块, 比较独立, 例如 菜单
这个是业务组件中的一块, 业务逻辑较多, 与其他业务逻辑参杂在一起不好维护
4、基于 Vue3 的 Composition API 又该如何封装? 会有哪些问题?
三、个人建议
1. 业务组件与非业务组件应区分开, 业务级别通用组件放 src/business 下
2. 所有的通用组件需全局注册, 且业务组件应添加前缀, 例 <BFT-PageIndex />
3. 所有组件文件夹采用 小写+横杠 的命名, 注册时使用 首字母大写+横杠 的方式(推荐)
4. 对于UI库组件, 可以考虑在按需引入的同时对其再封装一层或进行一些处理, 这样对一些
常用属性的配置和后期更换UI库有帮助, 例如: 对整个页面的表单 size 进行调整为 small(考虑)
5. 对于业务组件, 在处理文件结构时, 个人不建议根据菜单或者模块对其再进行划分, 而是统一将组件放在
同一层级, 这样在相互引用的时候相对方便, 也利于后期的维护
声明顺序
- components
- mixins
- props
- data
- computed
- filter
- watch
- created
- mounted
- activited
- beforeRouteUpdate
- destroyed
- methods
结构划分
// 注: 这里的 UI组件 iview 也可以划分到三方组件库中去, 或者将 editor 组件划分到 components 中亦可
// 三方通用组件(仅个人推荐)
- lib
- editor
- src
- index.vue // 基于monaco配置封装编辑器
- index.js // 组件注册
// 非业务通用组件(与具体的业务、项目无关, 放在任何一个项目中都可以直接使用)
- components
- index.js // 组件出口
- iview
- src
- table.vue // 基于UI组件的再封装, 是否封装视需求而定
- index.js // 组件注册, 可以进行按需引入、默认值配置等
- back-top
- src
- index.vue // 返回顶部组件
- index.js // 组件注册, 可以添加公司前缀
// 业务通用组件(仅个人推荐)
- business
- page-index
- src
- index.vue // 封装业务级别的组件
- index.js // 组件注册, 可以添加项目前缀
这里说下为神马
4.1、业务组件与非业务组件分开, 使得我们可以完全放心的将 components 在不同的项目中复用, 而不用担心出现冗余的代码或者意外的错误, 当然我们也可以将其作为自己的UI库通过npm方式引入
4.2、这里将 iview 这种UI组件库也放在了这里, 这么做的目的有两个, 一是为了提供一个全局修改和配置的位置, 二是因为大部分时候原有的组件可能并不满足我们的需求, 需要进行二次的封装, 同时也是针对该组件库的一个组件积累
4.3、组件全局注册则是为了方便使用, 且方便替换与修改
三方插件使用规范
1、第三方的组件一般放在 src/lib/ 目录下, 或者通过 npm 安装使用
2、三方组件需要有清晰的文档、有维护痕迹、有一定的下载应用量
3、最好有CDN, 可以离线使用等功能
4、三方插件在使用时需要基于业务再封装时也放在这个目录下
5、当两个以上的业务组件需要用到这个三方组件时, 基于三方组件需要再加一层配置封装
四、其他
中后台项目常用组件罗列(部分, 供参考)
1、表格封装
一、展示
对多行文本、驻停显示
下拉数据、带图标下拉
文件上传、下载
日期时间、相对时间
金额、重量等带单位数据
单元拆分合并等各种数据的展示的封装
二、功能
对表格排序、多列排序
自定义字段、自定义列宽
筛选、多选与全选、单击双击事件
列汇总、表格数据导出等功能的封装
三、编辑
部分情况下可能需要我们允许用户直接在表格上编辑, 涉及的类型同上
2、页面布局
菜单导航、tabs页面切换、面包屑、锚点
表单弹窗、操作确认弹窗、接口返回详情(多)弹窗
空状态时占位图、404页面、其他错误页面
包含表格、分页、搜索、业务按钮、批量操作、等功能的列表页布局组件
3、form表单
下拉列表: 富文本下拉、带勾选的下拉树、虚拟列表、异步级联下拉、改变获取原数据对象
动态表单: 新增、编辑、删除、克隆、排序
高级搜索: 条件过滤、搜索联想、条件异或
树形结构: 带勾选、带异步
4、其他组件
点击复制
滑动验证
图片放大镜
代码高亮组件
常用函数命名单词
1. get 获取/set 设置,
1. add 增加/remove 删除
1. create 创建/destory 移除
1. start 启动/stop 停止
1. open 打开/close 关闭,
1. read 读取/write 写入
1. load 载入/save 保存,
1. create 创建/destroy 销毁
1. begin 开始/end 结束,
1. backup 备份/restore 恢复
1. import 导入/export 导出,
1. split 分割/merge 合并
1. inject 注入/extract 提取,
1. attach 附着/detach 脱离
1. bind 绑定/separate 分离,
1. view 查看/browse 浏览
1. edit 编辑/modify 修改,
1. select 选取/mark 标记
1. copy 复制/paste 粘贴,
1. undo 撤销/redo 重做
1. insert 插入/delete 移除,
1. add 加入/append 添加
1. clean 清理/clear 清除,
1. index 索引/sort 排序
1. find 查找/search 搜索,
1. increase 增加/decrease 减少
1. play 播放/pause 暂停,
1. launch 启动/run 运行
1. compile 编译/execute 执行,
1. debug 调试/trace 跟踪
1. observe 观察/listen 监听,
1. build 构建/publish 发布
1. input 输入/output 输出,
1. encode 编码/decode 解码
1. encrypt 加密/decrypt 解密,
1. compress 压缩/decompress 解压缩
1. pack 打包/unpack 解包,
1. parse 解析/emit 生成
1. connect 连接/disconnect 断开,
1. send 发送/receive 接收
1. download 下载/upload 上传,
1. refresh 刷新/synchronize 同步
1. update 更新/revert 复原,
1. lock 锁定/unlock 解锁
1. check out 签出/check in 签入,
1. submit 提交/commit 交付
1. push 推/pull 拉,
1. expand 展开/collapse 折叠
1. begin 起始/end 结束,
1. start 开始/finish 完成
1. enter 进入/exit 退出,
1. abort 放弃/quit 离开
1. obsolete 废弃/depreciate 废旧,
1. collect 收集/aggregate 聚集
