摘要

在鸿蒙应用开发中，随着功能逐步复杂化，一个文件几百行代码的情况越来越常见。面对多人协作、需求频繁变动、功能模块庞大等场景，如果还把所有逻辑堆在一起，不仅开发难度高，后期维护也成了灾难。这个时候，就需要“模块化开发”来帮我们分而治之。本文将结合 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 中进行模块化开发，能显著提升项目结构清晰度、开发效率和可维护性。通过拆分功能模块、组件封装、页面路由隔离、状态管理模块化，我们可以构建出一套可扩展、易协作的应用架构。无论是个人项目还是多人团队，建议都从一开始就遵循模块化思维，让项目从小就养成“好结构”的习惯。

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