组件封装:封装一个可复用的crud界面的思路

业务需求: 完成五个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 Modulesstyled-components/emotion (React) / Vue 的<style scoped>,避免全局污染
样式传入 : 暴露 className 和 style 属性,允许使用者从外部覆盖部分样式
定制插槽传入 :添加表格和表单头部和尾部工具栏插槽,以及表格操作栏插槽
主题定制:如果项目有主题需求(比如一套公司的设计系统),会通过CSS Variables或 Context.Provider来注入主题变量(颜色、间距等),确保组件能无缝集成

6. 健壮性和边界处理

输入校验 ::对 Props 进行合理的校验或类型约束
边界情况 :处理极端或无效输入(如数组为空时显示空状态占位图 Empty)、加载状态(Loading)
错误捕获 :内部使用 try...catch,外层可配合 ErrorBoundary(react) 防止崩溃
易于调试:组件有良好的组织结构,必要时添加开发日志

总结

封装组件的原则是:先想好别人怎么用它,设计清晰稳定的API(Props/Events),保证功能可靠和界面可访问,同时兼顾性能和灵活定制能力,最后配上好用的文档。在实践中,我会根据项目的具体需求(比如设计系统规范)对以上几点有所侧重"

根据步骤和实际开发功能先设计再下手写,这样可以更加高效的完成
从简单开始 :先实现基础功能,再逐步添加复杂特性
渐进式增强 :允许组件在不同场景下有不同的使用方式
文档完善 :提供清晰的使用文档和示例
充分测试 :编写单元测试确保组件质量

(欢迎各位大佬提出指导)

相关推荐
Monkey的自我迭代几秒前
Python标准库:时间与随机数全解析
前端·python·数据挖掘
行云&流水1 分钟前
打造自己的组件库(二)CSS工程化方案
前端·vue.js·vue3组件库
知了清语25 分钟前
pnpm之monorepo项目, vite版本冲突, 导致vite.config.ts ts警告处理
前端
弗锐土豆1 小时前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依
Hilaku1 小时前
我为什么放弃了“大厂梦”,去了一家“小公司”?
前端·javascript·面试
1undefined21 小时前
element中的table改造成虚拟列表(不定高),并封装成hooks
前端·vue.js
浅墨momo1 小时前
搭建第一个Shopify App
前端·程序员
然我1 小时前
React 事件机制:从代码到原理,彻底搞懂合成事件的核心逻辑
前端·react.js·面试
Codebee1 小时前
OneCode 组件服务通用协议栈:构建企业级低代码平台的技术基石
前端·前端框架·开源