探究基于angular的WebAPP模块加载

以往webapp的模块加载方式

iframe方式

iframe方式

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

  • 优点:实现思路方便。
  • 缺点:阻塞全局onload请求、开多了窗口会严重卡顿,代码冗余。

页面切换方式

页面切换方式

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

  • 优点:后端主导
  • 缺点:慢

angularJS的模块加载方式

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月
例子1: 例子1
例子2: 例子2