Elux项目中的微模块设计与实践指南

什么是Elux微模块

在Elux项目中，微模块(Module)是构建应用的核心单元，它采用"高内聚、低耦合"的设计理念，将业务逻辑和视图封装为独立的可复用单元。每个微模块都包含自己的业务模型(Model)和视图(View)，可以独立开发、测试和维护。

微模块的创建步骤

1. 创建模块基础结构

首先需要为模块定义一个唯一的moduleName，并创建相应的目录结构。虽然逻辑上所有微模块是平级的，但物理上可以通过文件夹层级来组织管理。

典型模块目录结构如下：

article/
├── model.ts      // 业务模型
├── views/
│   └── Main.tsx  // 视图组件
└── index.ts      // 模块入口文件

2. 定义业务模型

在model.ts中定义模块的业务逻辑和状态管理。业务模型是微模块的核心，负责处理数据流和业务规则。

3. 开发视图组件

在views/目录下创建React组件，这些组件将负责UI展示和用户交互。建议将主视图命名为Main.tsx以保持一致性。

4. 导出模块

在index.ts中使用exportModule方法封装并导出模块：

import {exportModule} from '@elux/react-web';
import {Model} from './model';
import main from './views/Main';

export default exportModule('article', Model, {main}, {data:'自定义数据'});

exportModule方法参数说明：

• moduleName: 模块唯一标识
• ModelClass: 业务模型类
• components: 视图组件集合
• data: 可选的自定义数据

微模块的使用方式

1. 配置模块加载器

在项目配置文件(通常为Project.ts)中配置各模块的加载方式：

export const ModuleGetter = {
  stage: () => stage,          // 同步加载根模块
  article: () => import('@/modules/article'), // 异步按需加载
  my: () => import('@/modules/my'),           // 异步按需加载
};

2. 动态加载视图组件

使用LoadComponent方法动态加载模块视图，这种方式支持懒加载并自动初始化对应的业务模型：

const Article = LoadComponent('article', 'main');
const My = LoadComponent('my', 'main');

3. 获取模块数据

可以通过GetData方法获取模块导出的自定义数据：

const articleData = GetData('article');

微模块的初始化过程

Elux微模块的初始化遵循特定的生命周期：

1. 每个模块只会被加载一次，确保单例模式
2. 路由变化时创建新Store并触发根模块的onMount钩子
3. 根模块需在onMount中完成状态初始化
4. 可以主动挂载子模块或通过LoadComponent自动触发
5. 所有模块onMount完成后才会渲染视图

根模块的特殊性

根模块(通常命名为stage)具有以下特点：

• 必须存在且同步加载
• 最先被挂载(Mount)
• 作为应用基座，可承载公共资源和状态
• 其视图作为UI结构的顶层容器

微模块间的通信方式

Elux推荐三种模块间通信方式：

1. 通过Store共享状态：各模块可以读取(但不建议修改)其他模块的状态
2. 通过Action交互：利用Model中的reducer和effect实现模块间事件通信
3. 直接调用(不推荐)：通过import等方式直接访问模块内部元素

最佳实践建议

1. 保持模块职责单一，避免创建过于复杂的模块
2. 优先使用Action进行跨模块通信，减少直接依赖
3. 合理规划模块粒度，过大的模块应考虑拆分
4. 根模块应保持精简，仅包含必要的公共逻辑
5. 充分利用异步加载优化应用性能

通过遵循这些原则，开发者可以构建出结构清晰、易于维护的Elux应用架构。微模块化设计使得团队协作更加高效，同时也为应用的长期演进奠定了良好基础。