移动端【01】面试系统的MVVM重构实践

基于MVVM的移动端面试系统重构实践：模块化设计与实现

一、项目背景

面试记录表系统在经过一年多的迭代后，代码质量问题日益突出。View和ViewModel代码均超过3000行，组件引用超过1000个，亟需进行架构重构。本文将详细介绍基于MVVM架构的模块化重构方案。

二、系统架构设计

2.1 整体架构

系统采用MVVM架构模式，通过MainPage作为容器页面，统一管理各个功能模块。核心架构如下：

复制代码

MainPage
├── MainVM (核心控制器)
│   ├── CommonData
│   ├── CommonFunction
│   └── MainModel
│
└── 功能模块
    ├── CandidateInfo（候选人信息）
    ├── Discussion（面试讨论）
    ├── Record（面试记录）
    ├── InterviewInfo（面试信息）
    ├── InterviewQuestion（面试问题）
    ├── CapabilityEval（能力评估）
    ├── InterviewEval（面试评价）
    ├── Email（邮件处理）
    └── Submit（提交模块）

2.2 核心类设计

MainVM（核心控制器）

复制代码

class MainVM {
    // 公共数据
    CommonData commonData;
    // 公共功能
    CommonFunction commonFunction;
    // 主数据模型
    MainModel mainModel;
    
    // 连接子页面的方法
    void connectChildPages();
}

功能模块结构

每个功能模块都遵循以下结构：

复制代码

// Page层
class ModulePage {
    ModuleVM vm;  // 对应的ViewModel
    // UI构建方法
}

// ViewModel层
class ModuleVM {
    // 功能函数
    ModuleFunc func;
    // 数据模型
    ModuleModel model;
    // 模块数据
    ModuleData data;
    // 主VM引用
    MainVM mainVM;
}

三、模块化设计

3.1 页面模块划分

根据业务功能，将面试记录表拆分为以下模块：

候选人信息模块
- 页面：CandidateInfoPage
- VM：CandidateInfoVM
- 职责：管理候选人基本信息
面试讨论模块
- 页面：DiscussionPage
- VM：DiscussionVM
- 职责：处理面试讨论相关功能
面试记录模块
- 页面：RecordPage
- VM：RecordVM
- 职责：记录面试过程信息
面试问题模块
- 页面：InterviewQuestionPage
- VM：InterviewQuestionVM
- 职责：管理面试题目
能力评估模块
- 页面：CapabilityEvalPage
- VM：CapabilityEvalVM
- 职责：处理能力评估相关功能

3.2 模块间通信

向上通信

复制代码

class ModuleVM {
    MainVM mainVM;
    
    void someAction() {
        // 通过mainVM调用公共方法
        mainVM.commonFunction.showLoading();
    }
}

向下通信

复制代码

class MainVM {
    void updateModules() {
        // 通过模块引用更新状态
        moduleVMs.forEach((vm) => vm.updateState());
    }
}

四、实现细节

4.1 视图层实现

基于UI设计图，将面试记录表页面划分为多个功能区：

顶部操作区
- 微适配信息
- 发起讨论
- 录音功能
面试信息区
- 基础信息展示
- 面试方式选择
面试问题区
- 问题列表
- 问题录入
能力评估区
- 评估表单
- 评估结果

4.2 数据流转

数据初始化

class MainVM {
void initData() {
commonData = CommonData();
// 初始化各模块数据
moduleVMs.forEach((vm) => vm.initData());
}
}
状态同步

class ModuleVM {
void syncState() {
// 同步模块状态
mainVM.commonFunction.syncState(moduleState);
}
}

五、优化成效

5.1 代码质量改善

单个文件代码量降低到300行以内
模块职责清晰，耦合度降低
可维护性显著提升

5.2 开发效率提升

多人协作更顺畅
测试覆盖更容易
Bug定位更准确

六、后续优化

深化解耦
- 引入依赖注入
- 优化模块间通信
状态管理优化
- 引入响应式状态管理
- 简化数据流转
持续重构
- 组件抽象优化
- 性能持续优化

七、经验总结

重构建议
- 保持功能稳定性
- 渐进式重构
- 重视测试覆盖
架构思考
- 合理的粒度控制
- 清晰的职责划分
- 可扩展性设计

本次重构通过合理的模块化设计和MVVM架构的规范实现，成功解决了代码维护性问题，为后续的持续优化奠定了良好基础。