Dijit、ExtJS、jQuery UI 簡(jiǎn)介

　　Dojo 是開(kāi)源 ja vasc ript 庫(kù)中起步較早的先行者之一。由 Alex Russell, David Schontzler, Dylan Schiemann 等人于 2004 年創(chuàng)立。Dojo 具有類似 Java 的包機(jī)制 (packaging system), 將 JS 代碼根據(jù)功能進(jìn)行了模塊化。主要包含 Dojo、Dijit 以及 Dojox 三個(gè)包。其中 Dojo 包提供穩(wěn)定的內(nèi)核 API，Dijit 包提供各類 UI 控件，Dojox 包則囊括了一系列實(shí)驗(yàn)性的 API 及控件(其中不乏一些得到長(zhǎng)期維護(hù)、穩(wěn)定性已相當(dāng)高的包，如 dojox.charting 包和 dojox.grid 包等)。在 Dojo 1.7 版本中，Dijit 包的內(nèi)部結(jié)構(gòu)被進(jìn)行了更細(xì)的模塊拆分和重構(gòu)，但由于撰寫本文時(shí)其尚未發(fā)布，本文中的 Dijit 相關(guān)內(nèi)容仍將基于 Dojo 1.6.1 版本。

　　ExtJS 是當(dāng)今一套被廣泛應(yīng)用于前端開(kāi)發(fā)的 Ajax 以及控件框架，其歷史可以追溯到 Yahoo! User Interface。在 Jack Slocum 的耕耘下，ExtJS 逐漸成長(zhǎng)。自從 ExtJS 的 2.0 版本發(fā)布后，其使用范圍逐漸擴(kuò)展到世界各地。3.X 版本中推出了更多易用的控件，ExtJS 的優(yōu)勢(shì)在于其強(qiáng)大的控件庫(kù)，以及其對(duì)于各種前臺(tái)功能的封裝，形成了完整的一套面向?qū)ο箫L(fēng)格的 JS 控件庫(kù)。隨著和 Sencha 合并，ExtJS 也向觸摸屏發(fā)展，不過(guò)其

　　jQuery UI 是 jQuery 的官方 UI 控件庫(kù)。jQuery 的大名在業(yè)內(nèi)可謂是無(wú)人不知無(wú)人不曉。自 2006 年發(fā)布了其第一個(gè)穩(wěn)定版之后，其輕量、易用的特點(diǎn)使其深入人心。jQuery UI 于 2007 年發(fā)布，它完全基于 jQuery 提供的插件機(jī)制，提供了底層交互及動(dòng)畫功能以及一些可定制樣式的 UI 控件。雖然提供的控件數(shù)量不多，但它們都具備了 jQuery 小巧的特點(diǎn)，其使用風(fēng)格也與 jQuery 核心 API 一致。撰寫本文時(shí)，其最新的穩(wěn)定版本為 1.8.16，本文中關(guān)于 jQuery UI 的內(nèi)容都基于該版本。

　　控件的使用方式

　　在討論各個(gè)控件庫(kù)的架構(gòu)實(shí)現(xiàn)之前，首先讓我們從用戶的角度來(lái)看看 Dijit、ExtJS、jQuery UI 控件的的使用方式，對(duì)它們有一個(gè)直觀的了解。

　　控件的使用無(wú)外乎創(chuàng)建控件、操作控件，而在創(chuàng)建控件之前，我們往往需要先加載控件資源。下面就讓我們從控件資源加載開(kāi)始聊起(控件 CSS 文件編寫與加載不在本文范圍內(nèi))。

　　控件資源加載

　　Dijit 篇：借助于 Dojo 提供的自動(dòng)加載模塊依賴項(xiàng)的機(jī)制，加載 Dijit 控件所需資源非常簡(jiǎn)單，用戶并不需要了解一個(gè)控件究竟需要哪些 JS 文件的支持，只需向頁(yè)面添加 Dojo 核心文件 dojo.js 并使用 dojo.require 函數(shù)導(dǎo)入控件對(duì)應(yīng)模塊即可。

　　清單 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>

　　上述代碼將自動(dòng)加載 Button 控件所依賴的所有 JS 文件。

　　ExtJS 篇：ExtJS 本身沒(méi)有一套完整的自動(dòng)加載依賴資源的機(jī)制，在大多數(shù)情況下，用戶都是使用完整的 ExtJS 庫(kù)，只需要導(dǎo)入 /ExtJS/adapter/ext/ext-base.js 和 /ExtJS/ext-all.js 這 2 個(gè)文件即可。一般情況下為了方便調(diào)試，會(huì)使用 ext-base-bug.js 和 ext-all-debug.js 這 2 個(gè)文件。