前端 UI 框架对比

7顶
18踩

2014-05-08 14:51 by 见习记者 wb1991wb 评论(32) 有31725人浏览

extjs easyui jquery dojo flex

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

每种产品都是有自己的定位！根据项目业务来选择技术平台才是正确的，平台好不好，要看是否适用当前项目！下面笔者根据自己的开发经验谈谈自己的看法，个人经验之谈！还有一句话要说明一下：任何一个开发人员都不喜欢去设计界面！设计师的逻辑跟程序员的逻辑思维是不一样的！设计师面对的是用户为用户体验而设计，程序员面对的是代码为系统的性能而编写！

1、ExtJs

ExtJs 开源、商业应用收费的前端富客户端框架！强大的组件库、完美的浏览器差异兼容！能大大减低开发人员的开发难度，提高开发效率！出色的布局能力使得即使没有一点设计基础的人员也能搭建漂亮、丰富的界面！通过内置的强大Ajax类实现了完美的后台交互能力！由于太过丰富、重量！使得他更适合应用企业级系统应用开发！

Component类使得任何一个OO开发人员都能驾驭该框架，设计很好的界面与功能！不在需要开发人员编写大量的Html元素！即使在没有美工、设计师在情况下，你也能开发出一个相当成功的项目！大大降低了研发成本！当然了需要一个出色的OO开发人员！

丰富、出色的组件库、主题样式
完美的独立性、不需要集成任何第三方插件、使得浏览器兼容性不再是问题
强大、丰富的文档、社区支持
对JS原生对象的扩展，使得我们更好的应用JS对象；如：Array、Date、Function、String
脱离传统B/S软件对美工的依赖，纯粹依靠开发人员来构建软件系统。
目前版本：Ext 4.2

总结：目前99%的企业级应用都能使用它来开发！对于我们当前项目来说就挺好的，多媒体坐席系统Demo就是基于这个开发的，看到界面还是很不错的吧！简单的入手，可以提高项目的研发进度！（随便拉一个人都能做一个Ext项目）（笔者不是很喜欢这个东西，至于原因……呵呵……）

2、jQuery EasyUI

jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，但页面也是相当好看的。一些功能也足够开发者使用，相对于extjs更轻量。

jQuery EasyUI有以下特点：

基于jquery用户界面插件的集合
为一些当前用于交互的js应用提供必要的功能
使用 EasyUI你不需要写很多的javascript代码，通常只需要写HTML标记来定义用户界面即可
支持HTML5
开发产品时可节省时间和资源
简单，但很强大
支持扩展，可根据自己的需求扩展控件
目前各项不足正已版本递增的方式不断完善

总结：由于把视图层与控制层的分离，所以需要我们编写大段的html代码，导致代码不义易维护，很难定位到当前的组件！功能相对薄弱、需要自己定制组件、不利于浏览器的兼容！同样他优秀的组件库、强大的扩展能力使得我们依然可以用它架构一个出色的项目、对于开发人员能力要求比较高（精通Ajax、Html/Css，熟悉JS），由于是免费的（好像不开源），目前拥护人员也是相当的多！

3、Flex

作为新一代的富客户端互联网技术的佼佼者，Flex这种技术已经被越来越多的公司所采用，被越来越多的用户和程序员所接受。可是随着html5的发展，Flex的前景不是那么的明朗！毕竟他是为了开发人员能够使用到Flash的一些功能而设计！从目前的Html5发展程度，很有可能取代Flash，Adobe公司也表示已经降低的Flash、Flex的研发精力转而投入到Html5的研发！虽然这样，但是Flex的优势也是显而易见的！笔者也使用过Flex开发项目，总的来说还是很不错的！也表示希望继续使用此技术！

由于程序是运行在Flash Player虚拟机里面，所以有着良好的跨平台性和兼容性！支持多种后台交互技术（笔者表示分布式的系统架构能更好的体现Flex的优势）！

Flex技术包括以下几个主要技术框架：

描述应用程序界面的XML语言（MXML）；
符合ECMA规范的脚本语言（ActionScript)，处理用户和系统的事件，构建复杂的数据模型；
一个基础类库；
运行时的即时服务；
由MXML与ActionScript文件生成swf文件的编译器。

Flex的优势：

Flex与Flash：可以让普通程序员开发制作Flash成为可能
界面表现能力一流。
RIA富客户端应用，解决了异步调用，界面无刷新，浏览器兼容性等多项难题
对流媒体的支持：Flex是被公认为流媒体技术支持最好的应用
平台的可用性：根据ADOBE公司的说法，Flash player在全世界一半的PC机器上安装度为99.8%
跨平台：Flash player能够在linux下运行，也可以在手机上运行，所以不用担心绑死在WINDOWS上
对底层的可操作性：Flex能够调用底层的东西，比如可以调用摄像头实现视频，而且视频本身就嵌入在Flex应用中,由Flex player直接播放。
平台的后续运营和发展前景：Flex是由ADOBE公司推出的且开源
有充足的学习环境： Flex官方样式配置工具，可以在线配置Flex应用程序各种控件的外观样式，改程序也是用Flex编写的，大家可以想象Flex可以做到什么程度的应用了，而且这么漂亮的界面，根本不用做任何图片和美工，都是直接用样式实现即可。
可以用任何你熟悉的WEB编程平台作为后台数据访问层,可以使用.net,php,jsp,webservice 。
脱离传统B/S软件对美工的依赖，纯粹依靠开发人员来构建软件系统。试图让开发人员在完全不需要学习Flash情况下，直接进行Flash RIA编程，这样的话，避免了B/S中遇到的情况，加重了开发人员的学习负担，且这些东西本来就不是开发人员所擅长的。

总结：根据目前我们当前项目的业务来说，我觉得Flex比较适合，多媒体联络中心门户，由于我们需要多种数据格式的传输，以后可能会做在线视频业务（不过笔者对于多媒体是没什么概念的！我真的不懂，而且不懂），多媒体坐席系统的架构Flex也是能很好的实现的，毕竟flex就是做企业级开发的，有良好的消息推送技术！当然了，当前项目也有很多设计是不适合使用此技术的！

4、Dojo

（笔者表示没有用过，从网上参考了一些建议）

优点：

背后强大的支持：IBM、Sun、BEA等，这是非常重要的优势。
功能的强大，Full Stack的框架，扩展了DHTML的能力，例如：
支持与浏览器Back/Forward按钮的集成。
Dojo Offline，一个跨平台的离线存储API。
Chart组件，可以方便地在浏览器端生成图表。
基于SVG/VML的矢量图形库。
Google Maps、Yahoo! Maps组件，方便开发Mashup应用。
Comet支持，通过通用的Buyeux协议。
强大的UI（Dijit）。
面向对象的设计，统一的命名空间，包管理机制（The Package System and Custom Builds）
可扩展性。

缺点：

复杂，学习曲线陡。
文档的极端不全，这是一个很大的问题。
API很多不稳定，各版本间改动较大，现在还不是一个成熟的框架。
侵入性太大，页面中大量使用dojo的属性，例如<button dojoType="dijit.form.Button" id="helloButton">，如果将来dojo升级或者换一个框架时，负担会很大。
性能问题，由于dojo加载采用了同步的机制，会暂时锁定浏览器，导致CPU使用率达到100%。另外，很多Widget的速度很慢。

5、AngularJS

（笔者正在学习使用，想了想不是很适合我们当前的项目）

6、jQuery

做Web前端开发人员都知道的一个东东！不论是框架本身的设计、架构、还是展现出来的功能都是上上之选！但它是一个类库，不是一个框架，它提供的是函数、方法、功能！这样一来问题也就暴露出来了，由于它本身不带任何UI层的东西！虽然它拥有强大、丰富的插件扩展！但是由于各个开发者技术能力良莠不齐，导致插件的兼容性、稳定性大大降低！对于当前的几个jQuery UI库还是很不错的！比如上面说到的EasyUI与jQuery UI、jQuery mini UI！都有一个同样的问题就是需要编写大量的html代码，所以看个人爱好了！

7、Bootstrap

说到Bootstrap，这方面的资料就比较少了！所以我只是一个了解，没用过！但是由于其流行性，我又不得不去了解他！打开它的官方网站我们可以看到一句话：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。看到这句话我就动容了！在看完整个文档介绍，确实它值得这样宣传自己！

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

Bootstrap是基于jQuery框架开发的，它在jQuery框架的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。同样它拥有强大的Web UI组件库！但是上手难度比较大，至少我看完整个文档后，我还是不知道怎样去运用它！可是它潮流、精美、优雅的界面吸引着我！我想我该去尝试学习它了！

分享到：

7
顶

18
踩

评论共 32 条请登录后发表评论

32 楼 baukh789 2014-07-25 17:07

jquery,根jqueryUI,jqueryEasyui不是一类东西
可能是理解不同吧..

31 楼 bf2624 2014-05-19 09:58

唉，一点内容都没有，随便摘抄都能发出来。

30 楼 white_crucifix 2014-05-16 14:45

gbfd2012 写道

请发些高质量的 js前端，，不要误导大家

哪些是高质量的js前端呢？

29 楼 gbfd2012 2014-05-16 13:31

请发些高质量的 js前端，，不要误导大家

28 楼 bjzhangliang 2014-05-16 07:42

1收藏。
是不全。
UI框架现在多多多。

27 楼 fukai 2014-05-15 23:54

推荐QUI框架，http://www.quickui.net，绝对有惊艳的感觉，虽然是商业的。适合不差钱的公司使用。

26 楼 lohasle 2014-05-14 09:09

EXT 做出来的东西很难看~ 千遍一律一看就是没有经过前端设计师过头程序员自己弄的。。

25 楼 white_crucifix 2014-05-13 19:07

其实Extjs真要做出一个系统来，绝对是会完爆下面所有框架或工具。

但绝大部分人都承认Extjs用起来比其他框架要难用。

其本质在于大部分时候，我们做的页面不需要达到Extjs提供的那些强大、完善的功能。

比如，用Ext创建一个基本的grid（表格），在表格头上，表格行上，都存在很多现成的功能或者事件。换句话说，用其他工具要达到这个效果，就得自己写下大量（零碎丑陋，可能与业务逻辑混在一起）的UI代码。
当然我们往往不需要这些功能。。。。

24 楼 flasheep 2014-05-13 16:48

ZHE JIBA WANYI SHENME SHIHOU XIEDE!

23 楼 malie0 2014-05-12 16:03

easyui对ie8以下的支持太差了

22 楼 shenshouer 2014-05-12 09:44

欠缺的就是前台UI这块啊，业务编程还是觉得简单啊

21 楼 endual 2014-05-12 09:00

国产的DWZ也不错的

20 楼 ZC168 2014-05-12 02:26

extjs,dojo偶有用过，感觉费劲，还是自定义的UI好用
http://dl2.iteye.com/upload/attachment/0097/0119/10bbda48-3dba-3f1a-b458-8a2e220d656f.png

19 楼 xf326521 2014-05-11 22:09

Kendo有点小清新但真实用吗没人真正用过实用上手DWZ我觉得也不错居然没有上榜

18 楼 yixiandave 2014-05-11 21:47

flyfan 写道

fly_宇光十色写道

目前99%的企业级应用都能使用 EXTJs进行开发？？这个数据是不是有待考量！

请看清楚，“都能使用 EXTJs进行开发”，不是“都使用EXTJs进行开发”！！

ExtJs学习曲线过于陡峭，我不觉得现在公司有那么多extJs的人才储备

17 楼 flyfan 2014-05-11 13:21

fly_宇光十色写道

目前99%的企业级应用都能使用 EXTJs进行开发？？这个数据是不是有待考量！

请看清楚，“都能使用 EXTJs进行开发”，不是“都使用EXTJs进行开发”！！

16 楼 lgscofield 2014-05-09 21:51

竟然easyui都上了，YUI呢，EXTJS放第一，怎么着dojo和YUI都能放第二第三把，这小编感觉不懂什么叫UI

15 楼 fly_宇光十色 2014-05-09 13:50

目前99%的企业级应用都能使用 EXTJs进行开发？？这个数据是不是有待考量！

14 楼 hellostory 2014-05-09 13:21

引用

都有一个同样的问题就是需要编写大量的html代码

请问楼主，这算是问题吗？你本来就是在搞HTML网页开发啊！个人认为写HTML比Extjs直观多了！

13 楼 joe9i0 2014-05-09 09:33

建议把《前端 UI 框架对比》标题中的UI去掉, 完全就是文不对题.

发表评论

您还没有登录,请您登录后再发表评论

7顶18踩