模块化方案

概述

模块化是将复杂的应用拆分成独立模块的开发方式，每个模块负责特定的功能，提高代码的可维护性和团队协作效率。

模块化标准

ES Modules (ESM)

// 导出
export const name = 'module'
export function func() { }

// 导入
import { name, func } from './module.js'

CommonJS

// 导出
module.exports = { name: 'module' }

// 导入
const module = require('./module')

AMD (Asynchronous Module Definition)

define(['dependency'], function(dependency) {
  return { name: 'module' }
})

模块化架构

按功能划分

src/
├── modules/
│   ├── user/          # 用户模块
│   ├── product/       # 产品模块
│   ├── order/         # 订单模块
│   └── payment/       # 支付模块

按层级划分

src/
├── components/        # 组件层
├── services/         # 服务层
├── utils/            # 工具层
├── store/            # 状态管理
└── api/              # API 层

模块化实践

1. 模块职责清晰

每个模块应该有明确的职责边界，避免功能交叉。

2. 接口设计

• 暴露清晰的公共 API
• 隐藏内部实现细节
• 使用 TypeScript 定义接口类型

3. 依赖管理

• 明确模块间的依赖关系
• 避免循环依赖
• 使用依赖注入解耦

微前端架构

模块联邦 (Module Federation)

// webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button'
      },
      shared: ['react', 'react-dom']
    })
  ]
}

qiankun 微前端框架

• 主应用：负责子应用的注册和加载
• 子应用：独立开发、独立部署
• 通信机制：Props、事件总线、全局状态

最佳实践

1. 模块命名规范

• 使用有意义的命名
• 遵循统一的命名约定
• 避免使用缩写

2. 文件结构

module/
├── index.js          # 入口文件
├── components/       # 模块组件
├── services/         # 模块服务
├── utils/            # 模块工具
└── types/            # 类型定义

3. 版本管理

• 使用语义化版本
• 维护 CHANGELOG
• 文档化 API 变更

常见问题

如何处理模块间的依赖？

• 使用依赖注入
• 通过接口抽象
• 避免紧耦合

如何实现模块的按需加载？

• 动态 import()
• 路由懒加载
• 代码分割

相关资源

• 微前端架构
• 工程化实践
• 模块化设计模式