Jquery 与Ext的区别和各自适用项目类型

 Jquery与Ext的区别和各自适用项目类型

          我作为一个研发人员，从事Java软件开发工作多年，大多都是做服务器端程序的开发，当然偶尔也会涉及到前端的工作，这不公司有一个项目即将上线，时间紧急，我们几个具备前端开发技术的Java开发人员临时被委以重任，协助前端开发人员解决多浏览器兼容的Bug等前端工作。由于大学和实习工作时深入研究和应用过基于Div-CSS-JS的网页设计技术，所以对前端技术还是比较熟悉的。下文是我解决bug的过程中偶然发现的一篇博文，个人觉得写的非常好，理解的很到位，就迫不及待的转载至此，在此对原作者表示感谢。个人认为，无论哪种技术，基础扎实非常重要，只有基础扎实，才能做到运用自如，遇到问题才知道应该用什么技术去解决，而不是根据一个个的可能去试，才能在提高效率的同时写出自己完美的作品。还有一个观点：好多Java—Web工程师认为自己做好服务器端程序开发就好了，至于前端技术并不需要学习，交给前端开发人员去做就好了。我认为上述观点是错误的，因为只有熟悉前端工作原理的程序工程师，才能站在宏观上，整体上去设计程序架构，才能写出高效率的真正适用于前端的程序接口，才能使得前后端程序完美兼容。

       在客户端javascript中，最为费时费力的事就是跨浏览器支持，更进一步说，是对Internet Explorer的支持，IE6/7/8/9/10/11之间都有着细微的功能差异，而且从浏览器市场份额的角度来看，这真是一个不可忽视的麻烦问题。当然，目前很多大型网站已经不再支持IE6，所以忽略它可能也不会有什么问题，然而，即使不考虑IE6，仍然无法逃脱IE的束缚。要让每一个开发者各自解决这一问题是不可行的，应该通过已经被很多网站所使用的js库来尽可能的减少花费在跨浏览器支持上的时间和精力。话虽如此，库也不是完美无缺的。对于库无法涵盖的部分，仍需要自己书写跨浏览器支持的代码。在充分使用了库的基础上，理解浏览器的功能，在不得已的情况下自己写出相应的处理，这一点很重要。目前世界上，web开发应用最多的JS库是Jquery，其次是ExtJs等。

一、 什么是Jquery？

jquery具有如下特征：

1.JQuery是现在世界上使用最多的javascript库。

2.压缩后仅有31KB，非常轻巧。

3.通过链式语法实现

4.通过CSS3选择器及自定义选择器获取元素

5.支持插件，社区具有丰富的应用插件，可拓展性高

6.近期又提出了jquery-UI组件，进一步丰富了jquery的功能。

jquery具有如下功能：

1. 访问和操作DOM元素

2. 控制页面样式

3.  对页面事件的处理

4.  大量插件在页面中的运用

5.  与Ajax技术的完美结合

二、什么是Ext

       Ext是一套富客户端（rich client）框架。完全基于JavaScript、css和HTML实现，与主流浏览器完全兼容，并且无需安装任何插件即可在常用浏览器中创建出绚丽的页面效果。如果你对Ext的历史有所了解，那么可能知道Ext源自Yahoo UI社区，最早是作为YUI的一套拓展组件出现的。因此，它的名字才包含Ext，意为Extention Of YUI，后来因为Ext发展迅猛，就脱离了YUI社区，独立了门户。是什么使Ext在富客户端设计应用中独领风骚呢？就是它的强大集成性。纵观前端开发的开源市场，以最为火热的Jquery为代表的基础组件库。虽然围绕在其周围的巨大社区贡献了无数的插件，基本可以满足任何要求，但是毕竟这些组件缺乏统一的管理。我们想在自己的项目中使用对应的功能，一般都需要找上半天，等到整合阶段又要费劲心力。Ext正是瞄准了开源组件库的这个空档，立身之本就是提供一套风格一致，集成良好的组件库，人们选用了Ext便即刻拥有了从底层基础库到上层各种高级组件的工具集合，加上Ext本身也提供了丰富的样例，几乎可以让对前端知之甚少的开发者也能迅速上手，跨越技术障碍，开发出漂亮易用，功能强大的前端来。对开发者来说，Ext等于帮助他们完成了数年的前端框架技术的积累，节省了大量的时间与精力，因此选择Ext也就成了情理之中的事情。

那么ExtJS到底是收费的还是免费的呢？

      在正式使用Ext之前，我们必须澄清Ext产品协议的问题，其实很多开发者都对这个问题表示出自己的兴趣。答案就在http://www.sencha.com/products/extjs/license/里，这是官方对Ext的授权形式给出的详细说明。

Ext的授权形式有3种，如下所示。

       免费授权：用户可以基于GPL协议免费使用Ext。何为GPL?简单来说就是，如果你的项目中使用了GPL授权的代码，就要把与之相关的源代码都开放出来。不过这个限制只对再次发布（redistribution）的项目起作用，如果只是内部使用，则不要求强行公开代码。

（注意因为产品发布的不可撤销性，所以使用LGPL协议发布的Ext2.0.2及之前版本还可以随便用，不过官方早已不在提供下载了。）Ext在Ext2.2版本之后对开源协议进行了修改，而且从Ext3.0.0版本之后又改成了只对付费用户提供补丁维护版本。非常幸运的是我们可以从http://www.sencha.com/products/extjs/download/免费获得Ext发布包，其中源代码，文档和示例一应俱全。不过，如果想通过SVN获得最新的代码，就得花钱了。作为学习，现阶段只需要这个免费的发布包即可，通过其中的范例，我们可以感受一下Ext的魅力。

       企业授权：如果你不愿意收到免费协议的限制，如果你们内部协议要求必须用企业授权，如果你愿意在经济上支持Ext开发团队的持续发展，那么可以获得Ext的企业授权。

       OEM/Reseller License ：如果想把Ext封装为软件开发库（software development library）或工具包（toolkit）来卖，就需要去的Ext团队的专门授权。免费授权和普通企业授权都是不允许客户使用Ext制作开发库和工具包的。

       无论购买了企业授权还是OEM授权，都可以获得官方某种形式的技术支持，包括邮件支持，电话支持。

       Ext发布包中的API文档放在docs目录下，虽然可以看到左边的菜单，但是单击之后，右侧的API页面都是都过AJAX方式获得的，不能直接在本地看，必须把解压缩后的完整目录部署到服务器上，然后通过浏览器访问服务器，这样才能看到。如果没有把这些内容放在服务器上，则docs就会打不开。Ext的产品文档可以算是有史以来最华丽的产品文档了，功能强大的产品文档也是实际开发时最有效的工具，所以是否善用Ext的产品文档也就成了是否能够尽快掌握Ext的一大因素。

       API文档中的官方实例都可以在API Home中找到，也可以在浏览器中直接打开examples目录的samples,html。当然，有一些示例需要放在服务器上才能看到效果。有一些实例的后台代码是使用PHP编写的，如果想查看这些示例的效果，还需要配置PHP运行环境，这里可以安装一个集成的php环境即可，比如phpstudy、wamp等等。如果使用java，而且JDK的版本在1.5以上，那么建议你安装resin-3，因为可以直接在它上面运行php示例。

       如果你下载的ExtJS是ZIP格式的发布包，解压后，目录结构大体如下：

      examples：该目录下是官方提供的演示示例，是初学者学习Ext的最佳途径之一。

      docs：该目录下是Ext的文档，其实最主要和最重要的是Ext的API。在进行Ext开发时，离不开这个目录。

      locale：该目录下是各国语言包，中文汉化文件就在这里。

      resources：该目录下是Ext要用到的图片文件和样式文件，Ext绚丽的外观全部由这个目录中的文件控制。

      src：该目录下是Ext的源码文件，也即是相对pkgs目录而言，未经压缩的代码。

     ext-all.js :该文件是Ext的核心库，是必须引入的。

     ext-all-dev.js :该文件是ext-all.js的调试版，在调试时使用这个调试版本的文件才能正确的定位出现错误的位置。与ext-all-debug.js相比，ext-all-dev.js中还包含了许多调试信息，建议开发阶段使用此文件进行调试开发。

     license.txt:该文件是Ext的使用许可文件。

     Release-notes.htnl:该文件包含了Ext4发布以来的修改记录，如果想知道各个版本之间具体做了哪些修改，可以关注一下这里。

其他目录是项目开发相关的，作为最终用户不用过多关注。

如何在项目中使用Ext？

       如果要把Ext用在项目中，那么发布包里的内容并非都是必要的，比如文档，示例和源代码。必须内容至少包括ext-all.js、      adaper/ext/ ext-base.js、src/locale/ext-lang-zh_CN.js和整个resource目录。

      ext-all.js和adaper/ext/ ext-base.js包含了Ext的所有功能，所有的Javascript脚本都在这里。

      src/locale/ext-lang-zh_CN.js是简体中文国际化资源文件，用于对Ext进行汉化。

      resource目录下是CSS样式表和图片。

只要项目中包含上述内容，就可以使用Ext了，使用时，在页面中导入下面的代码即可：

<link rel=”stylesheet” type=”text/css” href=”${放置ext的目录}/resource/css/ext-all.css”/>
<script type=”text/javascript” src=” ${放置ext的目录}/ext-all.js”></script>
<script type=”text/javascript” src=” ${放置ext的目录}/ext-lang-zh_CN.js”></script>

导入时，注意javascript脚本的顺序。 

三、Ext和Jquery的区别和各自适用领域？？？

        根据自己工作中的使用经验，下面是我的个人观点：Jquery适合小型灵活的web应用，比如新闻发布系统动态页面设计，门户网站动态页面设计，SNS动态页面等web系统设计；特点是使用简单明了，可以简单快捷的实现某个效果，比如为了实现某一个动态特效，我们可以迅速定位到使用jquery的某一技术或者找到相应的插件来实现。Jquery的设计理念就是写最少的代码实现更多的功能。缺点是插件缺乏统一的管理，用户往往为了实现某一个特效而苦苦纠结与css，还有js的效果逻辑。

        而Ext则提供了丰富的完整的一套UI组件，以及组件对应的CSS包（这里强调一下，是一套），就必须深入理解ext的中心思想，理解组件之间嵌套后的关系，以及理解ext生成DOM对象的顺序。特点是功能提供全，使得开发者解放于界面设计，更多的工作去实现业务逻辑方面的事情，缺点是要想灵活运用有一定的难度，尤其是当遇到Ext的Bug的时候。ExtJS适用于那些富客户端应用:比如OA系统，ERP系统，MIS系统等富客户端应用的动态页面设计。

        说的更通俗一点就是：Jquery是一款轻量级的js库，适用于前台web动态页面的设计，而ExtJS则是一款重量级的富客户端js库，更适用于类似后台管理页面的那种动态页面效果的设计。

 参考资料：《jquery权威指南》《Ext深入浅出》