首页 > 前端技术 > 目前我所中意的单页应用前端架构
2013
03-08

目前我所中意的单页应用前端架构

下图是目前我所中意的单页应用前端架构。用图和文字记录下来,以备后用。如果我有幸能再次开发一个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),确实比较实用。在一个大网站中还是有意义的。


留下一个回复

你的email不会被公开。