移动端的常见框架、工具

搜索

您当前位置：首页 > 新闻中心 > 行业动态

新闻分类 Classification

【行业动态】

下载

新闻

文章

移动端框架2013大盘点

移动前端开发

PhoneGap：一个开源的开发框架，使用HTML、CSS和JavaScript来构建跨平台的移动应用程序。它使开发者能够利用iPhone、Android、 Palm、Symbian、BlackBerry、Windows Phone和Bada等智能手机的核心功能，包括地理定位、加速器、联系人、声音和振动等。除了在本地编译应用之外，还可以使用PhoneGap提供的云端Build工具进行应用编译。也就是说，只需要将用HTML5写好的应用上传到PhoneGap的云端服务器，PhoneGap Build即可将其编译成适合不同平台的应用。

Sencha Touch：说到这里，就不得不提一些面向移动端的WebUI库，毕竟PhoneGap是一个工具，要想基于Web技术构建完整的App，必须选择一些适用的移动UI库。而最值得一提的是Sencha Touch，它可以让Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的Web标准，全面兼容Android和iOS设备。PhoneGap 昭示着一种开发趋势，即App也可以使用Web前端技术来完成。而作为开发者最常用的UI工具箱，Sencha Touch又进一步加速了这种趋势，目前在淘宝已有大量的项目采用这种思路来搭建，即在内置应用的外壳加上自定义的基于移动Web的UI库。相信在未来这种模式必会越来越流行。

Media Queries：在CSS2时代，如果你曾经为网站设计过打印版CSS，那么就会明白CSS3 Media Queries的作用。不过，CSS3的Media Queries比CSS2的Media Type更实用，因为CSS2 的Media Type并不曾被多少设备支持过。CSS3的Media Queries可以获取这些数据：浏览器窗口的宽和高、设备的宽和高、设备的手持方向（横向还是竖向）和分辨率等。也就是说，Media Queries提供了一种基于不同的平台写CSS的技术。这项技术在2011年初被推广开来，至今已非常火热，尤其是在Web页面仍占互联网流量大多数的今天，这种兼容技术能很快让网站兼容移动设备，保证产品实现最快的跨平台的兼容性和多平台的可用性。

Zepto.js：一个专为 Mobile WebKit浏览器（如Safari和Chrome）而开发的JavaScript框架。它标榜自己简约的开发理念能够帮助开发人员简单、快速地完成开发交付任务。更重要的是这个JavaScript框架是超轻量级的，只有5KB。Zepto.js的语法借鉴且兼容jQuery。目前已有不少网站开始基于 Zepto.js做应用，因为在抛弃了IE浏览器的兼容性问题后，Web开发会变得越来越纯粹，体积更轻巧，编码也更加愉悦。不可否认，随着移动终端开发越来越流行，Zepto.js在未来将会有更加广阔的应用场景和空间。

Bootstrap: Twitter推出的一个开源的用于前端开发的工具包。它由Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，由动态CSS语言LESS写成，与CSS 框架Blueprint存在很多相似之处。Bootstrap一经推出便颇受欢迎，一直是GitHub上的热门开源项目，NASA和MSNBC的 Breaking News都使用了该项目。2012年第二季度，Bootstrap发布了2.0版，Bootstrap 2.0的一个重大改进是添加了响应设计特性，在1.0中，这是让很多开发人员抱怨的地方。而且为了提供更好的针对移动设备的响应式设计方案，Bootstrap 2.0采用了更为灵活的12栏网格布局。此外，它还更新了一些进度栏及可定制的图片缩略图，并增加了一些新样式。值得关注的是，Bootstrap是一个非常轻量级的框架，2.0在压缩后只有10KB。Bootstrap为我们的网站快速搭建提供了不错的工具和思路，这个工具集将拥有更旺盛的生命力。

框架、工具

SeaJS是由支付宝前端高级技术专家王保平（玉伯）开发的一个遵循CMD规范的模块加载框架，可用来轻松愉悦地加载任意JavaScript模块和CSS模块。 SeaJS非常小巧，小巧在于其压缩后体积只有4KB，而且接口和方法也非常少。SeaJS有两个核心：模块的定义和模块的加载。SeaJS可以加载任意 JavaScript模块和CSS模块，能保证你在使用一个模块时，已将所依赖的其他模块载入脚本运行环境中。SeaJS可以让你享受写代码的乐趣，不用去管那些加载的问题。毕竟现在网页的可维护性和性能问题一样严峻，体现在：文件太多，不利于维护，前端后端都一样；HTTP请求过多，当然这个可以通过合并解决，但如果没有后端直接合并，那么人工成本会非常大。用SeaJS就能非常好地解决这些问题。SeaJS遵循CMD规范，因此可以很方便地书写模块。目前已经有越来越多的人采用CMD规范来开发项目了。

Metro UI:微软已经正式发布了Windows 8操作系统，Windows操作系统的风格已经完全变成了磁贴状的Metro UI。对于微软来说，这是一个巨大的改变，而且所有微软的平台包括桌面、平板、移动端及其网站都使用这个UI风格。Metro UI CSS是一个非常完整的创建Metro风格的网站框架。它自成体系，但也可以与其他框架一起使用。使用LESS创建，并且拥有网格系统、排版样式、表格、按钮和图片。同时也拥有内建的JavaScript组件，帮助你生成片状、菜单、边栏、进度条和提示等，是一个非常好用的框架。随着Windows 8的进一步流行，这种风格的CSS类库一定会成为一种趋势。

Hype.一个小巧的工具，是Mac App Store新上架的一个HTML5创作工具，其长处是可以在网页上做出悦目的动画效果，无须Flash插件。开发该应用的公司Tumult由两个前苹果工程师创建，并获得了Y Combinator的投资。由于公司的联合创始人之一Jonathan Deutsch曾担任Mail.app后端的技术主管，因此他在接受Paul Hontz的The Startup Foundry访谈时，谈到公司创始是为了解决HTML5创作工具缺乏的问题。可以说，Hype是第一个可用的创作HTML5产品的可视化工具，具有里程碑式的意义。随着硬件性能提升，HTML5的应用程序更加倾向于被工具生成，而不像传统意义上由工程师“切”出来。因此工具化是一个方向，不管HTML5 是否真的能在移动终端扎下脚跟，这种方向是值得坚持的。毕竟，HTML5的应用开发现在还处于原始社会。

iScroll.js是使用原生 JavaScript编写的一个模拟滚动效果的小类库，不依赖于任何JavaScript框架。旨在解决移动WebKit系浏览器的区域滚动问题，兼容 Mobile Safari、Android默认浏览器、Safari、Chrome、Firefox5+、Opera11+、IE9+及其他WebKit核心浏览器。最新版本为iScroll4。这个小库一问世就备受关注，因为它不仅可以在PC端完美模拟滚动效果，在移动终端里对触屏事件的支持也堪称完美。

前端MVC在2011年是比较火的话题，随着越来越多的人开始尝试使用诸如JavaScript MVC和Backbone.js这些MVC类库，更多的产品也看起来更像“软件”而非“网页”。但由于前端环境的复杂性，我们也渐渐发现“这种”MVC并非完美，只能应用于“基于数据驱动”的场景，而对“基于事件驱动”的场景却没有太好的解决办法。目前，淘宝有很多产品在尝试使用“有限自动机”来弥补 MVC在这方面的不足。因此，新场景下的MVC还需要更深入的提炼。