Ionic2实战-功能模块开发基本说明

前言

随着前端所承载的功能越来越多，前端开发也变得越来越复杂。对于所有大中型项目来说，项目代码动辄上万行，同时需要好多人协同开发。所以项目的模块化变得尤为重要，好的模块化可以让项目开发的多人协作变得轻松自如，烂的模块化只会让项目变得越来越难以为继，代码越多越是噩梦。

本篇就来讲一讲我认为的Ionic2前端项目模块化的最佳实践。

模块说明

前端目录

1.创建modules目录

如上图，直观起见，直接在src目录下创建了modules目录作为前端业务模块的总目录。

2.根据大的业务模块划分子模块

如modules下面的user就是整个的用户模块，所有用户模块的代码都放在该目录。

3.子模块的具体拆分

user模块

如上图，子模块主要由四部分组成：

• models（前端业务模型目录，类似于后端的Domain）
• pages（前端页面目录，类似于后端的Controller）
• services（前端服务目录，类似于后端的Service）
• user.module.ts（user模块总配置）

因为前端的大部分逻辑都集中在pages内，每一个page都有自己的控制器，如果页面多的话就会稍显凌乱，所以可以对user的pages再划分子模块解决，如下图：

user模块pages截图

具体的模块内每一个页面又分成了三个文件：.html，.scss，.ts，前端三大件，一个都不能少，哈哈。

具体模块

4.总模块和子模块的串联

• 首先需要在总模块（app.module.ts）中注册子目录，如下图：

总模块注册子模块

• 子模块user中如需新增页面只需在user的user.module.ts中注册即可，如下图，新增一个页面的ts文件以后只需配置user.module.ts的declarations和entryComponents即可，避免了各个子模块对app.module.ts的频繁改动。

子模块module

最后

通过以上的模块化设计，项目模块拆分清晰，功能解耦，为后续的开发留出了足够的施展空间。