class 封装复杂业务逻辑可提升代码可读性、可维护性与复用性：统一管理校验规则、UI状态、数据行为及跨模块权限，避免逻辑散落和重复。

直接用 class 封装复杂业务逻辑，不是为了套概念，而是让代码真正“可读、可改、可复用”。它把零散的函数、状态、校验、副作用打包成一个有边界的单元，避免逻辑散落在页面各处，改一处牵动八方。

封装表单校验这类重复规则

多个页面都有手机号+验证码输入？别在每个页面写一遍正则和提示文案。用 class 把规则、验证逻辑、错误消息全收进去：

• 构造时定义统一规则（如手机号格式、验证码长度）和对应提示语
• 暴露 validate(field, value) 方法，返回布尔值，不耦合 DOM
• 提供 getErrorMsg(field) 统一返回文案，改文案只需动一处
• 实例化后直接传入任意表单字段，无需关心上下文

封装带状态的 UI 组件（比如弹窗）

弹窗不只是 show/hide，它常含蒙层控制、按钮渲染、回调绑定、关闭防抖等。class 能把这些状态和行为聚在一起：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 把 content、onOk、onCancel、visible 等作为实例属性管理
• 方法如 show() 和 hide() 内部处理 DOM 插入/移除、事件监听、过渡动画
• 继承可复用基础能力：BaseModal 负责居中和蒙层，ConfirmModal 在其上叠加按钮和确认逻辑
• 避免每次 new 都手动拼接 HTML 或重复绑定事件

封装数据模型与业务动作

比如一个订单对象，不只是 { id, status, items } 这样的 plain object。class 可赋予它“行为”：

立即学习“Java免费学习笔记（深入）”；

• 构造时自动补全默认字段（如 createdTime = new Date()）、校验必填项
• 提供 canCancel() 判断当前状态是否允许取消，而不是到处写 if (order.status === 'pending')
• 封装 updateStatus(newStatus)，内部做状态流转校验（不能从 shipped 回退到 pending）
• 用 getter 计算衍生值（如 totalAmount），不用每次调用都重复遍历 items

封装跨模块协作逻辑（比如权限控制器）

权限不是简单判断 role === 'admin'，往往涉及接口级控制、按钮显隐、路由拦截、甚至动态菜单生成。class 能集中管理：

• 初始化时加载用户角色、权限码列表、功能开关配置
• 暴露 hasPermission(code) 和 canAccess(routePath) 方法
• 配合装饰器思想（哪怕不用 @ 语法），在组件或 API 调用前自动介入校验
• 支持运行时刷新权限，触发内部事件通知所有监听者