探究基于angular的WebAPP模块加载的秘密

## 以往webapp的模块加载方式

### iframe方式

iframe的方式将每个模块作为单独的页面开发，通过菜单动态载入。

* 优点：实现思路方便。

* 缺点：阻塞全局onload请求、开多了窗口会严重卡顿，代码冗余。

### 页面切换方式

页面切换的方式，跟常规的动态页面开发一致，每点击一项功能，都需要刷新页面。

* 优点：后端主导

* 缺点：慢

## angularJS的模块加载方式

可以看到，模块只需要载入一次，每次请求了一小段的html代码，而非整个页面。

* 优点：前端主导，请求数少，性能高。

* 缺点：整体技术要求高。

## angularJS如何实现的？

刚开始使用angularjs的朋友可能都会疑惑如何实现动态载入js、css、html来减少模块请求从而提高性能？

angularjs给出的解决方案是`把要用到的css、js都一次性加载进来`。

大概流程是

1. 把模块请求和控制器都绑定在路由中。

2. 用户访问路由就载入对应页面（首次），接着绑定对应的控制器。

## 如何维护开发代码？

看到这里，或许有些朋友要吐槽了，"把所有css、js都写在一个文件里？好几千上万的代码呢！"

当然不，那只是看到的最终效果，楼主一开始也很疑惑，后来理解了，想要实现如同桌面端应用般流畅的体验，那么就应该一次把所有需要的文件都加载进来，且不能重复载入基本内容。

那么在开发的时候就必须用到`构建工具(gulp、grunt、FIS)`，每一个功能模块可以按照各种的js、css去开发，最后才合并到一个css、js里，从而达到代码维护的效果。

或许有些朋友又要吐槽了，"合并到一个文件里，文件可能有上M吧，加载该有多慢啊！"

根据楼主的实战经验来看，每个模块的控制器大概是300+行的代码，例子中`app.js`压缩后是50kb+,约1w行代码，css也类似的情况，所有项目只要不是太大，理论上不会特别慢。

而作为需求驱动的webapp,需要用到的用户，大概也愿意等首次启动的那几秒吧。

当然也可以配合requireJS、seaJS实现按需加载，只是楼主还比较Orz，没能研究明白。

## 最后

抛砖引玉，期待未来开发桌面端、移动端webapp的朋友能够分享一下这方面的见解。：D

> ##### 时间： 2014年12月