几种常见前端开发框架的对比研究

    闫海舟+贺秀丽

    摘 要：随着互联网的飞速发展，大批优秀的前端开发框架如雨后春笋般进入开发者视野，开发素材不断丰富，功能越来越强大，为开发工作者提供了极大的便利。文章对一些常用开发框架进行初步对比研究，为广大开发者提供一些参考。

    关键词：PC端；移动端；开发框架；对比研究

    0 引言

    近年来，PC浏览器和各类移动端浏览器出现了许多非常出色的开发框架，在开发素材的多样性和使用方便性上都有了极大提升，几种常见的开发框架都有各自的特点，本文对这些前端开发框架各自的特点进行对比研究，为不同人群对各类普通PC网站及移动端Web网站开发提供一些帮助。

    1 几种觉前端开发框架

    1.1 jQuery UI和jQuery Mobile开发框架

    jQuery UI和jQuery Mobile，这两种开发框架在布局、版式特效和控件方面非常出色，不但内置了多种风格可供用户使用，而且用户还可以根据需求通过可视化配置对其显示效果进行自主配置，使用方便、效果出色。jQuery UI 是以jQuery为基础的开源JavaScript网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。jQuery Mobile针对各类移动端扩展，目前主流的移动操作系统如苹果公司的IOS系统、谷歌公司的Android系统、微软的Windows Phone系统、黑莓的Black Berry系统等，都支持良好，和Codiqa配合使用可以实现界面的拖曳设计和生成代码，是移动端开发框架的理想选择。

    1.2 Bootstrap开发框架

    社交媒体Twitter采用 Bootstrap作为其PC端开发框架，其衍生品也可作为移动端开发框架。该框架的JavaScript处理基于jQuery技术，并在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。CSS 扩展可以使用 LESS，还可以使用Bootstrap-Sass增加兼容，以实现在开发框架内使用Sass。Bootstrap框架内置了功能非常丰富的Web组件，在页面布局、版式、控件和特效等方面用户有很大的自由度和开发空间，可以非常方便、快速地创建一个美观且功能完善的网页。Bootstrap框架兼容性也比较好，常用浏览器如IE8，Firefox，Safari，Chrome等都能很好地兼容。稍显不足的地方是在IE浏览器的支持方面，其对IE6，IE7的支持并不是太好，在其新版本中甚至已经不再对IE老版本浏览器提供支持。据调查，IE浏览器仍是目前使用率最高的浏览器，而且其它浏览器中有一些还是使用的IE内核，这让开发者使用该框架时还是有一些顾虑。目前该框架使用较为广泛，针对其开发的各类插件也比较丰富，这使用户在使用时有了更大的便利。

    1.3 Sencha Ext JS开发框架

    基于Ext JS开发的Sencha Ext JS有相当丰富的内置资源，在界面布局、版式、特效、各类控件方面表现不俗，能够充分发挥用户的想象力，用户在制作特效和修改格式时非常方便。Sencha家族还有其他功能强大的开发产品，同时支持PC端和移动端的Sencha Animator，基于HTML5的Sencha Space等，其中Sencha Space更是跨平台应用制作的利器。同时，该开发框架也支持大多数常用浏览器，为用户提供了宽广的创作空间。但Sencha Ext JS开发框架及其系列产品并不免费，其开发成本相对较高。

    1.4 Sencha Touch开发框架

    Sencha 面向移动端的开发框架Sencha Touch是基于HTML5技术的，其对大多数移动端有良好的支持性，也拥有丰富多样的布局、特效和控件，Sencha Touch一个很突出的优点是对响应式有非常好的支持度，在移动端越来越多样化的情况下，实现了对大多数移动设备的支持，并且显示特性特别出众，根据其控件的自适应特性，可以为设备提供横、竖不同的显示效果。该开发框架配合其他工具还可以用于混合式应用软件开发，界面和效果由前端框架负责开发，其他配合工具如Cordova，PhoneGap等则允许通过JavaScript及其他接口调用手机设备，这是一种新的移动端开发模式，为跨平台开发移动端提供了一种新的选择。

    1.5 Sencha GXT开发框架

    Sencha GXT是Sencha对Google的Web Toolkit框架的扩展，可以与Java环境无缝集成。该开发框架能够通过解析Java文件，生成HTML5页面文件，同样有着非常丰富的布局、版式、控件和特效，同时，该开发框架还可以调用Google应用，使用效果很好。虽然该开发框架在应用时不如其他开发框架直观明了，但其效果并不亚于其他开发框架，甚至在某些方面还更胜一筹。

    1.6 Dojo开发框架

    Dojo是一款非常优秀的开发框架，该开发框架的风格设置不是在下载的时候指定的，而是通过引用不同的CSS格式来实现。其在页面布局、版式、控件和特效等方面也非常丰富，相较于Sencha Ext JS也毫不逊色，其对多语言、图表甚至地图的扩展支持都很抢眼。虽然Dojo开发框架体量不小，但相较于Sencha Ext JS来说还是要好上不少。该开发框架有着自己的CDN机制，可以通过配置Dojo文件进行CDN。Dojo有着丰富的产品线和功能，如图形化设计和开发工具Maqetta等，在IBM，Oracle等支持下，在与Spring等现有框架的支持方面也表现非常出色。Dojo推出的移动端开发框架Dojo Mobile在各方面也都有非常出色的表现，可以与开发平台保持风格一致性，也可以通过CSS引用来实现其他效果。

    1.7 Mootools开发框架

    轻量化前端开发框架代表Mootools压缩后框架内核只有8 kB大小，即使是完整版压缩后也只有100 kB，名副其实的轻量级开发框架，但相较于其他一些开发框架來说，其功能相应的也要弱上不少，控件和特效数量有限。

    1.8 YUI開发框架

    YUI作为开源前端框架的鼻祖，该开发框架组织代码缜密，结构严谨，功能完善，在页面布局、版式、控件、特效和图表等各方面表现都非常出色，扩展丰富，同时YUI产品线也非常丰富，测试框架YUITest，文档生成框架 YUIDoc，自动构建框架YUI Build等都是旗下非常优秀的产品，能够满足开发者多样化的工作需求。

    1.9 Foundation开发框架

    Foundation是主要面向移动端的开发框架，但同时其对桌面端也兼容良好，JavaScript基础是jQuery和Zepto，组织代码类似jQuery，扩展性良好，而且很轻量，控件、版式、布局等比较丰富，能够满足开发者日常使用，付费后可以提供更加丰富、完整的功能。

    1.10 Kissy开发框架

    阿里集团拥有强大的技术及资金优势，自主研发了前端开发框架Kissy，并在其系列网站广泛使用，Kissy开发框架的内核Kissy Core是参照jQuery编写的，其对DOM和Ajax的解析处理与jQuery类似。Kissy控件数量不少，能实现较为丰富的动画和特殊效果，与Bootstrap等框架较为相似，在国内各类开发框架中首屈一指，表现较为出色，但相对国外一些成熟的开发框架来说，还有要存在一些差距。Kissy abc是一个很有特点的项目工具，它能够使开发者方便地实现自动化构建，而且也有许多扩展组件供用户使用。

    1.11 Qwrap和Tangram开发框架

    同样作为国内知名互联网企业，百度公司研发了Qwrap和Tangram开发框架，Qwrap集合了多款国外成熟框架的特点，采用JavaScript模式封装。Tangram也基于JavaScript开发，并做了很多扩展，Qwrap和Tangram这两款开发框架还处于研发阶段。同时，百度公司还先后推出了Magic和Baidu Template两款基于Tangram的项目，针对桌面端和移动端增加控件和特效，兼容性良好。

    对于开发者来说，Bootstrap和jQuery UI是两款不错的开发工具，大多数开发任务使用这两款工具都能很好地完成，是目前业界广泛使用的主流开发框架，操作和组织代码比较简洁，使用方便快捷。对于一些在某方面有特殊要求的开发任务，如对前端界面效果要求较高的开发任务，可以使用Dojo，对局域网应用有要求的可以使用Sencha Ext JS，考虑网络速度影响的可以使用Mootools，主要针对移动端应用开发的可以选择jQuery Mobile，Dojo Mobile等，总之要根据不同需求选择一款合适的开发框架，对于出色地完成开发任务能起到事半功倍的效果。

    2 结语

    以上只是对国内外常用的前端开发框架中的一部分进行对比研究，随着互联网的高速发展和技术的不断进步，还会出现更多、更优秀的前端开发框架，为开发者提供优质、高效的开发工具。

    基金项目：2015年内蒙古化工职业学院院级科研项目；项目编号：HYZR1512。

    作者简介：闫海舟（1980— ），男，内蒙古呼和浩特，硕士，讲师；研究方向：机械化及自动化。

    [参考文献]

    [1]尹婷，赵思佳.基于jQuery框架的AJAX网站设计模式的研究[J].湖南环境生物职业技术学院学报，2010（3）：1-4.

    [2]张露.移动多平台跨平台开发工具集的设计与实现[D].武汉：华中科技大学，2013.

    Abstract： With the rapid development of the Internet， a large number of outstanding front-end development frameworks mushroomed into the developers visions， the development of materials continue to enrich， more and more powerful， for the development of workers to provide a great convenience. This paper makes preliminary comparative research on some common development framework， and provides some references for the majority of developers.

    Key words： PC terminal； mobile terminal； development framework； comparative research