鸿蒙开发别再堆代码了！手把手教你用 ArkTS 实现模块化架构

摘要

在鸿蒙应用开发中，随着功能逐步复杂化，一个文件几百行代码的情况越来越常见。面对多人协作、需求频繁变动、功能模块庞大等场景，如果还把所有逻辑堆在一起，不仅开发难度高，后期维护也成了灾难。这个时候，就需要"模块化开发"来帮我们分而治之。本文将结合 ArkTS 的特性，讲解如何进行模块拆分、组件组织、路由管理以及数据状态隔离等模块化开发策略。

引言

随着鸿蒙生态逐渐成熟，越来越多的应用开始向 ArkTS 转型。很多开发者都会遇到一个共性问题：代码结构混乱、模块耦合太重、维护成本高。尤其是在大型项目中，UI、业务逻辑、网络请求、数据管理全部混杂在一起，一旦要改动一个小功能，可能牵一发而动全身。

ArkTS 提供了灵活的模块组织能力，我们可以借助其语法特性（如 import/export）、组件机制、页面路由和状态管理机制，实现真正的"模块解耦"。下面我们通过一个个具体模块和示例，来看看如何落地。

模块一：功能逻辑模块的拆分

基础做法：export / import 拆分

目的： 把功能函数或类拆出来，按职责归类，提高复用性和可维护性。

示例代码

// utils/mathUtils.ts
export function add(a: number, b: number): number {
  return a + b;
}

export function subtract(a: number, b: number): number {
  return a - b;
}

// pages/CalculatorPage.ets
import { add, subtract } from '../utils/mathUtils';

@Entry
@Component
struct CalculatorPage {
  build() {
    Row() {
      Column() {
        Text(`2 + 3 = ${add(2, 3)}`)
        Text(`5 - 2 = ${subtract(5, 2)}`)
      }
    }
  }
}

效果

• 功能复用简单
• 后续要扩展乘除功能，只需在 mathUtils.ts 中加即可
• CalculatorPage 页面更清爽，职责更明确

模块二：组件化 UI 构建

为什么组件很关键？

开发 UI 的时候，一开始你可能只是写一个页面，但后来你发现------顶部栏、商品卡片、按钮样式这些地方重复率特别高。如果不封装组件，你得到处复制粘贴，出问题了得全局搜一遍才能改完，太费劲了。

示例代码

// components/UserCard.ets
@Component
export struct UserCard {
  @Prop name: string;
  @Prop age: number;

  build() {
    Column({ space: 5 }) {
      Text(`Name: ${this.name}`)
        .fontSize(16)
      Text(`Age: ${this.age}`)
        .fontSize(14)
    }
    .padding(10)
    .border({ width: 1 })
  }
}

// pages/UserListPage.ets
import { UserCard } from '../components/UserCard';

@Entry
@Component
struct UserListPage {
  build() {
    Column() {
      UserCard({ name: '张三', age: 20 })
      UserCard({ name: '李四', age: 25 })
    }
  }
}

好处

• 实现一次，到处使用
• 样式统一、维护简单
• 不同项目间也能快速迁移

模块三：模块化的页面与路由管理

页面模块化 + 路由注册方式

在鸿蒙中，页面通过 pages 文件夹组织，可以通过 router.pushUrl() 方式跳转。每个页面就是一个模块，我们可以按功能场景将其拆分成多个子模块目录。

示例结构

src/
├── pages/
│   ├── HomePage.ets
│   ├── Product/
│   │   ├── ProductList.ets
│   │   └── ProductDetail.ets
│   └── User/
│       ├── Login.ets
│       └── Profile.ets

示例代码

// pages/HomePage.ets
@Entry
@Component
struct HomePage {
  build() {
    Column() {
      Button("去商品列表页")
        .onClick(() => {
          router.pushUrl('pages/Product/ProductList');
        })
    }
  }
}

// pages/Product/ProductList.ets
@Entry
@Component
struct ProductList {
  build() {
    Column() {
      Text("这是商品列表页")
    }
  }
}

优点

• 页面之间解耦
• 可按模块维护某类页面
• 支持按需加载（未来支持动态模块加载）

模块四：模块化的数据和状态管理

对于模块内部的状态，我们不建议全局暴露。可以通过 ArkTS 的 @State、@Link、@Prop 或封装专用状态管理类，来实现模块内部的数据隔离与通信。

示例：模块状态封装

// store/userStore.ts
export class UserStore {
  name: string = '';
  isLogin: boolean = false;

  login(name: string) {
    this.name = name;
    this.isLogin = true;
  }

  logout() {
    this.name = '';
    this.isLogin = false;
  }
}

// pages/Login.ets
import { UserStore } from '../store/userStore';

@Entry
@Component
struct Login {
  private store: UserStore = new UserStore();

  build() {
    Column() {
      Button("登录张三")
        .onClick(() => {
          this.store.login("张三");
        })
      Text(`当前用户：${this.store.name}`)
    }
  }
}

实际场景举例

场景一：商城系统的模块化

模块划分：

• 用户模块（登录、注册、用户信息）
• 商品模块（列表、详情、下单）
• 订单模块（历史订单、订单详情）
• 公共模块（导航栏、卡片组件）

效果： 每个模块独立开发、调试；多个成员并行协作；后续可替换、独立升级。

场景二：智能家居应用

模块划分：

• 设备控制模块（灯光、空调）
• 场景管理模块（回家、离家模式）
• 用户中心模块（账户管理、通知）

配合组件化： 封装 DeviceCard、SceneButton、UserInfo 等组件，提升复用性。

场景三：表单系统

模块划分：

• 输入组件（InputField、Dropdown）
• 校验模块（规则校验器）
• 提交模块（按钮、状态展示）

实现效果： 表单配置驱动，动态生成页面，结构清晰，维护方便。

QA 环节

Q1：模块间如何传值？ 可以通过 @Prop 或构造函数传值；跨模块共享数据可以使用全局状态管理类或者 EventBus。

Q2：模块化是否会影响性能？ 不会，模块化本质是组织结构优化，合理划分模块还能带来按需编译、页面懒加载等性能提升空间。

Q3：组件太多会不会不好管理？ 建议统一放在 components/ 文件夹下，按类型/业务归类；命名统一规范（如 UserCard, ProductItem），可配合文档或 Storybook 管理。

总结

在 ArkTS 中进行模块化开发，能显著提升项目结构清晰度、开发效率和可维护性。通过拆分功能模块、组件封装、页面路由隔离、状态管理模块化，我们可以构建出一套可扩展、易协作的应用架构。无论是个人项目还是多人团队，建议都从一开始就遵循模块化思维，让项目从小就养成"好结构"的习惯。

如需进一步实战示例或模块拆分策略优化，欢迎继续深入探讨。模块化，不止是技巧，更是一种开发哲学。