近日，有小伙伴来问小编，Web前端开发框架那个比较好用？为了解答这个问题，今天,小编给大家带来了Web前端开发框架的对比，一起来看看吧！希望对大家有所帮助！
  近几年随着jQuery、Ext以及CSS3的发展，以Bootstrap为代表的前端开发框架如雨后春笋般挤入视野，可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架，极大丰富了开发素材，也方便了大家的开发。这些框架各有特点，本文对这些框架进行初步的介绍与比较，希望能够为大家选择框架提供一点帮助，也为后续详细研究这些框架的抛砖引玉。
  目前前端框架主要采用JavaScript+CSS模式，我们先来了解一下这两者。
  预准备之JavaScript
  目前主流的JavaScript框架排名中，jQuery和Ext可算是佼佼者，获得了用户的广泛好评。国内的一些框架很多也是仿照jQuery对JavaScript进行了包装，不过这些框架的鼻祖YUI还是坚持用自己的JavaScript类库。
  jQuery是目前用的最多的前端JavaScript类库，据初步统计，目前jQuery的占有率已经超过46%，它算是比较轻量级的类库，对DOM的操作也比较方便到位，支持的效果和控件也很多。同时，基于jQuery有很多扩展项目，包括jQuery UI(jQuery支持的一些控件和效果框架)、jQuery Mobile(移动端的jQuery框架)、QUnit(JavaScript的测试框架)、Sizzle(CSS的选择引擎)。这些补充使得jQuery框架更加完整，更令人兴奋的是，这些扩展与目前的框架基本都是兼容的，可以交叉使用，使得前端开发更加丰富。
  Ext是Sencha企业推崇的JavaScript类库，相比jQuery，Ext JS更重量级，动辄数兆的文件，使得Ext在外网使用的时候会顾虑很多。但是，另一方面，在Ext JS庞大的文件背后是Ext JS强大的功能。Ext JS的控件和功能可以说强大和华丽到了让人发指的程度。图表、菜单、特效，Ext JS的控件库非常丰富，同时它的交互也非常强大，独立靠Ext JS几乎就可以取代控制层完成于客户的交互。强大的功能，丰富的控件库，华丽的效果也使得Ext JS成为内网开发利器。
  框架鼻祖YUI也有自己的JavaScript类库，DOM操作和效果处理也还比较方便，功能和控件也很齐全，但是相比jQuery和Ext JS显得比较中庸一些。随着Yahoo!的没落，YUI的呼声也逐渐被新起的框架淹没，想来也让人惋惜。
  除了上述的三个JavaScript类库，还有Dojo、Prototype、Mootools等众多类库，由于本文讨论的框架多采用上述框架，所以其他框架暂不讨论。
  预准备之CSS
  随着CSS3的推出，浏览器对样式的支持更加上了一个层次，效果更加出众。各框架也纷纷开发出基于CSS3的样式，让框架更加丰富。
  对于CSS3，更是推出了一些预编译的扩展框架，主要是LESS、Sass和Compass(Compass是基于Sass的扩展)。可以方便地进行变量定义，格式引用，函数定义等操作，并内置了大量的效果。让您的CSS开发效率提升一个档次。根据Chris Coyier的比较，Sass+Compass几乎完胜LESS。由于Sass是用Ruby开发的，所以也需要相应的Ruby环境将文件编译成CSS文件。
  国内外前端开发框架对比
  首先我们先对目前国内外主流前端开发框架做一个基本的了解，之后再对他们进行一个直观的对比。
  Bootstrap
  Bootstrap是目前桌面端最为流行的开发框架，一经Twitter推出，势不可挡。Bootstrap主要针对桌面端市场，Bootstrap3提出移动优先，不过目前桌面端依然还是Bootstrap的主要目标市场。Bootstrap主要基于jQuery进行JavaScript处理，支持LESS来做CSS的扩展。如果想要在Bootstrap框架中使用Sass，则需要通过Bootstrap-Sass（https://github.com/thomas-mcdonald/bootstrap-sass）项目增加兼容。Bootstrap框架在布局、版式、控件、特效方面都非常让人满意，都预置了丰富的效果，极大方便了用户开发。在风格设置方面，还需要用户在下载时手动设置，可配置粒度非常细，相应也比较繁琐，不太直观，需要对Bootstrap非常熟悉配置起来才能得心应手。
  在浏览器兼容性方面，目前Firefox,Chrome,Opera,Safari,IE8+等主流浏览器Bootstrap都提供支持。但是在IE支持方面略显短板，对IE6和IE7支持都不是特别理想。在Bootstrap3中甚至放弃了对IE6、IE7的支持。不过在国内，根据CNZZ的统计，目前IE的占有率仍然达到46.98%，同时大量国内浏览器也是采用IE内核。这让我们在使用Bootstrap的时候总是有所顾忌。在Bootstrap2上面，可以通过BSIE项目增加对IE6的支持，但是也不能支持全部效果。
  在框架扩展方面，随着Bootstrap的广泛使用，扩展插件和组件也非常丰富，涉及显示组件、兼容性、图表库等各个方面。
  jQuery UI
  jQuery UI是jQuery项目组中对桌面端的扩展，包括了丰富的控件和特效，与jQuery无缝兼容。同时，jQuery UI中预置了多种风格供用户选择，避免了千篇一律。如果您对预置的风格不满意，还可以通过jQuery UI的可视化界面，自助对jQuery UI的显示效果进行配置，非常方便，够高端大气上档次。
  jQuery Mobile
  jQuery Mobile是jQuery项目对移动端的扩展，目前支持iOS,Android,Windows Phone,Black Berry等主流平台。具体支持情况可以参见http://jquerymobile.com/gbs/。另外jQuery Mobile在布局，控件和特效方面都很慷慨。在风格方面，与jQuery UI类似，除了预置的风格效果之外，还支持用户可视化配置的效果。
  可圈可点的是，jQuery Mobile还与Codiqa无缝连接，用户可以直接通过拖拽实现对界面的设计，以及代码的生成。
  Sencha Ext JS
  Sencha Ext JS是Sencha基于Ext JS开发的前端框架，内容极其丰富，控件、特效等支持非常非常丰富，表格、图画、报告、布局、甚至数据连接，无所不包。只有您想不到，没有它办不到。基于Sass和Compass，使得用户对格式的修改和特效制作更加方便。此外，Sencha有丰富的产品线，Sencha Desktop Packager可以让您的应用拥有桌面应用的效果,Sencha Animator基于CSS3更加方便用户对特效的制作，不光支持桌面端，移动端更是不在话下。在Sencha看来，用Animator做游戏都是轻松拿下。Sencha Space是基于HTML5，提供制作跨平台应用的利器。同时Sencha Ext JS对主流浏览器的支持也非常理想。
  Sencha Ext JS有着耀眼的光辉，但是光芒背后总归有点阴影。除了之前提到的Ext JS太过重量级之外，商业化是Sencha的另一把利剑。帮助Sencha披荆斩棘之时，也把大把的码农砍在马下。Sencha规定，凡是商业化的应用，都需要付费。另外，Sencha的辅助产品也全部收费，否则只能是试用版。这里的辅助产品，其实包括了上面提到的所有产品。
  Sencha Touch
  Sencha Touch是Sencha面向移动端的开发框架，基于HTML5技术，了对大多数移动平台的支持。Sencha Touch包括丰富的布局，控件和特效。并且Sencha Touch对响应式支持的很好，在不同设备上，甚至在横屏和竖屏时都会显示不同的效果。这种效果是Sencha Touch控件自适应的。Sencha Touch也实现了对大多数移动设备的支持。Sencha Architect是对移动端的可视化编辑工具，有着不朽的效果，但也有着不菲的身价。
  同时Sencha Touch也支持混合式App创建，也即是基于Web技术，配合PhoneGap(http://phonegap.com/)或者Cordova(http://cordova.apache.org/)之类的工具，就可以构建移动应用。Sencha Touch、jQuery Mobile、Foundation这些前端框架负责界面和效果的编写，PhoneGap、Cordova框架则允许通过JavaScript和其他接口对手机设备的调用，开创了新的移动端开发模式，真正实现了移动端的跨平台开发。
  Sencha GXT
  Sencha GXT是Sencha对Google的Web Toolkit框架的扩展。可以支持通过Java文件的解析，生成HTML5页面文件，可以与Java环境无缝集成。有着丰富的控件和特效，并且可以无缝调用Google地图等Google应用。虽然开发时不是特别直观，但是效果还是非常丰富的。与Sencha Ext JS丝毫不显弱势。
  Dojo
  目前唯一能与Sencha Ext JS一较高下的框架就只有Dojo了。抱着IBM,VMWare等众多大腿，Dojo的一颦一笑都额外惹人注目。Dojo项目的产品线和功能也特别丰富。首先，Dojo有自己的DOM解析器Nano，是DOM解析和处理的内核。此外，Dojo的Web框架有非常丰富的布局、版式、控件以及特效，对多语言以及图表的扩展支持都非常好，并支持对地图的操作。大家可以查看它的演示(http://demos.dojotoolkit.org/demos/)，与Ext JS的效果进行比较。此外，Dojo还有自己的图形化设计和开发工具Maqetta，可以通过拖拽实现设计。Dojo的风格设置不是在下载的时候指定的，而是通过引用不同的CSS格式来实现。
  Dojo虽然比jQuery重量级不少，但是比Ext JS还是轻量级一些，至少在文件大小上。另外，Dojo还有自己的CDN机制，只要通过配置，就可以对Dojo文件进行CDN。由于有IBM,Oracle等大佬的支持，Dojo在与Spring等现有框架支持方面也表现得很理想。
  Dojo Mobile
  Dojo Mobile是Dojo推出的移动端框架，表现也很不俗。在布局，控件，特效方面都下了不少功夫。并支持与所用平台匹配的风格设置，如果您不喜欢还可以引用不同CSS文件来实现不同效果。
  除了可以在移动端的浏览器上使用，Dojo Mobile也支持与PhoneGap无缝连接，可以通过Dojo Mobile开发移动App应用。同时也具有不错的响应性（在宽屏和窄屏上的显示效果不同）。
  Mootools
  Mootools可以说是目前最轻量级的前端框架，内核js压缩完之后只有8k，完整版压缩之后也不到100k，远比其他框架要小很多。Mootools有自己的面向对象设计的内核Mootools Core。伴随着最小的文件大小，框架的功能比其他框架也要弱不少，只有在控件和特效上有少量支持。
  Prototype JS
  Prototype JS也是一个简洁的框架，有着丰富的对DOM操作的功能，对Ajax和JSON支持得都非常好，在使用上与jQuery相比也相差不多。作为Rails默认的JavaScript框架，相信对广大开发人员也很有借鉴意义的。
  在扩展方面，Scriptaculous对Prototype JS进行了丰富的扩展，主要是在动画特效、Ajax控制、DOM操作、单元测试方面等。
  YUI
  YUI作为开源前端框架的鼻祖，在框架上的功力非常之深。有着自己的解析DOM的核心框架，并且在特效、动画、图表等方面都有丰富的扩展，并可以通过YQL直接访问Yahoo！的数据。在用户经常使用的功能方面都有着不错的表现。
  与jQuery灵活的语法相比，YUI显得更加中规中矩，在代码组织、结构和模式方面都更加讲究，更体现出工程师的严谨。同时YUI也有着丰富的产品线，拥有测试框架YUITest、文档生成框架YUIDoc、自动构建框架YUI Build，满足项目开发各方面的需求。随着Yahoo!的没落，YUI也感觉逐渐步入暮年，但作为相当严谨完整的前端框架鼻祖，足以秒杀其他。
  Foundation
  Foundation是ZURB旗下的主要面向移动端的开发框架，但是也保持对桌面端的兼容，目前已经更新到Foundation4版本。框架主要采用jQuery和Zepto（语法酷似jQuery，但比jQuery更轻量级）作为JavaScript基础，CSS则基于Sass、Compass，有着很好的扩展性，并有着丰富的布局，版式和多种多样的控件与特效，非常方便开发者使用。控件的响应式效果也帮助用户识别不同浏览器效果。
  ZURB作为一个完整的项目组，包括很多原型、设计、构建、分析等一系列工具，为用户提供完整的服务。当然，有很多服务是要收费的。
  Kissy
  Kissy是阿里集团自主开发的前端框架，目前在淘宝网、一淘网等阿里系网站上得到不少应用。Kissy框架模仿jQuery编写了自己的内核Kissy Core，用于对DOM的解析，Ajax处理等。同时，有着丰富的控件，并实现了一些动画效果和特效。同样，在Kissy的控件中也可以看到Bootstrap等国外框架的影子。此外，Kissy abc项目工具可以帮助用户实现自动化构建，并有很多扩展组件方便用户使用。
  应该说Kissy是目前国内开发的的前端框架，在实际使用中也经过了检验，但跟国外成熟框架相比还是有一定差距。
  Kissy Mobile
  Kissy Mobile是Kissy推出的移动版框架，意在开发出可以在移动浏览器和移动应用上都可以使用的框架，不过目前项目内容还比较少，控件和特效也比较少，也不具有响应式的效果。
  Qwrap
  Qwrap是百度有啊团队推出的JavaScript框架，现在被收入360，被广泛应用与360产品中。Qwrap综合jQuery、Prototype、YUI特点，对JavaScript进行了封装。但是，如果要把Qwrap算成一个前端开发框架还是有些牵强，因为除了JavaScript类库之外，Qwrap基本乏善可陈，还处于发展阶段。
  Tangram
  Tangram是百度推出的另一个JavaScript框架，被广泛应用于百度系旗下的产品，与Qwrap类似，Tangram也只能算是一个JavaScript框架，对JavaScript做了不少扩展，但是作为前端开发框架还是显得比较单薄。基于此，百度企业继续推出了两个基于Tangram的项目，Magic和Baidu Template。Magic项目基于Tangram对控件和特效都做了扩展，增加了10个新的控件。Baidu Template则更多是针对移动端开发的扩展，目前对于大多数主流移动设备和操作系统都有支持。
  由此我们可以看到，对于桌面端，目前Bootstrap和jQuery UI已经可以满足大多数的开发需求，也在业界得到了广泛的应用，有着丰富的组件和扩展，以及相对简洁的语法和操作。应对我们的基本需求已经足够了。如果您对前端界面的效果有比较高的要求，希望可以应用像结构树这样比较复杂的控件，建议您考虑Dojo，抱了这多年的大腿也不是白抱的，效果还是很不错的。对于，局域网的应用，还可以考虑Sencha Ext JS框架，效果更加震撼，但是对网络的要求也更高。如果这些还是不能满足您内心的狂野，那只能建议您使用Flex或者SilverLight了。相反，如果您对网络速度非常敏感，希望找一个迷您并且功能不错的框架，那Mootools会是您不错的选择。如果您很怀旧，也可以使用YUI，虽然曲线不够性感，但是内容很丰富。如果您是一个Ruby on Rails的开发人员，建议您可以先看一下Prototype框架，毕竟是默认的框架。如果您对上面说到的框架都不满意，那建议您体验一下国内的框架一段时间，然后再回过头来看刚才说到的框架，相信您一定会有一种豁然开朗的感觉。
  对于移动端的应用，jQuery Mobile,Foundation依然是轻量级选择，Dojo Mobile和Sencha Touch会为您提供更加强大的功能。同时，您还可以与PhoneGap和Cordova框架结合使用，利用Web的技术开发移动应用。不过这种混合式开发模式兴起时间并不长，还在不断发展中。
  结束语
  上面只是当前涌现出的前端开发框架中的一部分，相信还有更多优秀的框架还在研发中心，到此我们对“百花齐放”这一词有了更直观的感觉，也说明在沉寂了多年之后，前端开发的工作越来越获得大家的重视，也注定会越来越繁荣。文中的建议只代表笔者个人的初浅意见，大家最终的选择还要结合实际的开发需求。