浅谈我对几个Web前端开发框架的比较

原文在我的博客中，欢迎大家来访交流 http://chrisx.iteye.com/blog/697596

强调一下，这篇日志主要还是针对想学前端开发的新朋友写的，不是说我有什么独特见解，而是比较客观的状态，就各种框架的异同和应用场合，需要注意的地方做简单描述，不做具体深入分析，有的地方比较抽象，对于抽象之处大家可以到网上或各大高手博客中深入学习，当然也可以与我继续探讨。

一直以来对Web前端开发兴趣颇深，用过一些框架产品。在JavaEye上看到一些刚接触前端开发朋友的疑问，犹豫这些产品的前景利弊，不知从何入手。想把自己的一点经验分享给大家，如有不到位之处请一起来纠正。

jQuery
1. 绝对的万金油，核心js只有50K，占用带宽小，门户网站、管理系统，用在哪都可以。
2. jQuery是对js底层dom操作封装最薄的一个框架，没有大量的专有对象，多为提供函数进行dom操作。准确的说，它不是偏重于富客户端的框架，而是侧重于对js dom编程。下面几种才是完整的富客户端的框架。
3. 我认为它最大的三个亮点，一是支持CSS3的大量选择符，想定位或选择一个html元素简直轻而易举。二是灵活便捷的Ajax请求和回调操作。三是事件绑定功能，内部封装了很多事件，想统一为一个页面上的一些元素添加事件很方便，这也提高了复用性和可维护性，避免了页面中出现大量的html属性。合理的编码可以使html与js, css分离开，便于维护。
4. 此外它也封装了很多常用的操作，例如节点的添加删除、常用的动画效果、逻辑判断比较等等。避免了直接使用dom api进行繁琐的操作。
5. 本身提供了可扩展的函数，可以自己编写插件与核心jQuery对象进行集成使用。这也是常用的手段，只要你理解js面向对象编程，熟悉jQuery API，就能写出很多定制的插件，复用在各种地方。
6. 至于jQueryUI，与其他框架不一样的地方在于，它很少用js去生成html，而是把现有的html通过jQueryUI的API加工成想要的效果，关于这点是好是坏，我觉得就是见仁见智的问题了，没有必要争论什么。
7. 新生的jQuery EasyUI不错。
8. 如果今后的更新都保持现在这种模式，我认为它的前景很乐观，什么时候javascript完蛋了才轮到它玩完。

ExtJS
1. 一整套带有UI的js库，封装得很多，很厚，核心js就600多K，这么大的东西门户网站当然就别想了，里面的效果当然也不会运用到门户网站，所以它是专门为管理系统而生的。因为局域网不会有带宽问题。
2. 它与jQuery不同，基本上是纯用js来生成html的，页面里只需引入各个ExtJS库和你自己写的js，不会出现很多html内容，body里基本没什么。所以优化就显得重要了，不然会严重浪费资源。
3. UI就不说了，大家都认可，本来就是为UI而生，它可以做出来桌面级程序的效果。一般来说，一个管理系统的项目如果用Ext，基本就从始至终都是Ext做了，不会像jQuery那样，哪想要了就加在哪，很随意。Ext更像一个整体(虽然它也可以拆开用，不过麻烦，不建议)。
4. 提供了对其他js框架的适配，像对jQuery, prototype等。没实际应用过，就不说了。
5. 理解js面向对象编程在ext中很重要，如果你觉得用jQuery时了解简单的dom和css即可，那你在这就吃大亏了，Ext处处离不开对象的概念。
6. Ext的UI开发类似C#，有很多控件。不同的是，你要全部自己手写，所以开发量较大。现在虽然有Ext Designer可视化工具，但其效果并不很好，生成的代码有的往往不是想要的，不易维护，真做起来还是自己写更方便。
7. 团队开发时，必须保证做UI的人每人都会Ext，而且深入应用过，因为Ext项目是整体，不适于参杂html替代。
8. Ext项目在IE系列浏览器上不可用，相当卡，我想这不是Ext本身的问题，所谓内存泄露等问题现在早已解决了，而且不是关键所在。我开很多网页同时用IE8看jQuery.net官网时有时也会卡，试想他们官网肯定做到很好的优化了吧，jQuery既是如此，何况Ext。反观其他浏览器，FireFox, Chrome等浏览Ext项目都很流畅，所以应该是浏览器对js解析不同造成的。
9. 版权问题，Ext运用在商业项目中是收费的。

Flex  [自己也是在学习中，不敢妄言，以后深入应用后再做补充]
1. Adobe平台的，基于ActionScript实现，用在哪都行，但偏重于内网管理系统，用在门户网站就相当于在线玩Flash游戏，loading...
2. 与Ext不同，它有健壮的可视化开发工具Flash Builder，可以同C#一样进行拖拽布局，生成一种xml，也便于维护。
3. 编译后生成swf文件直接嵌入html即可，提高安全性，浏览时同flash，需要flash player。
4. 与Ext相同，也是属于一个整体，有丰富的控件库。
5. 这条纯属个人观点，HTML5不支持插入对象，也就意味着不能插入swf文件，难道Flex就完蛋了？虽然HTML5不支持Flash是客观事实，但HTML5的统一为时尚远，各大浏览器对HTML5的支持，Adobe是否会有对策，这些会怎么样现在都不好说，HTML5与HTML4并行应该会有很长一段时间，至少Flex在现在是一个名列前茅的好产品，所以我选择了它。

SilverLight
微软平台的，主要是应用在微软系列的语言中，包括CS与BS架构。同样，除了jQuery，Asp.net也不适合与以上等框架集成，因为Asp.net是事件驱动，这些框架都是为消息驱动而生的，勉强应用只会事倍功半，丧失.net本身的优势。

js面向对象编程我一直在提，其实并不难理解，关于这点应该学习下，很有必要。它涉及到代码复用、功能扩展、对象继承、闭包、优化等很多问题，能省去不少编码，便于维护，还能不改变框架源代码而实现不同的功能。

闲话不多说了，希望能给刚走进前端开发的朋友一点帮助。以后可能还会就js面向对象编程再写一篇日志，有兴趣可以来看看。我的QQ是421557193，有兴趣可以与我交流，请注明是IT同行。

楼主有时间可以尝试下Ext-Core, 会让你眼前一亮.

好的 谢谢推荐
Ext-core刚开始看过一点 也是对js dom的封装 但没实际用过...

ExtCore vs. jQuery
jQuery UI vs. ExtJs
各位看好哪个？

还有Ext最近被sencha给兼并了，在移动触摸终端上会有所发展

js框架其实还有很多，比如被诟病侵入严重的dojo，还有YUI等等

非js框架Flex，JavaFX等等在HTML5时代，个人不看好它们。

说的很全面.
我也从应用系统的开发角度说说Flex相关的优缺点.

缺点：
和以往的技术相比，Flex没有JSP这个层次，以往JSP的做用是生成动态的HTML。因为Flex没有类似的和JSP相同作用的技术。所以Flex是纯静态的，是和HTML一样的静态。这种静态直接限制了Flex中ComboBox不能直接拥有动态的不完全确定的Options.，而是Flex显示到客户浏览器上之后，再进行二次请求ComboBox的项。
优点：因为Flex是静态的，他和静态HTML，IMG一样，客户对他的访问过程对WEB服务器没有什么压力。
Flex把这种压力分解到各各客户的机器上了。
缺点：
客户机器上的压力加大的，客户能不能受得了。
缺点：因为其本身的体积较大，所以对网络流亮要求高一些，
还有一种特殊的场景：页面的上的字段个数不一定，就是说有哪些字段是动态的，如果用JSP的话，我可以在JSP中写一个For语句，循环产生input(文本框)和input组件的相关属性与值。但在Flex下，你只能等Flex到客户浏览器之后，再发一个请求问服务器，页面有几个组件？这几个组件的相关属性是怎么样的啊？服务器把这些信息响应回浏览器上的Flex，Flex运用ActionScript脚本动态的去建立文本框组件。但在这个过程中，动态组件的相关属性的描述信息，通过网络传送到客户的机器之中了。浪费了网络流量。
优点：客户的体验非常好。前台开发过程中代码自然、流畅、简洁。在客户端跨浏览器跨系统平台。可以很方便的开发自己所需的个性化组件.
较HTML相比，在代码保护方面有一定的优势。访问者不容易看到Flex的代码。有效的保护的知识产权 。
因为这条优点，所以不能像以前那样，直接从浏览器上看HTML原码进行调试了。
一个大的问题,他对反射支持的不好，
与J2EE的集成开发环境还不是特别的成熟，完善。

个人还是比较喜欢jquery 小巧灵活 而且插件繁多 呵呵

Adobe在Flex方面似乎后劲不足,版本推的很慢,技术提升也不大.
在技术实力上看,长此以往很有可能被MS赶超,远期前途不明朗.
个人看法.

同感，Flex的技术进步速度很慢，我个人怀疑Adobe公司缺少Anders这种大师级的人物，看看MXML的繁复和简陋的API（和JDK比）就知道了，试水Flex有4个月，3个小项目已经完工，在IDE、组件定制等方面却越来越失望，曾经试用过SilverLight，C#组合VS绝对胜过ActionScript与Flash Builder，只可惜对于技术力量有限的中小型公司来说，倒向微软往往意味着放弃Java，放弃和选择都是代价高昂的。

我现在有点犹豫，选Flex也许是个错。

正在调研JavaFX和JQuery类JS前端框架，JS前端框架本已是放弃的方案，原因是性能和开发效率低，现在看看JS引擎风起云涌，性能突飞猛进，是要重新审视了。

第一，Flex没有JSP的层次，Flex的通信基本上都是异步的，而你所说的层次还停留在传统的交互方式上，这是Flex的一个  优点，并非缺点。
第二，Flex分解压力到各各客户的机器上，如果程序设计合理，适当增加客户机的压力，从而很有效地减轻了服务器的负载，这种情况下，用户表示鸭梨不大，情绪很蛋定。 所以这也是Flex的优点，并非缺点。
第三，特殊的场景， JSP是在服务器端生成HTML的代码（html组件）再返回到客户端显示，Flex是请求服务器得到组件的相关属性（这个数据量要比请求JSP小的多），然后再根据得到的数据现实组件。所以不存在“浪费了网络流量”这样一说。
第四，与J2EE的集成开发环境还不是特别的成熟，完善  这个只是相对，目前来说已经相对成熟，完善了，Eclipse + MyEclipse + Flex builder(插件版本) 组合的IDE可以整合j2ee + flex一体式工程，debug也比较方便。例外，通信方面结合LCDS/DBS/DGS 使用 RemoteObject进行数据访问。Remote是基于AMF协议，使用AMF协议通信比使用HTTP快10被左右。由于AS3和JAVA语法极为相似，在使用RemoteObject远程对象调用和RemoteClass对象的数据传输，都是比较容易和方便的。这样的通信方式在目前也是比较先进的。

当然Flex也有其很多缺点，比如内存优化和管理，Module的优化等等，我们在学习和使用的过程中需要对其要有客观，正确的认识。

不错，简单明了。赞一个。