业务需求: 完成五个crud页面,大同小异
封装可复用组件是我们前端日常开发中的核心工作,需要围绕'开箱即用'和'灵活扩展'来实现大同和小异
组件设计原则
- 高内聚低耦合:核心需求明确,减少外部依赖
- 参数化配置: 定义清晰的接口,通过props控制组件行为,减少硬编码
- 健壮性和边界处理:输入校验、类型提示、易于调试
- 状态管理:遵循"受控"优先原则
- 事件驱动:通过事件通知外部操作结果
- 可定制性:提供插槽、样式覆盖等扩展点
设计原则实践
1. 高内聚低耦合
明确组件需要解决什么具体问题 :提供一个可配置化的风格相同的,api差距不大的crud业务组件,减少重复开发
核心功能边界在哪里:表格展示界面以及查询、弹框修改查看详情、删除数据(crud)
2. 参数化配置
props设计
JSON
props:{
// API 配置
apiConfig: {
listApi: '', // 获取列表的 API
createApi: '', // 创建的 API
updateApi: '', // 更新的 API
deleteApi: '', // 删除的 API
},
// 表格配置
tableConfig:{
columns:[{}],// 自定义表格行
headerTitle?: string;
rowKey?: string;
... //根据ui框架表格动态选择剩余参数传递,vue用$attrs
},
// 表单配置
formConfig:{
formFields:[]
}
// 功能选择配置(表格显示功能是基本的,这里不做配置)
actionConfig:{
deleteAction:true,
createAction:true,
updateAction:true
}
events事件输出
JSON
'create-success'
'create-fail'
'update-success'
'update-fail'
'delete-success',
'delete-fail'
3. 状态管理
这是使用者控制组件行为的关键,使用props添加参数配置控制组件的行为,再通过事件回传通知变化
4. 事件驱动
和上面原则一样,需要通过事件通知外部操作结果
5. 可定制性
样式隔离 :优先选用CSS Modules
或 styled-components
/emotion (React)
/ Vue 的<style scoped>
,避免全局污染
样式传入 : 暴露 className 和 style 属性,允许使用者从外部覆盖部分样式
定制插槽传入 :添加表格和表单头部和尾部工具栏插槽,以及表格操作栏插槽
主题定制:如果项目有主题需求(比如一套公司的设计系统),会通过CSS Variables或 Context.Provider来注入主题变量(颜色、间距等),确保组件能无缝集成
6. 健壮性和边界处理
输入校验 ::对 Props 进行合理的校验或类型约束
边界情况 :处理极端或无效输入(如数组为空时显示空状态占位图 Empty)、加载状态(Loading)
错误捕获 :内部使用 try...catch,外层可配合 ErrorBoundary(react) 防止崩溃
易于调试:组件有良好的组织结构,必要时添加开发日志
总结
封装组件的原则是:先想好别人怎么用它,设计清晰稳定的API(Props/Events),保证功能可靠和界面可访问,同时兼顾性能和灵活定制能力,最后配上好用的文档。在实践中,我会根据项目的具体需求(比如设计系统规范)对以上几点有所侧重"
根据步骤和实际开发功能先设计再下手写,这样可以更加高效的完成
从简单开始 :先实现基础功能,再逐步添加复杂特性
渐进式增强 :允许组件在不同场景下有不同的使用方式
文档完善 :提供清晰的使用文档和示例
充分测试 :编写单元测试确保组件质量
(欢迎各位大佬提出指导)