JavaScript 框架比較

時間  2019-11-11
標籤 javascript 框架 比較 欄目 JavaScript 简体版
原文   原文鏈接

顯著加強 JavaScript 開發的框架概覽php

Joe Lennon, 軟件開發人員, 自由職業者

 

簡介： 現代 Web 站點和 Web 應用程序傾向於依賴大量客戶端 JavaScript 來提供豐富的交互功能，尤爲是異步 HTTP 請求的出現使得不刷新頁面就能夠從服務器端腳本或數據庫系統返回數據或響應。在本文中，您將瞭解如何經過 JavaScript 框架更輕鬆、更快速地建立具備高度交互性和響應性的 Web 站點和 Web 應用程序。html

 

簡介jquery

JavaScript 是面向對象的腳本語言，長期以來用做 Web 瀏覽器應用程序的客戶端腳本接口。JavaScript 讓 Web 開發人員能以編程方式處理 Web 頁面上的對象，並提供了一個可以動態操做這些對象的平臺。在最初引入 JavaScript 時，一般只用於提供 Web 頁面上的一些不重要的特性，如時鐘功能和瀏覽器狀態欄中的滾動文本等。另外一個常見的特性是 「rollover link」，就是當用戶將鼠標移到圖片或文本連接上時，圖片或文本連接的顏色會改變。然而，近年來，隨着 Asynchronous JavaScript and XML (Ajax) 概念將基於 Web 的編程的交互性提高到一個新高度，JavaScript 也變得愈來愈重要。在出現 Ajax 以前，全部服務器端處理或數據庫訪問都須要 「刷新」 整個頁面或經過瀏覽器呈現一個新頁面。這不只減慢了速度並使用戶感到沮喪，並且還浪費帶寬和資源。web

Ajax 表示 Asynchronous JavaScript and XML，可是將其稱爲 XML 已再也不合適，由於 Ajax 請求能夠返回多種格式的響應，而不限於 XML，例如 JSON (JavaScript Object Notation)。Ajax 的工做方式是容許 JavaScript 異步提交 HTTP 請求到 Web 服務器，而且在不刷新或呈現新頁面的狀況下呈現響應。相反，開發人員一般使用 DOM (Document Object Model) 操做來修改部分 Web 頁面，顯示其變化或由 HTTP 響應返回的數據。ajax

 

回頁首數據庫

什麼是 JavaScript 框架？編程

JavaScript 自己就是一種功能強大的語言，您不須要額外的框架就可建立富互聯網應用程序（RIA）。然而使用 JavaScript 並非件容易的事，主要是因爲支持多個 Web 瀏覽器產生的複雜性。與 HTML 和 CSS同樣，不一樣的瀏覽器有不一樣的 JavaScript 實現。讓 JavaScript 代碼實現跨瀏覽器兼容簡直是個噩夢。設計模式

JavaScript 框架或庫是一組能輕鬆生成跨瀏覽器兼容的 JavaScript 代碼的工具和函數。每個庫都在衆多流行的 Web 瀏覽器的現代版本上進行了可靠的測試，所以，您能夠放心地使用這些框架，您的基於 JavaScript 的 RIA 將會在不一樣瀏覽器和平臺上以相似的方式工做。數組

除了解決跨瀏覽器問題，使用 JavaScript 框架能夠更容易地編寫檢索、遍歷、操做 DOM 元素的代碼。它們不只提供獲取 DOM 元素引用的快捷函數，並且還容許 DOM 遍歷函數以菊花鏈（daisy-chaining）方式查找任意深度的父元素、子元素、兄弟元素。最後，框架還提供一系列函數來更輕鬆地操做這些對象，能夠改變、添加或刪除內容自己；或者使用 CSS 樣式類來改變元素的外觀。瀏覽器

框架的另外一重要特性是其改進的事件處理支持。因爲不一樣瀏覽器的實現方式各不相同，跨瀏覽器事件處理將會很是艱難。所以 JavaScript 框架一般封裝瀏覽器事件，並提供一組有用的跨瀏覽器兼容的函數來進行處理。有些框架還會提供一組標準鍵盤代碼來表示基於鍵盤的事件（如按下 Escape 鍵、Return 鍵、光標鍵，等等）。

全部這些特性都很是有用，但 JavaScript 框架有一個特性對於它最近的流行很是重要 — 支持 Ajax。與 JavaScript 的其餘許多方面同樣，每一個 Web 瀏覽器每每以不一樣方式支持 Ajax，這使得以一種在全部 Web 瀏覽器中都受支持的方式處理 Ajax 變得十分複雜。幾乎全部 JavaScript 框架都包含某種形式的 Ajax 庫支持，一般提供 Ajax 請求和響應對象，以及用於評價響應、更新 DOM 元素、查詢特定請求的幫助函數（helper）。

 

回頁首

JavaScript 框架的典型特性

如今，讓咱們看一看大多數 JavaScript 框架都具有的有用特性。包括：

  • 選擇器（Selector）
  • DOM 遍歷
  • DOM 操做
  • 實用（Utility）函數
  • 事件處理
  • Ajax

在解釋每一個特性時，我將會用如下的一個或幾個 JavaScript 框架舉例說明：Prototype、jQuery、YUI、ExtJS 和 MooTools。儘管每一個框架的實現和語法都各不相同，但概念都是相同的。每一個框架都有一個詳細的 API 參考，可幫助您理解如何使用該特定庫中的特性。

 

回頁首

選擇器

大多數可用的 JavaScript 框架都會實現某種形式的對快速元素選取的支持。一般來講，這些選擇器會使得到 HTML 元素引用的過程快不少，並容許經過 ID、類名、元素類型甚至使用一組僞選擇器（pseudo-selector）來查找元素。

例如，使用常規 JavaScript，您也許會用如下代碼經過 ID 來選擇 DOM 元素：

var theElement = document.getElementById('the_element');

 

與其餘框架同樣，MooTools 提供了執行此操做的快捷方法。除了選取該元素，MooTools 還可經過一系列實用函數擴展此元素。其語法以下：

var theElement = $('the_element');

 

如上所示的單美圓符號（dollar）函數，在不少（但不是全部）流行的 JavaScript 框架中均可用，並且語法也大致一致。Prototype 庫則更進一步，容許經過 ID 一次選取多個元素，並返回元素數組。和 MooTools 同樣，可用 Prototype 實用函數擴展這些元素。用 Prototype 一次選取多個元素的語法是：

var elementArray = $('element_one', 'element_two', 'element_three');

 

在 實用函數 一節中，您將會學到更多 JavaScript 框架所提供的簡化集合迭代的函數。

在前面的例子中，必須提供須要選取的元素的 ID。然而，若是要選取多個元素（例如，全部圖片）或是具備特定 CSS 類名的全部錶行，那又怎麼辦呢？MooTools（還有其餘庫）提供了一個簡單的方法來實現此功能 — 雙美圓符號（dollar-dollar）函數。它的工做方式與單美圓符號函數相同，不一樣之處在於它接受 CSS 元素名、類名、僞選擇器做爲參數，而不是接受元素 ID 做爲參數。例如，要使用 MooTools 選取 Web 頁面上的全部圖片，將用如下代碼：

var allImages = $$('img');

 

這將返回一個包含文檔中的全部圖片的數組，其中每個圖片都使用單美圓符號函數進行擴展，以包含 MooTools 實用函數。

根據標記名選取元素很是有用，但若是隻是想根據 CSS 類選擇一個元素子集，該怎麼辦呢？這也很簡單。在下面的例子中，MooTools 將會選擇 CSS 類名爲 「odd」 的全部錶行。這在實現錶行條狀化（在錶行之間交替變化背景色）時將很是有用：

var allOddRows = $$('tr.odd');

 

實際上，MooTools 提供了實現錶行條狀化（row striping）的更好方法。在上面的例子中，假設表中的全部奇數行的 CSS 類名爲 「odd」。如下代碼不要求對錶行定義任何 CSS 類名：

var allOddRows = $$('tbody:odd');

 

這是一個僞選擇器的例子，將會返回全部符合條件的對象，在本例中爲頁面中的 tbody（表主體）的全部奇數子元素。MooTools 僞選擇器的其餘例子包括：

  • checked — 選取全部選中的元素（例如，選中的複選框）
  • enabled — 選取全部啓用的元素
  • contains — 選取全部包含做爲參數傳遞給選擇器的文本的元素（例如，contains('this text')）

如前所述，並不是全部 JavaScript 框架都使用單美圓符號函數選取 DOM 元素。在 YUI (Yahoo! User Interface) 庫第 3 版中，用如下代碼根據 ID 選取元素（請注意 YUI 3 要求在 ID 前傳遞 ID 選擇器符號 #）：

var theElement = Y.one('#the_element');

 

一樣，與使用雙美圓符號函數根據標記或類名檢索元素不一樣的是，YUI 使用了 Y.all 函數：

var allOddRows = Y.all('tr.odd');

 

ExtJS 使用相似的方式，用如下語法根據 ID 選取元素：

var theElement = Ext.get('the_element');

 

如下語法用於根據標記和類名選取元素：

var allOddRows = Ext.select('tr.odd');

 

在下一節中，您將看到 JavaScript 框架如何輕鬆遍歷 DOM，換句話說，就是查找選定元素的父元素、子元素、兄弟元素。您還會學到如何使用庫操做 DOM 以修改元素。

 

回頁首

DOM 遍歷

根據 ID、元素類型或 CSS 類名查找元素很是有用，但如何根據元素在 DOM 樹中的位置執行查找呢？換而言之，根據一個給定的元素查找其父元素、子元素、前一個或後一個兄弟元素。例如，看一下清單 1 的 HTML 片斷。


清單 1. HTML 片斷（一個 HTML 表）

				
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email Address</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr id="row-001">
            <td>Joe Lennon</td>
            <td>joe@joelennon.ie</td>
            <td><a href="#">Edit</a>&nbsp;
                <a href="#">Delete</a></td>
        </tr>
        <tr id="row-002">
            <td>Jill Mac Sweeney</td>
            <td>jill@example.com</td>
            <td><a href="#">Edit</a>&nbsp;
                <a href="#">Delete</a></td>
        </tr>
    </tbody>
</table>

 

清單 1 用縮進表示每一個元素在 DOM 節點樹中的位置。在該例中，table 元素是根元素，它有兩個子節點，thead 和 tbody。thead 元素只有一個子節點 tr，後者有三個子節點 — 全部 th 元素。tbody 元素有兩個子節點，均爲 tr 元素，每一個 tr 元素又有三個子元素。每行的第三個子元素又有兩個子節點，都是 a （錨點）標記。

如您所知，可使用 JavaScript 框架的 Selector 函數根據 ID 輕鬆選取元素。在該例中，有兩個元素具備 ID — 均爲 tr（錶行）元素，ID 分別爲 row-001 和 row-002。要使用 Prototype 選取第一個 tr 元素，須要用到如下代碼：

var theRow = $('row-001');

 

在前面的小節中，您學會了如何使用選擇器根據類型或 CSS 類檢索元素。在本例中，可使用如下語法選取全部 td 元素。

var allCells = $$('td');

 

這段代碼的問題是它將返回 DOM 中的全部 td 元素。可是，若是隻但願獲取 ID 爲 row-001 的行中的 td 元素，怎麼辦呢？這時就該使用 DOM 遍歷函數了。首先，使用 Prototype 選取 ID 爲 row-001 的 tr 元素的全部子節點：

var firstRowCells = theRow.childElements();

 

這將返回 theRow 變量（以前已設爲 ID 爲 row-001 的元素）的全部子元素的數組。

下一步，假設只但願取得該行的第一個子節點，在本例中，是內容爲 「Joe Lennon」 的 td 元素。應使用如下語句：

var firstRowFirstCell = theRow.down();

 

很簡單吧？這種特別的用法等價於：

var firstRowFirstCell = theRow.childElements()[0];

 

也能夠表示爲：

var firstRowFirstCell = theRow.down(0);

 

JavaScript 索引值從零（0）開始，因此以上語句其實是告訴 JavaScript 選取第一個子元素。要選取第二個子元素（包含 joe@joelennon.ie 郵件地址的單元格），可使用下面的語句：

var firstRowSecondCell = theRow.down(1);

 

或者，能夠在 DOM 兄弟節點間導航。本例中，第二個單元格是第一個單元格的下一個兄弟節點，所以可使用如下語句：

var firstRowSecondCell = firstRowFirstCell.next();

 

這與 down() 函數使用了相同的方式，所以可使用下面的語句選擇第三個單元格：

var firstRowThirdCell = firstRowFirstCell.next(1);

 

除了使用索引查找特定節點外，Prototype 還容許使用 CSS 選擇器語法。考慮 清單 1 的例子，找到包含 Jill Mac Sweeney 的明細的行的第二個連接（「Delete」 連接）：

var secondRowSecondLink = $('row-002').down('a', 1);

 

在本例中，可使用美圓符號函數找到 ID 爲 row-002 的元素，而後向下遍歷 DOM，直到找到下一個後代 a（錨點）元素。

有些框架可使用 「菊花鏈」 遍歷函數，表示能夠將遍歷命令互相鏈接。在 Prototype 中實現前一個例子的另外一種方法是：

var secondRowSecondLink = $('row-002').down('a').next();

 

考慮下面的例子：

var domTraversal = $('row-001').down().up().next().previous();

 

如您所見，菊花鏈方式能夠將幾個 DOM 遍歷語句鏈接起來。實際上，上例實際上選擇 tr 元素 row-001，所以菊花鏈恰好回到了起點！

 

回頁首

DOM 操做

上文中，您已經看到如何使用 JavaScript 框架的選擇器和 DOM 遍從來簡化特定元素的選取。然而，要想改變 Web 頁面中的特定元素的外觀或內容，須要操做 DOM 並應用改變。若是使用純 JavaScript 將會很是繁瑣，幸運的是，大多數 JavaScript 框架提供了有用的函數，簡化了這些操做。

假設您有一個 div 元素，其 id 是 the-box：

<div id="the-box">Message goes here</div>

 

若是要用 jQuery 改變 「Message goes here」 文本，方法以下：

$('the-box').html('This is the new message!');

 

實際上，能夠在函數內部使用 HTML 代碼，它將由瀏覽器解析。例如：

$('the-box').html('This is the <strong>new</strong> message!');

 

在本例中，div 元素的內容在 DOM 中呈現爲：

<div id="the-box">This is the <strong>new</strong> message!</div>

 

固然，在一些狀況下您須要使用特殊字符，如大於號或小於號。能夠不指定專門的 HTML 實體代碼，而是使用 jQuery 的 text 函數：

$('the-box').text('300 > 200');

 

這將把 div 元素更新爲如下代碼：

<div id="the-box">300 > 200</div>

 

在上面的例子中，原有內容被新內容取代。若是隻是想把消息添加到文本的後面，該怎麼作呢？幸虧，jQuery 提供了專門的 append 函數：

$('the-box').append(', here goes message');

 

將這個函數應用到初始的 div 元素，div 元素的內容就變成下面這樣：

<div id="the-box">Message goes here, here goes message</div>

 

除了附加之外，您還能夠 「前置」 內容，即在已有內容的前面而不是末尾插入新內容。另外，jQuery 提供了在給定元素以外插入內容的函數，無論是在開頭仍是在末尾。這類函數能夠替換內容、清空內容、從 DOM 移除全部元素、克隆元素等等。

除了 DOM 操做函數，JavaScript 框架還包含一些用於以編程方式處理元素樣式和 CSS 類的函數。例如，假設您有一個表，您想要在鼠標移到某一行時高亮顯示該行。您建立了一個特定的名叫 hover 的 CSS 類，而且您想要將這個類動態添加到行中。在 YUI 中，可使用如下代碼檢查行中是否已經具備 hover 類，若是已經有的話，則刪除它，若是沒有的話，則添加它：

if(row.hasClass('hover')) row.removeClass('hover'); else row.addClass('hover');

 

並且，大多數 JavaScript 框架都有內置的 CSS 操做函數。

 

回頁首

實用函數

不少 JavaScript 框架提供了大量實用函數，可以使 JavaScript 開發變得很容易。因爲這些函數很是多，所以本文沒法一一介紹。我將只討論大多數框架都具有的一些比較重要的函數。

若是您曾經使用 JavaScript 處理過數組，你應該熟悉使用 for 循環來遍歷數組以處理數組值。例如，看一下清單 2 的代碼：


清單 2. 遍歷 JavaScript 數組的傳統方法

				
var fruit = ['apple', 'banana', 'orange'];
for(var i = 0; i < fruit.length; i++) {
    alert(fruit[i]);
}

 

清單 2 中的代碼沒有問題，但有些冗長。大多數 JavaScript 框架包含 each 函數，它會對數據組的每一個元素調用一個指定的函數。使用 MooTools，能夠用清單 3 的代碼執行與清單 2 相同的操做。


清單 3. 使用 MooTools 中的 each 函數

				
['apple', 'banana', 'orange'].each(function(item) {
    alert(item);
});

 

清單 3 中的語法與 Prototype 和 jQuery 中的語法相同，而與 YUI 和 ExtJS 中的語法有細微差別。然而，當用於 hash 映射或對象而不是數組時，各框架的語法都不同。例如在 MooTools 中，將用到清單 4 的代碼：


清單 4. 在 MooTools 中對基於鍵/值對的對象使用 each

				
var hash = new Hash({name: "Joe Lennon", email: "joe@joelennon.ie"});
hash.each(function(value, key) {
    alert(key + ": " + value);
});

 

在 Prototype 中，將用到清單 5 中的代碼。


清單 5. 在 Prototype 中對基於鍵/值對的對象使用 each

				
var hash = $H({name: "Joe Lennon", email: "joe@joelennon.ie"});
hash.each(function(pair) {
    alert(pair.key + ": " + pair.value);
});

 

每一個框架都包含不少有用的函數，一般劃分爲 String 函數、Number 函數、Array 函數、Hash 函數、Date 函數等等。更多信息，請查閱相關 JavaScript 框架的 API 參考資料。

 

回頁首

事件處理

每一個 JavaScript 框架都實現了跨瀏覽器事件處理支持，鼓勵您從舊式的內聯事件鏈接轉向一種流線化方法。看一下清單 6 中的 jQuery 示例，其中在 hover 事件中高亮顯示 div 元素。


清單 6. 使用 jQuery 鏈接 hover Event 

				
$('the-box').hover(function() {
    $(this).addClass('highlight');
}, function() {
    $(this).removeClass('highlight');
});

 

這是一個由 jQuery 實現的特殊事件，請注意它有兩個函數，觸發 onMouseOver 事件時調用第一個，觸發 onMouseOut 事件時調用第二個。這是由於 hover 沒有標準的 DOM 事件。讓咱們查看一個更典型的事件，例如 click（查看清單 7）。


清單 7. 使用 jQuery 鏈接 click Event

				
$('the-button').click(function() {
    alert('You pushed the button!');
});

 

如您所見，本例中只有一個函數參數。jQuery 使用這種方式處理大多數 JavaScript 事件。在 jQuery 中使用事件處理函數時，上下文變量是指觸發事件的元素。有些框架並不使用這種處理方式。以 Prototype 爲例，清單 8 顯示了用 Prototype 實現的與清單 7 等價的代碼。


清單 8. 使用 Prototype 鏈接 click Event

				
$('the-button').observe('click', function(e) {
    alert('You pushed the button!');
});

 

您首先將注意到沒有 click 函數，而是使用了 observe 函數，該函數在引用它自身以前將事件做爲參數。您還可能注意到該函數的參數 e。這就是指向觸發事件的元素的上下文變量。爲了探究其工做原理，讓咱們針對 Prototype 重寫 清單 6 的代碼（請看清單 9）。


清單 9. 使用 Prototype 鏈接 hover Event

				
$('the-box').observe('mouseover', function(e) {
    var el = Event.element(e);
    el.addClassName('highlight');
});
$('the-box').observe('mouseout', function(e) {
    var el = Event.element(e);
    el.removeClassName('highlight');
});

 

與 jQuery 中使用美圓符號函數獲取上下文變量不一樣的是，在 Prototype 中須要使用 Event.element() 函數。而且，您須要對mouseover 和 mouseout 使用不一樣的函數。

在閱讀本文的過程當中，您也許會注意到函數使用內聯方式建立且都沒有命名。這意味着它們沒法被重用。Prototype 的 hover 例子展現瞭如何使用已命名的函數做爲替代方法。如清單 10 所示。


清單 10. Prototype 中改進的 hover 例子

				
function toggleClass(e) {
    var el = Event.element(e);
    if(el.hasClassName('highlight')) 
        row.removeClassName('highlight');
    else 
        row.addClassName('highlight');
}

$('the-box').observe('mouseover', toggleClass);
$('the-box').observe('mouseout', toggleClass);

 

您會注意到，此次只定義了一個函數供 mouseover 和 mouseout 事件調用。該函數會判斷元素是否已經高亮顯示了類名，並根據查找結果執行添加或刪除。您也許會注意到 e 參數是隱式傳遞的。換句話說，不須要在 observe 函數中以參數形式顯式傳遞事件。

 

回頁首

Ajax

使用 JavaScript 框架的另外一個有說服力的理由是標準化的跨瀏覽器 Ajax 請求。Ajax 請求是一個異步 HTTP 請求，一般發送給服務器端腳本，後者返回 XML、JSON、HTML 或普通文本格式的響應。大多數 JavaScript 框架都有某種形式的 Ajax 對象，以及一個以參數形式接受一組選項的請求方法。這些選項一般包含 callback 函數，當腳本一接收到來自 Web 服務器的響應時，就會調用此函數。讓咱們看一下 ExtJS、MooTools 和 Prototype 中的 Ajax 請求的樣子。

首先，看一下典型的 ExtJS Ajax 請求（請看清單 11）。


清單 11. 一個 ExtJS Ajax 請求

				
Ext.Ajax.request({
    url: 'server_script.php',
    params: {
        name1: 'value1',
        name2: 'value2'
    },
    method: 'POST',
    success: function(transport) {
        alert(transport.responseText);
    }
});

 

ExtJS 中的 request 方法只有一個參數，這是一個包含 url、params、method 和 success 等不一樣字段的對象。url 字段包含服務器端腳本的 URL，該腳本將被 Ajax 請求調用。params 字段自己就是一個對象，包含有將被傳遞給服務器端腳本的鍵/值對。method 字段能夠取兩個值：GET 或 POST。它的默認值爲未定義，但若是請求中有 params，將會默認做爲 POST 處理。最後一個字段 success 是 Web 服務器返回成功響應時調用的函數。在本例中，假設服務器端腳本返回普通文本，而且文本會經過警告框顯示給用戶。

下一步，咱們看看一樣的請求在 MooTools 中是什麼樣子（請看清單 12）。


清單 12. 一個 MooTools Ajax 請求

				
new Request({
    url: 'server-script.php',
    data: {
        name1: 'value1',
        name2: 'value2'
    },
    method: 'post',
    onComplete: function(response) {
        alert(response);
    }
}).send();

 

如您所見，MooTools 與 ExtJS 很是類似。你也許注意到，與使用 params 不一樣，這裏使用 data 字段傳遞變量，並且必須使用小寫指定方法。還有，沒有使用 success callback 函數，MooTools 使用了一個 onComplete 函數。最後，與 ExtJS 不一樣的是，在 MooTools 中，您須要使用 Request 對象的 send() 函數發送請求。

最後，讓咱們看看 Prototype 中的請求是否具備顯著的不一樣（請看清單 13）。


清單 13. 一個 Prototype Ajax 請求

				
new Ajax.Request('server-script.php', {
    params: {
        name1: 'value1',
        name2: 'value2'
    },
    method: 'post',
    onSuccess: function(transport) {
        alert(transport.responseText);
    }
});

 

一樣，Prototype 的工做方式基本一致，只是有些句法上的小差異。首先，Prototype 的 Request 對象爲其構造函數獲取兩個參數。第一個參數是請求將被髮送到的 URL，第二個參數是一個具備典型 Ajax 選項的對象，如前兩個例子所見。固然，因爲 URL 如今做爲單獨的參數傳遞，它沒有出如今選項列表中。一樣須要注意，與 MooTools 不一樣，Prototype Ajax Request 對象構造函數隱式地發送請求，所以不須要調用任何方法來實際發起 HTTP 請求。

大多數 JavaScript 框架中的 Ajax 支持要比此處演示的內容更加深刻。重要的加強功能包括使用接收到的響應自動更新元素，而不須要任何特殊的 onSuccess 函數。一些庫甚至包含預建的自動完成功能，如您在 Google 搜索引擎中所看到的，在輸入時會出現常見搜索項。

在下一節中，您將學習 JavaScript 框架爲 Web 開發人員提供的用戶體驗（UX）加強功能。

 

回頁首

UX 加強功能

到目前爲止，本文所有關注的是使用 JavaScript 框架的編程優點以及它們如何簡化交互式應用程序的編寫。然而，對於大多數框架，還有另一個更吸引人的方面：用戶界面（UI）組件以及用戶體驗加強，這些在之前須要付出很大努力構建的工做如今能夠輕鬆完成。

本節將分別介紹如下框架的 UX 加強功能：Prototype、jQuery、YUI、ExtJS 和 MooTools。

Prototype

Prototype 是少數幾個不提供開箱即用 UI 組件和 UX 加強功能的 JavaScript 框架之一。它將這些內容轉移到其姊妹庫 script.aculo.us（最新版本是 Scripty2）中。Script.aculo.us 還添加了對 Prototype 中的各類效果和行爲的支持。包括 highlighting、morphing、folding、shaking、sliding、puffing 等等。Script.aculo.us 還提供拖放支持，例如滑塊、in-place Ajax 編輯器和 autocompleters。與其餘框架不一樣，Script.aculo.us 將全部控件（例如滑塊和 autocompleters）的設計留給開發人員，而且未提供標準界面。

jQuery

與 Prototype 不一樣，jQuery 核心庫中包含一些基本的 UX 加強。這些加強與 script.aculo.us 中的一些基本效果相似。例如 sliding 和 fading。然而，要得到更高級的 UX 特性，就須要下載 jQuery UI 庫，它包含比 jQuery 核心庫更多的效果，以及交互特性，如拖放、調整大小和排序。與 script.aculo.us 不一樣的是，jQuery UI 還包含一些小部件或組件，它們使開發具備吸引力的界面變得更加容易。目前，這些組件包括 Accordion、Datepicker、Dialog、Progressbar、Slider 和 Tabs。這些小部件均可以劃分主題，而且 jQuery UI 包含各類各樣的主題，能夠適合您本身的特定 Web 站點或 Web 應用程序的組件。圖 1 演示了 jQuery UI Datepicker 小部件的例子，該小部件的主題爲 Cupertino。


圖 1. jQuery UI Datepicker Widget
屏幕顯示了 datepicker 例子，在 Datepicker 標題下還有一個日曆。 

YUI

Prototype 和 jQuery 不包含開箱即用的 UI 小部件，可是 Yahoo! User Interface 庫 (YUI) 包含一個 bucketload。除了支持拖放和調整大小外，YUI 第二版還包含 autocompleters、calendar 控件、carousel 組件、繪圖、對話框、進度條、富文本編輯器（所見即所得文本區）、滑塊、選項卡、樹等等。在撰寫本文時，上述小部件都沒有包含在 YUI 第三版中。圖 2 是結合使用這些組件的一個例子。


圖 2. 複雜的 YUI 應用程序示例
屏幕顯示的是一個電子郵件程序，包含一個打開的窗口用來輸入圖片選項，如圖片 url 和尺寸。 

ExtJS

和 YUI 同樣，ExtJS 包含大量開箱即用的組件，其中有不少功能強大的網格控件，支持內聯編輯、分頁、篩選、分組、彙總、緩衝和數據綁定。ExtJS 組件具備很是專業的外觀，而且分門別類。其餘小部件包括選項卡、圖表、窗口（對話框）、樹、佈局管理器、加強的表單控件、工具欄和菜單、拖放操做和直接遠程功能（direct remoting）。這僅僅是 ExtJS 所提供的一小部分，若是要查找更多 RIA 組件，請登陸 ExtJS 網站。圖 3 是用 ExtJS 開發的 Web 桌面程序示例，展現了這個庫的豐富特性。


圖 3. ExtJS 桌面應用程序示例 
桌面顯示的是一個網格窗口、一個應用程序窗口、一個選項卡窗口。 

MooTools

MooTools 和 Prototype、jQuery 同樣，也不包含開箱即用的 UI 控件和小部件。與 jQuery 同樣，它包含一組有限的效果。其更高級的 UX 加強包含在 MooTools.More.js 擴展中。這個擴展不只僅是簡單的 UX/UI 插件，而是包含對 Array、Date、Hash 和 String 類以及額外的 Element 擴展的一些有趣的附加功能。至於 UX 加強功能，MooTools.More.js 包含拖放支持以及一些其餘效果。這些附加功能還包括一些 UI 控件，如 accordion、可排序的 HTML 表、scroller、工具提示和 Ajax spinner overlays。然而，與 script.aculo.us 同樣，您須要本身設計這些控件。

 

回頁首

Framework 比較

表 1 是本文介紹的五個框架所含特性的詳細比較。


表 1. 框架特性比較

  Prototype jQuery YUI ExtJS MooTools
最新版本 1.6.1 1.3.2 3.00 3.1 1.2.4
許可證 MIT MIT & GPL BSD Commercial & GPL v3 MIT
      瀏覽器兼容性    
支持 IE 6.0+ 6.0+ 6.0+ 6.0+ 6.0+
支持 Firefox 1.5+ 2.0+ 3.0+ 1.5+ 2.0+
支持 Safari 2.0.4+ 3.0+ 4.0+ 3.0+ 2.0+
支持 Opera 9.25+ 9.0+ 10.0+ 9.0+ 9.0+
支持 Chrome 1.0+ 1.0+ 未驗證 未驗證 未驗證
      核心特性    
支持 Ajax 是 是 是 是 是
DOM 操做 是 是 是 是 是
DOM 遍歷 是 是 是 是 是
事件處理 是 是 是 是 是
JSON 是 是 是 是 是
選擇器 是 是 是 是 是
      UX/UI 加強功能    
Accordion 否 jQuery UI 否 是 MooTools More
動畫 scriptaculous 是 是 是 是
自動完成 scriptaculous 否 是 否 否
瀏覽器歷史 scriptaculous 否 是 是 否
日曆 否 jQuery UI 是 是 否
繪圖 否 否 是 是 否
拖拽 scriptaculous jQuery UI 是 是 MooTools More
網格 否 否 是 是 MooTools More
進度條 否 jQuery UI 是 是 否
從新調整大小 否 jQuery UI 是 是 否
富文本編輯器 否 否 是 是 否
滑塊 scriptaculous jQuery UI 是 是 MooTools More
選項卡 否 jQuery UI 是 是 否
主題 否 jQuery UI 是 是 MooTools More
樹視圖 否 否 是 是 否
 

回頁首

其餘重要框架

限於篇幅，本文只介紹了五個比較常見的 JavaScript 框架。這並不表示它們是最流行的、最好的或是功能最多的框架。

其餘一些 JavaScript 框架也值得注意，包括：

  • Cappuccino
  • Dojo
  • Glow
  • GWT
  • MochiKit
  • Qooxdoo
  • Rialto
  • Rico
  • SproutCore
  • Spry
  • UIZE
 

回頁首

結束語

本文向您介紹了 JavaScript 框架的概念以及它爲何會給 Web 網站和 Web 應用程序開發帶來好處。本文對這些框架的常見功能做了簡要描述，並舉例說明在較常見的庫中如何實現這些特性。本文還分別講解了做爲這五個框架的一部分或做爲單獨的附加功能的 UI 和 UX 加強。最後，還提供了一個直觀的特性對比圖表，其中列出了各個框架各自具有和缺少的選項。有了這些知識，您應該就能夠進行更深刻的研究，而後明智地選擇適合您及您的開發團隊的框架。

 

參考資料

學習

得到產品和技術

  • 獲取 Prototype Javascript 框架。 

  • 獲取 jQuery。

  • jQuery User Interface 提供底層交互和動畫的抽象，高級效果和可分類的小部件，這些都基於 jQuery JavaScript Library。 

  • 獲取 script.aculo.us。 

  • 獲取 MooTools。 

  • 下載並學習 Yahoo! YUI Library。 

  • 獲取 ExtJS。 

  • 下載 IBM 產品評估版，開始使用來自 DB二、Lotus®、Rational®、Tivoli® 和 WebSphere® 的應用程序開發工具和中間件產品。 

關於做者

//www.ibm.com/developerworks/i/p-jlennon.jpg

Joe Lennon 是一位來自愛爾蘭科克市的軟件開發人員，他今年 24 歲。Joe 是 Apress 即將發行的 Beginning CouchDB 一書的做者，而且爲 IBM developerWorks 撰寫了許多技術文章和教程。在業餘時間裏，Joe 喜歡踢足球，改進一些小玩意以及玩他的 Xbox 360 遊戲機。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程