目前我所中意的单页应用前端架构
文章目录[隐藏]
下图是目前我所中意的单页应用前端架构。用图和文字记录下来，以备后用。如果我有幸能再次开发一个web单页应用项目并且由我主导，那么我将针对具体需求，灵活地考虑这个方案。说不定日后我还会找到更好的方案。
1.服务器使用node.js，这样整个前端都是javascript令人倍感亲切。同时采用grunt做任务的命令行构建工具。grunt作为javascript任务构建工具好用而且必要，不仅仅是为了构建服务时压缩文件、梳理路径，而是在需要自动化测试的时候起更大的作用。
2.前端框架我选用angular.js。上一篇blog中我已说明了框架必要性和angular.js的优势。具体请见http://www.storagelab.org.cn/zhangdi/2013/01/20/%E5%85%B3%E4%BA%8E%E5%89%8D%E7%AB%AFjs%E6%A1%86%E6%9E%B6%E7%9A%84%E6%80%BB%E7%BB%93%E4%B8%8E%E6%8E%A8%E8%8D%90/
使用了angular.js后，最好就将具体业务逻辑模块按照谷歌所说的那样分成三类：
directives, services, filters
一个服务模块，用来做服务的声明。
一个指令模块，用来做指令的声明。
一个过滤器模块，用来做过滤器声明。
一个依赖以上模块的应用级模块，它包含初始化代码。
这样拆分的原因是，在你的测试中常常需要忽略掉初始化代码，因为这些代码比较难测试。通过把它拆分出来就能在测试中方便地忽视掉它。通过只加载和当前测试相关的模块，也能使测试更专一。
以上只是一个建议，你可以放心根据你的具体情况来调整。
3.但是光靠angular.js还不够，jquery作为方便操纵页面元素的通用的js工具库有时是必不可少的。同时jquery又大量的可用插件，尤其是jquery UI,可以作为angular.js的directive必要的补充。
4.图中还特意点名提到了bootstrap,这并不是说项目中一定要有bootstrap，而是一定要有类似的提供CSS兼容性框架。做到浏览器兼容性，对于一个大型的应用，这样一个框架是必要的——虽然很多时候我们是自己写——但是能做到像bootstrap这样完整易用的并不多——当然还需要针对性的浏览器兼容性测试。其次，bootstrap中提供的组件也能配合jquery和angular.js directive完成很多功能。
至于bootstrap所提倡的less css，我的意见是可以不用。虽然用了它可以在更换整个网站配色之类的需求上更快地实现，但是也增加了代码的复杂度——有时候并不值得。
另外关于图标字体（例如bootstrap的font awesome），确实比较实用。在一个大网站中还是有意义的。
