Board logo

标题: Dijit、ExtJS、jQuery UI 异同浅析（1） [打印本页]
作者: look_w    时间: 2018-10-15 19:52     标题: Dijit、ExtJS、jQuery UI 异同浅析（1）

Dijit、ExtJS、jQuery UI 简介Dojo 是开源 JavaScript 库中起步较早的先行者之一。由 Alex Russell, David Schontzler, Dylan Schiemann 等人于 2004 年创立。Dojo 具有类似 Java 的包机制 (packaging system), 将 JS 代码根据功能进行了模块化。主要包含 Dojo、Dijit 以及 Dojox 三个包。其中 Dojo 包提供稳定的内核 API，Dijit 包提供各类 UI 控件，Dojox 包则囊括了一系列实验性的 API 及控件（其中不乏一些得到长期维护、稳定性已相当高的包，如 dojox.charting 包和 dojox.grid 包等）。在 Dojo 1.7 版本中，Dijit 包的内部结构被进行了更细的模块拆分和重构，但由于撰写本文时其尚未发布，本文中的 Dijit 相关内容仍将基于 Dojo 1.6.1 版本。
ExtJS 是当今一套被广泛应用于前端开发的 Ajax 以及控件框架，其历史可以追溯到 Yahoo! User Interface。在 Jack Slocum 的耕耘下，ExtJS 逐渐成长。自从 ExtJS 的 2.0 版本发布后，其使用范围逐渐扩展到世界各地。3.X 版本中推出了更多易用的控件，ExtJS 的优势在于其强大的控件库，以及其对于各种前台功能的封装，形成了完整的一套面向对象风格的 JS 控件库。随着和 Sencha 合并，ExtJS 也向触摸屏发展，不过其 Ext JS 库的发展从未停止。如今的 ExtJS 4.0 提供了更完整的 JavaScript 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 资源加载
1
2
3
4
<script type="text/javascript" src="lib/dojo/dojo.js"></script>
<script type="text/javascript">
   dojo.require("dijit.form.Button");
</script>




上述代码将自动加载 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 个文件。
清单 2. ExtJS 资源加载
1
2
<script type="text/javascript" src="JsLib/ExtJS/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="JsLib/ExtJS/ext-all-debug.js"></script>




当然为了节省资源也可以只加载部分的 ExtJS 资源库，ExtJS 提供了一个名为 ext.jsb2 的文件（该文件描述了各个 JS 文件之间的依赖情况）, 让用户查询各个文件之间的依赖情况，方便用户进行 ExtJS 控件的单个导入。
jQuery UI 篇：由于 jQuery 也没有提供一套完整的自动加载依赖资源的机制，因此用户需要手动将所使用控件的依赖资源逐一导入页面。以 jQuery UI 中的 button 控件为例，需要通过手动为页面添加如下代码导入所需 js 文件。
清单 3. jQuery UI 资源加载
1
2
3
4
5
6
<!-- 导入 jquery core -->
<script type="text/javascript" src="lib/jquery/jquery-1.6.2.js"></script>
<!-- 导入 Button 控件所依赖的 JS 资源 -->
<script type="text/javascript" src="lib/jquery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="lib/jquery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="lib/jquery/ui/jquery.ui.button.js"></script>




这样手动加载资源的方式需要用户清楚了解一个控件依赖哪些资源项，这在使用某些依赖项较多的控件，如 dialog 时会带来困扰。虽然在最终发布的产品中，往往会将页面中所有使用到的 JS 代码进行合并压缩，用户仅需要在页面中导入合并压缩过的 JS 文件即可，但用户仍需要在了解页面需要哪些资源之后再对其进行合并压缩（当然用户也可以选择一次性将所有 jQuery UI 的代码合并压缩到一个文件中）。



欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0