移动端【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 页面模块划分

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

0. 候选人信息模块

   • 页面：CandidateInfoPage
   • VM：CandidateInfoVM
   • 职责：管理候选人基本信息

1. 面试讨论模块

   • 页面：DiscussionPage
   • VM：DiscussionVM
   • 职责：处理面试讨论相关功能

2. 面试记录模块

   • 页面：RecordPage
   • VM：RecordVM
   • 职责：记录面试过程信息

3. 面试问题模块

   • 页面：InterviewQuestionPage
   • VM：InterviewQuestionVM
   • 职责：管理面试题目

4. 能力评估模块

   • 页面：CapabilityEvalPage
   • VM：CapabilityEvalVM
   • 职责：处理能力评估相关功能

3.2 模块间通信

0. 向上通信

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

1. 向下通信

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

四、实现细节

4.1 视图层实现

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

0. 顶部操作区

   • 微适配信息
   • 发起讨论
   • 录音功能

1. 面试信息区

   • 基础信息展示
   • 面试方式选择

2. 面试问题区

   • 问题列表
   • 问题录入

3. 能力评估区

   • 评估表单
   • 评估结果

4.2 数据流转

0. 数据初始化

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

2. 状态同步

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

五、优化成效

5.1 代码质量改善

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

5.2 开发效率提升

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

六、后续优化

0. 深化解耦

   • 引入依赖注入
   • 优化模块间通信

1. 状态管理优化

   • 引入响应式状态管理
   • 简化数据流转

2. 持续重构

   • 组件抽象优化
   • 性能持续优化

七、经验总结

0. 重构建议

   • 保持功能稳定性
   • 渐进式重构
   • 重视测试覆盖

1. 架构思考

   • 合理的粒度控制
   • 清晰的职责划分
   • 可扩展性设计

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