三大UI框架Dij-it、ExtJS、jQuery UI全方位对比

 Dijit、ExtJS、jQuery UI 简介

　　Dojo 是开源 ja vasc ript 库中起步较早的先行者之一。由 Alex Russell, David Schontzler, Dylan Schiemann 等人于 2004 年创立。Dojo 具有类似 Java 的包机制 (packaging system), 将 JS 代码根据功能进行了模块化。主要包含 Dojo、Dijit 以及 Dojox 三个包。其中 Dojo 包提供稳定的内核 API，Dijit 包提供各类 UI 控件，Dojox 包则囊括了一系列实验性的 API 及控件(其中不乏一些得到长期维护、稳定性已相当高的包，如 dojox.

　　ExtJS 是当今一套被广泛应用于前端开发的 Ajax 以及控件框架，其历史可以追溯到 Yahoo! User Interface。在 Jack Slocum 的耕耘下，ExtJS 逐渐成长。自从 ExtJS 的 2.0 版本发布后，其使用范围逐渐扩展到世界各地。3.X 版本中推出了更多易用的控件，ExtJS 的优势在于其强大的控件库，以及其对于各种前台功能的封装，形成了完整的一套面向对象风格的 JS 控件库。随着和 Sencha 合并，ExtJS 也向触摸屏发展，不过其 Ext JS 库的发展从未停止。如今的 ExtJS 4.0 提供了更完整的 ja vasc ript API 库，减少对 Array、Function、String 等底层类的重写，大大的减少了不同的 JS 库之间的冲突问题。由于 4.0 版本不向下兼容，对升级造成了一定的影响，笔者还没有机会去深入使用 ExtJS 4.0 版本，因此本文着重介绍的是 ExtJS 3.X 版本。

　　jQuery UI 是 jQuery 的官方 UI 控件库。jQuery 的大名在业内可谓是无人不知无人不晓。自 2006 年发布了其第一个稳定版之后，其轻量、易用的特点使其深入人心。jQuery UI 于 2007 年发布，它完全基于 jQuery 提供的插件机制，提供了底层交互及动画功能以及一些可定制样式的 UI 控件。虽然提供的控件数量不多，但它们都具备了 jQuery 小巧的特点，其使用风格也与 jQuery 核心 API 一致。撰写本文时，其最新的稳定版本为 1.8.16，本文中关于 jQuery UI 的内容都基于该版本。

　　控件的使用方式

　　在讨论各个控件库的架构实现之前，首先让我们从用户的角度来看看 Dijit、ExtJS、jQuery UI 控件的的使用方式，对它们有一个直观的了解。

　　控件的使用无外乎创建控件、操作控件，而在创建控件之前，我们往往需要先加载控件资源。下面就让我们从控件资源加载开始聊起(控件 CSS 文件编写与加载不在本文范围内)。

　　控件资源加载

　　Dijit 篇：借助于 Dojo 提供的自动加载模块依赖项的机制，加载 Dijit 控件所需资源非常简单，用户并不需要了解一个控件究竟需要哪些 JS 文件的支持，只需向页面添加 Dojo 核心文件 dojo.js 并使用 dojo.require 函数导入控件对应模块即可。

　　清单 1. Dijit 资源加载

　　<sc ript type="text/ja vasc ript" src="lib/dojo/dojo.js"></sc ript>

　　<sc ript type="text/ja vasc ript">

　　dojo.require("dijit.form.Button");

　　</sc ript>

　　上述代码将自动加载 Button 控件所依赖的所有 JS 文件。

　　ExtJS 篇：ExtJS 本身没有一套完整的自动加载依赖资源的机制，在大多数情况下，用户都是使用完整的 ExtJS 库，只需要导入 /ExtJS/adapter/ext/ext-base.js 和 /ExtJS/ext-all.js 这 2 个文件即可。一般情况下为了方便调试，会使用 ext-base-bug.js 和 ext-all-debug.js 这 2 个文件。