模块注册中心

统一的模块资源管理和注册系统

📖 概述

模块注册中心是微前端架构的核心组件，负责统一管理各个子模块的组件、API、工具函数、路由等资源。支持本地模块、联邦模块和微应用模块的统一注册和管理。

🏗️ 架构设计

核心组件

ModuleRegistry              // 模块注册中心  
├── ModuleResource         // 模块资源接口
├── ModuleMetadata         // 模块元数据
├── ModuleStatus          // 模块状态枚举
└── RegisterOptions       // 注册选项

资源类型

interface ModuleResource {
  moduleId: string                    // 模块ID
  components?: Record<string, any>    // Vue组件
  apis?: Record<string, any>         // API接口
  utils?: Record<string, any>        // 工具函数
  stores?: Record<string, any>       // 状态管理
  routes?: RouteRecordRaw[]          // 路由配置
  [key: string]: any                 // 其他资源
}

🚀 快速开始

1. 基础使用

import { moduleRegistry } from '@/utils/module-registry'

// 注册模块
moduleRegistry.register('device-manager-ui', {
  components: {
    DeviceList: defineAsyncComponent(() => import('./components/DeviceList.vue')),
    DeviceDetail: defineAsyncComponent(() => import('./components/DeviceDetail.vue'))
  },
  apis: {
    deviceApi: {
      getList: () => api.get('/devices'),
      getById: (id) => api.get(`/devices/${id}`)
    }
  },
  utils: {
    deviceUtils: {
      formatStatus: (status) => statusMap[status],
      validateDevice: (device) => device.name && device.type
    }
  }
})

// 获取模块资源
const deviceModule = moduleRegistry.getModule('device-manager-ui')
console.log('设备模块:', deviceModule)

// 获取特定资源类型
const deviceComponents = moduleRegistry.getResource('device-manager-ui', 'components')
const DeviceList = deviceComponents?.DeviceList

2. 分类注册资源

// 分别注册不同类型的资源
moduleRegistry.registerResource('device-manager-ui', 'components', {
  DeviceList: DeviceListComponent,
  DeviceDetail: DeviceDetailComponent
})

moduleRegistry.registerResource('device-manager-ui', 'apis', {
  deviceApi: new DeviceApi()
})

moduleRegistry.registerResource('device-manager-ui', 'stores', {
  useDeviceStore: useDeviceStore
})

📦 模块注册

1. 本地模块注册

// src/modules/device-manager-ui-ui/index.ts
import DeviceList from './components/DeviceList.vue'
import DeviceDetail from './components/DeviceDetail.vue'
import { deviceApi } from './api'
import { useDeviceStore } from './store'
import { routes } from './routes'
import registerSetting from './registry.ts'
import { moduleRegistry } from '@/utils/module-registry'

const register = () => {
  moduleRegistry.register('device-manager-ui', registerSetting)
}

// 导出给模块加载器
export default {
  // 获取默认路由
  getDefaultRoutes() {
    return routes
  },
  
  // 获取过滤路由 (不需要token的路由)
  getFilterRoutes() {
    return ['/device/public']
  },
  
  // 注册模块资源
  register() {
    moduleRegistry.register('device-manager-ui', registerSetting)
  }
}

🔍 资源查询

1. 基础查询

import { 
  moduleRegistry, 
  getModule, 
  getResource, 
  getResourceItem,
  hasModule,
  hasResource 
} from '@/utils/module-registry'

// 检查模块是否存在
if (hasModule('device-manager-ui')) {
  // 获取完整模块
  const module = getModule('device-manager-ui')
  
  // 获取特定资源类型
  const components = getResource('device-manager-ui', 'components')
  const apis = getResource('device-manager-ui', 'apis')
  
  // 获取具体资源项
  const DeviceList = getResourceItem('device-manager-ui', 'components', 'DeviceList')
  const deviceApi = getResourceItem('device-manager-ui', 'apis', 'deviceApi')
}

// 检查资源是否存在
if (hasResource('device-manager-ui', 'components')) {
  console.log('设备管理模块有组件资源')
}

if (hasResourceItem('device-manager-ui', 'components', 'DeviceList')) {
  console.log('设备列表组件已注册')
}

2. 搜索模块

// 搜索包含特定资源的模块
const modulesWithComponents = moduleRegistry.searchModules('components')
console.log('包含组件的模块:', modulesWithComponents)

const modulesWithDeviceList = moduleRegistry.searchModules('components', 'DeviceList')
console.log('包含DeviceList组件的模块:', modulesWithDeviceList)

// 搜索包含API的模块
const modulesWithApis = moduleRegistry.searchModules('apis')

3. 获取所有资源

// 获取所有已注册模块ID
const allModuleIds = moduleRegistry.getAllModuleIds()
console.log('所有模块ID:', allModuleIds)

// 获取所有模块
const allModules = moduleRegistry.getAllModules()
console.log('所有模块:', allModules)

// 获取所有模块元数据
const allMetadata = moduleRegistry.getAllMetadata()
console.log('所有模块元数据:', allMetadata)

📊 状态管理

1. 模块状态

import { ModuleStatus } from '@/utils/module-registry'

// 模块状态枚举
const statuses = {
  IDLE: 'idle',           // 空闲状态
  LOADING: 'loading',     // 加载中
  LOADED: 'loaded',       // 已加载
  REGISTERED: 'registered', // 已注册
  ERROR: 'error'          // 错误状态
}

2. 元数据管理

// 更新模块元数据
moduleRegistry.updateMetadata('device-manager-ui', {
  status: ModuleStatus.LOADING,
  loadTime: Date.now(),
  version: '1.2.0',
  source: 'federation'
})

// 获取模块元数据
const metadata = moduleRegistry.getMetadata('device-manager-ui')
console.log('模块元数据:', metadata)

/*
输出:
{
  moduleId: 'device-manager-ui',
  status: 'loaded',
  loadTime: 1640995200000,
  registerTime: 1640995201000,
  version: '1.2.0',
  source: 'federation',
  dependencies: ['vue', 'ant-design-vue']
}
*/

3. 模块统计

// 获取模块统计信息
const stats = moduleRegistry.getModuleStats()
console.log('模块统计:', stats)

/*
输出:
{
  totalModules: 5,
  registeredModules: 4,
  loadingModules: 1,
  errorModules: 0,
  federationModules: 2,
  microAppModules: 1,
  localModules: 2,
  averageLoadTime: 1250,
  modulesByStatus: {
    idle: [],
    loading: ['notify-manager'],
    loaded: ['device-manager-ui'],
    registered: ['user-manager', 'system-manager'],
    error: []
  }
}
*/

🔧 高级功能

1. 批量操作

// 批量注册本地模块
moduleRegistry.batchRegister([
  {
    moduleId: 'device-manager-ui',
    resource: { components: { DeviceList } }
  },
  {
    moduleId: 'user-manager', 
    resource: { components: { UserList } }
  }
], { 
  allowPartialFailure: true, // 允许部分失败
  override: false            // 不覆盖已存在的模块
})

// 批量加载联邦模块
await moduleRegistry.batchLoadFederationModules([
  { moduleId: 'device-manager-ui', remoteName: 'deviceApp', exposedModule: './DeviceModule' },
  { moduleId: 'notify-manager', remoteName: 'notifyApp', exposedModule: './NotifyModule' }
])

2. 条件注册

// 根据条件注册不同资源
const registerModule = (moduleId: string, env: string) => {
  const baseResource = {
    components: { /* 基础组件 */ },
    apis: { /* 基础API */ }
  }
  
  if (env === 'development') {
    baseResource.utils = { 
      debugUtils: { /* 调试工具 */ }
    }
  }
  
  if (env === 'production') {
    baseResource.utils = {
      analyticsUtils: { /* 分析工具 */ }
    }
  }
  
  moduleRegistry.register(moduleId, baseResource)
}

模块联邦

1. 动态加载远程组件或者模块

import {
  moduleRegistry
} from '@/utils/module-registry'

// 加载整个模块
moduleRegistry.loadRemoteModule('device-manager-ui', 'http://loclahost:8081/assets/remmoteEntry.js')

// 加载单个组件
moduleRegistry.loadRemoteComponent('device-manager-ui', 'http://loclahost:8081/assets/remmoteEntry.js', 'Title')

🎯 实际应用

1. 在Vue组件中使用

<template>
  <div>
    <component :is="DeviceList" v-if="DeviceList" />
    <div v-else>设备列表组件加载中...</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { moduleRegistry } from '@/utils/module-registry'

const DeviceList = ref(null)

onMounted(() => {
  // 检查组件是否已注册
  if (moduleRegistry.hasResourceItem('device-manager-ui', 'components', 'DeviceList')) {
    DeviceList.value = moduleRegistry.getResourceItem('device-manager-ui', 'components', 'DeviceList')
  }
})
</script>

2. API调用

import { moduleRegistry } from '@/utils/module-registry'

// 获取并使用API
const deviceApi = moduleRegistry.getResourceItem('device-manager-ui', 'apis', 'deviceApi')
if (deviceApi) {
  const devices = await deviceApi.getList()
  console.log('设备列表:', devices)
} else {
  console.error('设备API未注册')
}

3. 工具函数使用

import { moduleRegistry } from '@/utils/module-registry'

// 获取工具函数
const deviceUtils = moduleRegistry.getResourceItem('device-manager-ui', 'utils', 'deviceUtils')
if (deviceUtils) {
  const formattedStatus = deviceUtils.formatStatus('online')
  const isValid = deviceUtils.validateDevice(deviceData)
}

4. 状态管理

import { moduleRegistry } from '@/utils/module-registry'

// 获取状态管理
const useDeviceStore = moduleRegistry.getResourceItem('device-manager-ui', 'stores', 'useDeviceStore')
if (useDeviceStore) {
  const deviceStore = useDeviceStore()
  await deviceStore.fetchDevices()
}

⚠️ 最佳实践

1. 模块设计

保持模块的单一职责
定义清晰的模块边界
避免模块间的循环依赖

2. 资源管理

使用语义化的资源命名
合理组织资源结构
及时清理无用资源

3. 性能优化

按需注册模块资源
使用懒加载策略
定期清理模块缓存

4. 错误处理

实现完善的错误边界
提供降级处理方案
记录详细的错误日志

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

模块注册中心

📖 概述

🏗️ 架构设计

核心组件

资源类型

🚀 快速开始

1. 基础使用

2. 分类注册资源

📦 模块注册

1. 本地模块注册

🔍 资源查询

1. 基础查询

2. 搜索模块

3. 获取所有资源

📊 状态管理

1. 模块状态

2. 元数据管理

3. 模块统计

🔧 高级功能

1. 批量操作

2. 条件注册

模块联邦

1. 动态加载远程组件或者模块

🎯 实际应用

1. 在Vue组件中使用

2. API调用

3. 工具函数使用

4. 状态管理

⚠️ 最佳实践

1. 模块设计

2. 资源管理

3. 性能优化

4. 错误处理

FilesExpand file tree

模块注册中心.md

Latest commit

History

模块注册中心.md

File metadata and controls

模块注册中心

📖 概述

🏗️ 架构设计

核心组件

资源类型

🚀 快速开始

1. 基础使用

2. 分类注册资源

📦 模块注册

1. 本地模块注册

🔍 资源查询

1. 基础查询

2. 搜索模块

3. 获取所有资源

📊 状态管理

1. 模块状态

2. 元数据管理

3. 模块统计

🔧 高级功能

1. 批量操作

2. 条件注册

模块联邦

1. 动态加载远程组件或者模块

🎯 实际应用

1. 在Vue组件中使用

2. API调用

3. 工具函数使用

4. 状态管理

⚠️ 最佳实践

1. 模块设计

2. 资源管理

3. 性能优化

4. 错误处理