文档介绍：近几年随着jQuery、Ext以及CSS3的发展,以Bootstrap为代表的前端开发框架如雨后春笋般挤入视野,可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架,极大丰富了开发素材,也方便了大家的开发。这些框架各有特点,本文对这些框架进行初步的介绍与比较,希望能够为大家选择框架提供一点帮助,也为后续详细研究这些框架的抛砖引玉。JavaScript&CSS目前前端框架主要采用JavaScript+CSS模式,我们先来了解一下这两者。预准备之JavaScript目前主流的JavaScript框架排名中,jQuery和Ext可算是佼佼者,获得了用户的广泛好评。国内的一些框架很多也是仿照jQuery对JavaScript进行了包装,不过这些框架的鼻祖YUI还是坚持用自己的JavaScript类库。jQuery是目前用的最多的前端JavaScript类库,据初步统计,目前jQuery的占有率已经超过46%,它算是比较轻量级的类库,对DOM的操作也比较方便到位,支持的效果和控件也很多。同时,基于jQuery有很多扩展项目,包括jQueryUI(jQuery支持的一些控件和效果框架)、jQueryMobile(移动端的jQuery框架)、QUnit(JavaScript的测试框架)、Sizzle(CSS的选择引擎)。这些补充使得jQuery框架更加完整,更令人兴奋的是,这些扩展与目前的框架基本都是兼容的,可以交叉使用,使得前端开发更加丰富。Ext是Sencha公司推崇的JavaScript类库,相比jQuery,ExtJS更重量级,动辄数兆的文件,使得Ext在外网使用的时候会顾虑很多。但是,另一方面,在ExtJS庞大的文件背后是ExtJS强大的功能。ExtJS的控件和功能可以说强大和华丽到了让人发指的程度。图表、菜单、特效,ExtJS的控件库非常丰富,同时它的交互也非常强大,独立靠ExtJS几乎就可以取代控制层完成于客户的交互。强大的功能,丰富的控件库,华丽的效果也使得ExtJS成为内网开发利器。框架鼻祖YUI也有自己的JavaScript类库,DOM操作和效果处理也还比较方便,功能和控件也很齐全,但是相比jQuery和ExtJS显得比较中庸一些。随着Yahoo!的没落,YUI的呼声也逐渐被新起的框架淹没,想来也让人惋惜。除了上述的三个JavaScript类库,还有Dojo、Prototype、Mootools等众多类库,由于本文讨论的框架多采用上述框架,所以其他框架暂不讨论。预准备之CSS随着CSS3的推出,浏览器对样式的支持更加上了一个层次,效果更加出众。各框架也纷纷开发出基于CSS3的样式,让框架更加丰富。对于CSS3,更是推出了一些预编译的扩展框架,主要是LESS、pass是基于Sass的扩展)。可以方便地进行变量定义,格式引用,函数定义等操作,并内置了大量的效果。让您的CSS开发效率提升一个档次。根据ChrisCoyier的比较,pass几乎完胜LESS。有兴趣的读者可以自行参考http://css-/sass-vs-less/。由于Sass是用Ruby开发的,所以也需要相应的Ruby环境将文件编译成CSS文件。回页首国内外前端开发框架对比首先我们先对目前国内外主流前端开发框架做一个基本的了解,之后再对他们进行一个直观的对比。BootstrapBootstrap(桌面端最为流行的开发框架,一经***推出,势不可挡。Bootstrap主要针对桌面端市场,Bootstrap3提出移动优先,不过目前桌面端依然还是Bootstrap的主要目标市场。Bootstrap主要基于jQuery进行JavaScript处理,支持LESS来做CSS的扩展。如果想要在Bootstrap框架中使用Sass,则需要通过Bootstrap-Sass(https:///thomas-mcdonald/bootstrap-sass)项目增加兼容。Bootstrap框架在布局、版式、控件、特效方面都非常让人满意,都预置了丰富的效果,极大方便了用户开发。在风格设置方面,还需要用户在下载时手动设置,可配置粒度非常细,相应也比较繁琐,不太直观,需要对Bootstrap非常熟悉配置起来才能得心应手。在浏览器兼容性方面,目前Firefox,Chrome,Opera,Safari,IE8+等主流浏览器Bootstrap都提供支持。但是在IE支持方面略显短板,对IE6和IE7支持都不是特别理想。在Bootstrap3中甚至放弃了对IE6、IE7的支持。不过在国内,ZZ的统计,%,同时大量国内浏览器也是采用IE内核。这让我们在使用Bootstrap的时候总是有所顾忌。在Bootstrap2上面,可以通过BSIE项目增加对I