const delList = async row => { if (!row.settleGroupUserId) { await elMessageConfirm({ message: $t('game.confirmDelete'), showCancelButton: true, type: 'warning', cancelButtonText: $t('common.no'), confirmButtonText: $t('common.yes') }); } DeleteSettlePlatformGroup(row.id).then(_res => { getListInfo({ pageIndex: 1 }); }); }; 利用单例模式,优化一下,
时间: 2025-09-04 18:05:26 AIGC 浏览: 0
在你提供的代码中,`delList` 函数用于删除某条记录,其中调用了 `elMessageConfirm` 来进行确认操作。如果我们希望利用 **单例模式(Singleton Pattern)** 对其进行优化,目标是:
- **避免重复创建确认框实例(虽然 Element UI 本身已经做了单例管理)**
- **封装确认框逻辑为一个统一的确认服务,提高可维护性和复用性**
---
### ✅ 优化思路:
1. 创建一个 `ConfirmService`,作为单例对象,封装确认框逻辑。
2. 将国际化 `$t` 和 `elMessageConfirm` 的调用统一管理。
3. 在 `delList` 中调用该服务,而不是直接使用 `elMessageConfirm`。
---
### ✅ 优化后的代码:
```javascript
// ConfirmService.js
const ConfirmService = (() => {
let instance;
const init = (VueInstance) => {
const $t = VueInstance.$t;
const elMessageConfirm = VueInstance.$confirm;
return {
confirmDelete() {
return elMessageConfirm($t('game.confirmDelete'), '', {
confirmButtonText: $t('common.yes'),
cancelButtonText: $t('common.no'),
type: 'warning',
showCancelButton: true
});
}
};
};
return {
getInstance(VueInstance) {
if (!instance) {
instance = init(VueInstance);
}
return instance;
}
};
})();
export default ConfirmService;
```
---
### ✅ 使用优化后的 `delList` 函数:
```javascript
// 在 Vue 组件中使用
import ConfirmService from './ConfirmService';
const delList = async (row, vueInstance) => {
const confirmService = ConfirmService.getInstance(vueInstance);
if (!row.settleGroupUserId) {
try {
await confirmService.confirmDelete();
} catch {
// 用户点击取消或关闭弹窗
return;
}
}
DeleteSettlePlatformGroup(row.id).then(() => {
getListInfo({ pageIndex: 1 });
}).catch(err => {
console.error('删除失败:', err);
});
};
```
---
### ✅ 优点:
- **单例模式** 确保全局只有一个确认服务实例,减少重复创建。
- **封装逻辑** 提高了代码复用性,比如其他地方也可以调用 `confirmService.confirmDelete()`。
- **可测试性增强**,将 UI 交互与业务逻辑分离。
- **便于扩展**,比如以后要更换提示框样式或支持多语言,只需修改服务内部逻辑。
---
###
阅读全文