2。2  CSS框架

本系统的css样式主要由以下两个框架来完成。

2。2。1  Bootstrap框架简介

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包[6]。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成[8]。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、排版、缩略图、警告对话框、进度条、媒体对象等。

正是因为该框架的流行性和成熟性及其提供的丰富的组件功能，本系统在界面上采用了该框架的CSS样式风格，给人以简洁却不简朴的界面风格，让人焕然一新。系统也采用了多种诸如进度条、modal对话框、按钮组等多个组件。

2。2。2  LESS框架简介

作为一门标记性语言，CSS的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS编写经验而很难写出组织良好且易于维护的CSS代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS为 Web 开发者带来了福音，它在CSS的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能[8]，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情[8]。

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

正如以上所述，CSS虽然很实用，但在开发过程中却并不能带来更好的编程便捷性和后期维护性。而LESS框架很好的解决了这两个问题，所以系统采用less作为CSS的编写框架，缩短了CSS的编写时间。

2。3  开发工具（框架）

本部分讲述系统开发的环境以及开发所使用到的平台或者工具，这些平台和工具为本系统的开发带来了极致的便捷。

2。3。1  Nodejs

Nodejs是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Nodejs 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行的数据密集型的实时应用。

Nodejs是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快，性能非常好。Nodejs对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。

系统利用Nodejs平台提供的npm包管理器安装了诸如http-server等一系列的组件。在前期开发过程中由于尚未和后端进行对接，无法本地启动后端server，所以需要临时启动一个前端server，于是选择了轻量级的Nodejs实现的http-server。系统文件结构中的node_modules包下的插件文件都是通过该工具实现下载和安装。

2。3。2  Grunt

Grunt 是一个开源的基于任务 (Task) 的前端构建框架。它除了有 Jake 的优点（跨平台、开发简单）以外，还有一套设计良好的 task 框架用来组织各种构建任务。除此之外还可以通过 npm 来方便的获取几百个现成的 task，比如用 closure 而不是 UglifyJS 来压缩 js，或者用 LESS 来生成 CSS，又或者用 jslint 而不是 jshint 来检查语法等，这些任务都可以在 npm 上找到。如果这些任务无法满足你的需求，Grunt 还允许你方便的添加自定任务，就像写 Nodejs 代码一样简单。自定任务还可以发布到 npm 上，通过 npm 在多个项目享这些任务。[fenbi-grunt-tasks] 就是粉笔网自定的 js 模块合并、handlebars 模板预编译任务 ([grunt-tbf2e] 貌似是淘宝的自定任务)。