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