Dong 的笔记

命令式弹窗组件

5分钟阅读

通用组件封装原则与实践

设计原则

核心原则：封装复杂度可高，调用成本需极低
通过提高组件内部封装复杂度，换取调用时的极简体验，显著提升开发效率和可维护性。

成本模型分析

方案类型公式示例计算总成本
高封装/低调用成本C + c*n100+1*100200
低封装/高调用成本C + c*n1+100*10010001

关键结论：调用次数 n 呈指数级放大调用成本，优先降低调用成本收益最大

弹窗组件优化实践

原始方案分析

组件实现

<!-- MessageBox.vue -->
<template>
  <div class="modal">
    <div class="box">
      <div class="text">{{ msg }}</div>
      <button @click="emit('click')">确定</button>
    </div>
  </div>
</template>
 
<script lang="ts" setup>
defineProps<{ msg: string }>();
const emit = defineEmits(['click']);
</script>
 
<style scoped>
/* 样式代码略 */
</style>

调用方式痛点

  1. 状态管理：需手动维护 showMsgBox 显示状态

  2. 数据传递：需单独定义 msg 响应式变量

  3. 事件处理：需编写关闭逻辑及状态更新

  4. 模板污染：需在模板中添加组件标签

优化方案设计

目标调用方式

// 命令式调用，无需模板和状态管理
showMsg('操作确认', (close) => {
  console.log('用户确认操作');
  close(); // 自主控制关闭时机
});

关键技术方案

  1. 动态挂载：通过 createApp + document.createElement 实现 DOM 级挂载

  2. 自销毁机制：封装 unmount 和 DOM 移除逻辑

  3. CSS-in-JS：使用 @styils/vue 实现样式封装

  4. TSX 集成：Vue 3 + Vite 的 TSX 支持

优化后实现

组件核心代码

// showMsg.tsx
import { createApp, h } from 'vue';
import { styled } from '@styils/vue';
 
// CSS-in-JS 样式组件
const ModalWrapper = styled('div', {
  position: 'fixed',
  width: '100vw',
  height: '100vh',
  backgroundColor: 'rgba(0,0,0,0.3)',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center'
});
 
const ContentBox = styled('div', {
  background: '#fff',
  padding: '24px',
  borderRadius: '8px',
  minWidth: '300px',
  boxShadow: '0 2px 10px rgba(0,0,0,0.1)'
});
 
// 动态组件定义
const MessageBox = {
  props: { msg: String },
  render(ctx: any) {
    return (
      <ModalWrapper>
        <ContentBox>
          <div class="text">{ctx.$props.msg}</div>
          <button onClick={() => ctx.$emit('confirm')}>确定</button>
        </ContentBox>
      </ModalWrapper>
    );
  }
};
 
// 暴露命令式接口
export default function showMsg(
  message: string,
  callback: (closeHandler: () => void) => void
) {
  const container = document.createElement('div');
  document.body.appendChild(container);
 
  const app = createApp(MessageBox, {
    msg: message,
    onConfirm: () => {
      callback(() => {
        app.unmount();
        container.remove();
      });
    }
  });
 
  app.mount(container);
}

方案优势

  1. 开箱即用：无需注册组件，直接函数调用

  2. 自动清理：内置卸载和 DOM 清理逻辑

  3. 样式隔离：CSS-in-JS 避免全局污染

  4. 类型安全：完整的 TypeScript 类型支持

使用示例

<script setup lang="ts">
import showMsg from '@/components/showMsg';
 
const handleBusiness = () => {
  // 三步合一：显示、业务处理、关闭
  showMsg('确认删除该数据？', (close) => {
    fetch('/api/delete').then(() => {
      close();
      location.reload();
    });
  });
};
</script>
 
<template>
  <button @click="handleBusiness">删除数据</button>
</template>

最佳实践总结

  1. 关注点分离：将状态管理内聚到组件内部

  2. 防御式编程：处理边缘情况（多次调用、异常关闭）

  3. 可扩展性：

    • 支持 Promise 化调用

    • 增加动画过渡效果

    • 支持多位置挂载配置

  4. 性能优化：

    • 单例模式避免重复创建

    • 增加防抖机制

    • 延迟卸载动画支持

扩展建议：可封装为 Vue 插件，通过 app.use(MessageBox) 全局注册，同时支持组件式和命令式调用

优化要点说明：

  1. 采用分层结构展示技术演进
  2. 增加成本对比表格直观展示优势
  3. 使用代码注释说明关键技术选择
  4. 添加类型注解和样式方案说明
  5. 补充最佳实践和扩展建议
  6. 使用更专业的 CSS-in-JS 实现
  7. 完善 Promise 化调用示例
  8. 增加错误处理和性能优化建议

关系图谱