android前端开发框架-前端开发框架

近年来，随着jQuery、Ext和CSS3的发展，以Bootstrap为代表的前端开发框架异军突起进入人们的视野，可谓是应接不暇。 无论是桌面浏览器还是移动端，都涌现出了很多优秀的框架，极大地丰富了开发素材，方便了大家的开发。 这些框架各有特点。 本文对这些框架进行了初步的介绍和比较，希望能为大家选择框架提供一点帮助，同时也对以后对这些框架的详细研究有所启发。

JavaScript 和 CSS

目前前端框架主要采用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主要针对桌面市场，Bootstrap3提出移动优先，但桌面仍然是Bootstrap的主要目标市场。 Bootstrap 主要基于jQuery 进行JavaScript 处理，支持LESS 进行CSS 扩展。 如果要在Bootstrap框架中使用Sass，需要通过Bootstrap-Sass()项目添加兼容性。 Bootstrap框架在布局、排版、控件、特效等方面都非常令人满意。 预设了丰富的效果，极大的方便了用户的开发。 在样式设置方面，需要用户在下载时手动设置。 可配置的粒度很细，对应起来比较繁琐，不直观。 需要非常熟悉Bootstrap才能配置得心应手。

在浏览器兼容性方面，目前火狐、Chrome、Opera、Safari、IE8+等主流浏览器均支持Bootstrap。 不过对IE的支持有点欠缺，对IE6、IE7的支持不是特别理想。 甚至在Bootstrap3中放弃了对IE6、IE7的支持。 不过在中国，根据CNZZ的统计，目前IE的占有率仍为46.98%，大量国产浏览器也使用IE内核。 这使得我们在使用Bootstrap时总是心存顾忌。 在Bootstrap2上，可以通过BSIE项目添加对IE6的支持，但并不是所有的效果都能支持。

在框架扩展方面，随着Bootstrap的广泛使用，扩展插件和组件也非常丰富，涉及展示组件、兼容性、图表库等各个方面。

图 1. Bootstrap 的布局和效果示例

用户界面

jQuery UI()是jQuery项目组对桌面的扩展，包括丰富的控件和特效，与jQuery无缝兼容。 同时在jQuery UI中预置了多种样式供用户选择，避免千篇一律。 如果你对预设的样式不满意，你也可以通过jQuery UI的可视化界面自行配置jQuery UI的显示效果，非常方便高端。

图 2. jQuery UI 效果示例

jQuery 手机

jQuery Mobile()是jQuery项目向移动端的扩展，目前支持iOS、Android、Windows Phone、黑莓等主流平台。 请参考具体的支持信息。 此外，jQuery Mobile 在布局、控件和效果方面非常丰富。 样式方面，类似jQuery UI，除了预设样式效果外android前端开发框架，还支持用户可视配置效果。

难得的是，jQuery Mobile还与Codiqa无缝对接，用户可以直接通过拖拽的方式实现界面设计和代码生成。

图 3. jQuery Mobile 效果示例

煎茶 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渡过难关的同时，他也砍掉了很多coder。 Sencha规定所有商业应用都需要付费。 另外，Sencha的辅助产品都是收费的，否则只能是试用版。 这里的辅助产品其实包括了上面提到的所有产品。

图 4. Sencha Ext JS 效果示例

煎茶触摸

Sencha Touch()是Sencha面向移动端的开发框架，基于HTML5技术，保证了对大多数移动平台的支持。 Sencha Touch 包括丰富的布局、控件和效果。 Sencha Touch 对响应性的支持非常好。 在不同的设备上会显示出不同的效果，即使是横屏和竖屏。 此效果适用于 Sencha Touch 控件。 Sencha Touch 还实现了对大多数移动设备的支持。 Sencha Architect是一款移动端的可视化编辑工具，效果不俗，但价格也很高。

同时，Sencha Touch还支持混合App创建，即基于Web技术，可以通过PhoneGap()或Cordova()等工具构建移动应用。 Sencha Touch、jQuery Mobile、Foundation等前端框架负责编写界面和效果，而PhoneGap、Cordova框架则允许通过JavaScript等接口调用移动设备，开创全新的移动端开发模式，真正实现跨界。平台移动终端。 发展。

煎茶GXT

Sencha GXT() 是 Sencha 对 Google 的 Web Toolkit 框架的扩展。 可支持解析Java文件生成HTML5页面文件，并可与Java环境无缝集成。 具有丰富的控件和特效，可以无缝调用谷歌地图等谷歌应用。 虽然开发的时候不是特别直观，但是效果还是很丰富的。 Sencha Ext JS 没有弱点。

图 5. Sencha GXT 效果示例

道场

目前唯一可以与 Sencha Ext JS 竞争的框架是 Dojo()。 抱着IBM、VMWare等众多大腿，Dojo一颦一笑格外惹眼。 Dojo项目的产品线和功能也非常丰富。 首先，Dojo有自己的DOM解析器Nano，它是DOM解析处理的核心。 另外，Dojo的web框架有非常丰富的布局、布局、控件、特效。 对多语言和图表有很好的扩展支持，支持对地图的操作。 你可以看看它的demo() 来和Ext JS 比较一下效果。 此外，Dojo还有自己的图形化设计开发工具Maqetta，可以通过拖拽的方式进行设计。 Dojo 的样式设置并不是在下载时指定的，而是通过引用不同的 CSS 格式来实现的。

虽然 Dojo 比 jQuery 重很多，但它仍然比 Ext JS 轻，至少在文件大小上是这样。 另外，Dojo也有自己的CDN机制，只要配置好，就可以对Dojo文件进行CDN。 由于有IBM、Oracle等大牌的支持，Dojo在与Spring等现有框架的支持方面也表现非常出色。

图 6. Dojo 的效果示例

道场手机

Dojo Mobile()是Dojo推出的一款移动端框架，性能也很不错。 在布局、控制和特效方面下了很多功夫。 它还支持与所用平台相匹配的样式设置。 如果不喜欢，也可以引用不同的CSS文件来实现不同的效果。

Dojo Mobile除了可以在手机浏览器上使用，还支持与PhoneGap的无缝对接，可以通过Dojo Mobile开发手机App应用。 它还具有很好的响应能力（在宽屏幕和窄屏幕上看起来不同）。

图 7. iPhone 上的 Dojo Mobile 示例

工具

Mootools()可以说是目前最轻量级的前端框架。 kernel js压缩后只有8k，完整版压缩后不到100k，比其他框架小很多。 Mootools有自己的面向对象设计内核Mootools Core。 除了最小的文件大小外，该框架的功能也比其他框架弱得多，对控件和特效的支持也很少。

图 8. Mootools 效果示例

原型JS

Prototype JS()也是一个简洁、功能丰富的DOM操作框架，对Ajax和JSON的支持也很好，在使用上和jQuery类似。 作为Rails默认的JavaScript框架，相信对开发者有很大的参考价值。

在扩展方面，Scriptaculous()对Prototype JS做了丰富的扩展，主要在动画效果、Ajax控制、DOM操作、单元测试等方面。

唯

作为开源前端框架的鼻祖，YUI()在框架方面有着非常深厚的功力。 有自己解析DOM的核心框架，在特效、动画、图表等方面有丰富的扩展，可以直接访问Yahoo! 通过 YQL！ 数据。 它在用户经常使用的功能方面有很好的表现。

与jQuery灵活的语法相比，YUI更加规整，对代码的组织、结构和模式也更加讲究，体现了工程师的严谨。 同时，YUI也拥有丰富的产品线，包括测试框架YUITest、文档生成框架YUIDoc、自动化构建框架YUI Build，满足项目开发各个环节的需求。 随着Yahoo!的没落，YUI也感觉自己逐渐步入暮年，但作为相当严谨完整的前端框架的鼻祖，足以秒杀他人。

图 9. YUI 效果示例

FoundationFoundation()是ZURB主要面向移动端的开发框架，但同时也保持了对桌面端的兼容性，目前已经更新到Foundation4版本。 该框架主要使用jQuery和Zepto（语法类似jQuery，但比jQuery更轻量）作为JavaScript基础，CSS基于Sass和Compass，具有很好的扩展性，丰富的布局，布局和各种控件及特效，非常方便开发者使用。 控件的响应式效果还可以帮助用户识别不同的浏览器效果。

ZURB作为一个完整的项目团队，包含了原型制作、设计、施工、分析等一系列工具，为用户提供完整的服务。 当然，有很多服务是需要收费的。

Foundation主要是基于mobile风格，如图10所示。

图 10. Foundation 样式示例

亲吻

kissy()是阿里集团自主研发的前端框架。 目前在淘宝网、一淘网等多个阿里相关网站都在使用。 Kissy框架模仿jQuery编写了自己的核心Kissy Core，用于DOM解析、Ajax处理等。 同时具有丰富的控件，实现了一些动画效果和特效。 同样，在Kissy的控件中也能看到Bootstrap等国外框架的影子。 另外，Kissy abc项目工具可以帮助用户实现自动化构建，还有很多扩展组件供用户使用。

应该说Kissy是目前国内开发的最好的前端框架，在实际使用中也经过了检验，但是和国外成熟的框架相比还是有一定的差距。

图 11. Kissy 效应示例

吻手机

Kissy Mobile()是Kissy推出的移动版框架，旨在开发一个既可以在移动浏览器中使用又可以在移动应用程序中使用的框架。 不过目前项目内容还比较少，控件和特效比较少，而且不是响应式公式效果。

图 12. Kissy Mobile 效果示例

Qwrap

Qwrap()是百度有啊团队推出的JavaScript框架。 现已收录于360，广泛应用于360产品中。 Qwrap综合了jQuery、Prototype、YUI的特点，封装了JavaScript。 但是，把Qwrap算作一个前端开发框架就有些牵强了，因为除了JavaScript类库，Qwrap基本乏善可陈，还处于开发阶段。

七巧板

Tangram()是百度推出的另一个JavaScript框架。 在百度产品中被广泛使用。 和Qwrap类似，Tangram只能算是一个JavaScript框架。 它对JavaScript做了很多扩展，但是作为一个前端开发框架，还是显得比较单薄。 基于此，百度继续推出了两个基于七巧板的项目，Magic 和 Baidu Template。 Magic 项目在 Tangram 的基础上扩展了控件和特效，增加了 10 个新控件。 百度模板更多的是针对移动开发的扩展，目前支持大部分主流的移动设备和操作系统。

了解了这几个框架之后，我们将从平台、基础技术、布局、CSS、控件、特效、样式设置等方面对它们做一个基本的比较：

表1. 国内外主流前端开发框架对比

由此可以看出，对于桌面端，Bootstrap和jQuery UI已经可以满足目前大部分的开发需求，并且在业界得到了广泛的应用，组件和扩展丰富，语法和操作相对简单。 足以满足我们的基本需求。 如果你对前端界面的效果要求比较高，希望应用结构树等更复杂的控件，建议你考虑Dojo。 抱了很多年的大腿没有白来，效果还是很不错的。 对于局域网应用，还可以考虑Sencha Ext JS框架，效果更震撼，但对网络的要求也更高。 如果这些还是不能满足你内心的狂野，那我只能建议你使用Flex或者SilverLight。 相反，如果你对网速非常敏感，想找一个体积小、功能好的框架，那么Mootools会是你不错的选择。 如果你怀旧android前端开发框架，也可以使用 YUI，它没有曲线那么性感，但内容丰富。 如果你是 Ruby on Rails 开发者，建议你看一下 Prototype 框架，毕竟它是默认框架。 如果你对上面提到的框架不满意，建议你先体验一下国产框架，再回头看看刚刚提到的框架，相信你会有一种豁然开朗的感觉。

对于移动应用程序，jQuery Mobile 和 Foundation 仍然是轻量级的选择，而 Dojo Mobile 和 Sencha Touch 将为您提供更强大的功能。 同时，您还可以将其与 PhoneGap 和 Cordova 框架结合使用，使用 Web 技术开发移动应用程序。 不过，这种混合开发模式出现的时间并不长，还在发展中。

结论

以上只是目前新兴的前端开发框架的一部分。 相信研发中心还有更多优秀的框架。 至此，我们对“百花齐放”一词有了更直观的感受，这也说明前端开发工作在沉寂多年后越来越受到大家的重视，注定变得越来越繁荣。 本文中的建议仅代表作者的初步意见，大家最终的选择还需结合实际开发需求。

通过：