Elux项目实战：微模块化架构设计与实现

2025-06-24 10:03:46作者：翟江哲Frasier

项目概述

Elux是一个基于微模块化架构的前端框架，本文将通过一个实际案例（文章管理+商品管理+个人中心系统）来详细讲解如何使用Elux实现模块化开发。

系统功能分析

我们以一个典型的内容管理系统为例，主要包含以下核心功能模块：

文章管理模块：实现文章的增删改查功能
商品管理模块：展示商品列表
个人中心模块：用户信息管理

微模块划分策略

按业务领域划分

Elux推荐按照业务领域进行模块划分，这是实现高内聚低耦合的关键：

src
├── modules
│   ├── article    # 文章管理领域
│   ├── shop       # 商品管理领域
│   ├── my         # 个人中心领域
│   ├── admin      # 鉴权领域（隐含模块）
│   └── stage      # 基座领域（隐含模块）

隐含模块说明

stage模块：作为应用基座，负责：
- 应用启动管理
- 全局样式和公共组件
- 基础工具方法
admin模块：作为鉴权中心，负责：
- 登录认证
- 权限管理
- 公共Admin布局

模块内部结构设计

每个微模块采用相同的目录结构，确保一致性：

article/
├── entities     # 领域模型定义
├── assets       # 静态资源
├── api          # API接口封装
├── components   # 可复用UI组件
├── views        # 业务视图组件
│   ├── Detail   # 详情页
│   ├── Edit     # 编辑页
│   ├── List     # 列表页
│   └── Main     # 模块入口布局
├── model.ts     # 业务模型
└── index.ts     # 模块导出

路由控制实现

Elux采用分层路由控制策略：

一级路由（stage模块控制）：
- 决定哪些主模块（article/shop/admin）参与渲染
二级路由：
- admin模块控制my模块的渲染
- article模块控制内部视图（List/Detail/Edit）的渲染
三级路由（my模块）：
- 控制个人中心内部视图

路由解析示例代码：

// 文章模块路由解析
protected getRouteParams(): RouteParams {
    const {pathname, searchQuery} = this.getRouter().location;
    const [, article, curViewStr = ''] = pathToRegexp('/:article/:curView').exec(pathname) || [];
    const curView: CurView | undefined = CurView[curViewStr] || undefined;
    const {pageCurrent = '', keyword, id} = searchQuery as Record<string, string | undefined>;
    const listSearch = {pageCurrent: parseInt(pageCurrent) || undefined, keyword};
    return {curView, itemId: id, listSearch};
}

业务模型开发

每个模块需要定义自己的业务模型，包含两大核心部分：

1. 状态管理

定义模块状态接口：

export interface ModuleState {
  curView?: CurView;       // 当前展示的视图
  listSearch: ListSearch;  // 列表搜索条件
  list?: ListItem[];       // 列表数据
  listSummary?: ListSummary;// 列表摘要信息
  itemId?: string;         // 当前操作项ID
  itemDetail?: ItemDetail; // 详情数据
}

2. 业务动作

使用装饰器定义业务逻辑：

export class Model extends BaseModel<ModuleState, APPState> {
    // 初始化模块状态
    public async onMount() {
        const params = this.getRouteParams();
        this.dispatch(this.privateActions._initState(params));
        // 根据路由加载数据
        if (params.curView === 'list') {
            await this.dispatch(this.actions.fetchList(params.listSearch));
        }
    }

    // 获取列表数据
    @effect()
    public async fetchList(listSearchData?: ListSearch) {
        const response = await api.getList(listSearchData);
        this.dispatch(this.privateActions._updateList(response));
    }
    
    // 其他业务动作...
}

模块集成方案

1. 模块导出配置

// src/modules/article/index.ts
import {exportModule} from '@elux/react-web';
import {Model} from './model';
import main from './views/Main';

export default exportModule('article', Model, {main});

2. 项目模块配置

// src/Project.ts
export const ModuleGetter = {
    stage: () => stage,  // 同步加载基座模块
    article: () => import('@/modules/article'), // 异步加载
    shop: () => import('@/modules/shop'),
    admin: () => import('@/modules/admin'),
    my: () => import('@/modules/my'),
};

3. 模块使用示例

// 动态加载模块组件
const Article = LoadComponent('article', 'main');

// 在父组件中使用
function ParentComponent({subModule}) {
    return subModule === 'article' ? <Article /> : null;
}

// 访问模块状态
const mapStateToProps = (appState: APPState) => ({
    subModule: appState.stage.subModule
});

// 调用模块动作
const onDelete = (id) => {
    dispatch(Modules.article.actions.deleteItem(id));
};

工程结构总结

完整的单体工程结构如下：

src/
├── modules/
│   ├── article/      # 文章模块
│   ├── shop/         # 商品模块
│   ├── my/           # 个人中心
│   ├── admin/        # 鉴权模块
│   └── stage/        # 基座模块
├── Project.ts        # 模块配置
└── index.ts          # 应用入口

进阶：多团队协作开发

对于大型项目，可以采用多团队协作模式：

模块生产者团队：
- basic-team：负责stage模块
- article-team：负责article和shop模块
- user-team：负责admin和my模块
模块发布方式：
- 将模块打包为npm包
- 发布到私有仓库
集成方式选择：
- 静态编译：通过node_modules集成
- 动态注入：使用Module Federation实现运行时加载