javascript原型是什么_javascript常用框架介紹 - javascript原型是什么_javascript常用框架介紹

　　什么是JavaScript 框架？

　　JavaScript 本身就是一種功能強大的語言，您不需要額外的框架就可創(chuàng)建富互聯(lián)網(wǎng)應(yīng)用程序（RIA）。然而使用JavaScript 并不是件容易的事，主要是由于支持多個 Web 瀏覽器產(chǎn)生的復(fù)雜性。與 HTML 和 CSS一樣，不同的瀏覽器有不同的 JavaScript 實現(xiàn)。讓 JavaScript 代碼實現(xiàn)跨瀏覽器兼容簡直是個噩夢。

　　JavaScript 框架或庫是一組能輕松生成跨瀏覽器兼容的 JavaScript 代碼的工具和函數(shù)。每一個庫都在眾多流行的 Web瀏覽器的現(xiàn)代版本上進行了可靠的測試，因此，您可以放心地使用這些框架，您的基于 JavaScript 的 RIA 將會在不同瀏覽器和平臺上以類似的方式工作。

　　除了解決跨瀏覽器問題，使用 JavaScript 框架可以更容易地編寫檢索、遍歷、操作 DOM 元素的代碼。它們不僅提供獲取 DOM 元素引用的快捷函數(shù)，而且還允許 DOM 遍歷函數(shù)以菊花鏈（daisy-chaining）方式查找任意深度的父元素、子元素、兄弟元素。最后，框架還提供一系列函數(shù)來更輕松地操作這些對象，可以改變、添加或刪除內(nèi)容本身；或者使用 CSS 樣式類來改變元素的外觀。

　　框架的另一重要特性是其改進的事件處理支持。由于不同瀏覽器的實現(xiàn)方式各不相同，跨瀏覽器事件處理將會非常艱難。因此 JavaScript 框架通常封裝瀏覽器事件，并提供一組有用的跨瀏覽器兼容的函數(shù)來進行處理。有些框架還會提供一組標(biāo)準(zhǔn)鍵盤代碼來表示基于鍵盤的事件（如按下 Escape 鍵、Return 鍵、光標(biāo)鍵，等等）。

　　所有這些特性都非常有用，但 JavaScript 框架有一個特性對于它最近的流行非常重要 — 支持 Ajax。與 JavaScript 的其他許多方面一樣，每個 Web 瀏覽器往往以不同方式支持 Ajax，這使得以一種在所有 Web 瀏覽器中都受支持的方式處理 Ajax 變得十分復(fù)雜。幾乎所有 JavaScript 框架都包含某種形式的 Ajax 庫支持，通常提供 Ajax 請求和響應(yīng)對象，以及用于評價響應(yīng)、更新 DOM 元素、查詢特定請求的幫助函數(shù)（helper）。

　　JavaScript 框架的典型特性

　　現(xiàn)在，讓我們看一看大多數(shù) JavaScript 框架都具備的有用特性。包括：

　　· 選擇器（Selector）

　　· DOM 遍歷

　　· DOM 操作

　　· 實用（Utility）函數(shù)

　　· 事件處理

　　· Ajax

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

?

　　選擇器

　　大多數(shù)可用的 JavaScript 框架都會實現(xiàn)某種形式的對快速元素選取的支持。通常來說，這些選擇器會使獲得 HTML 元素引用的過程快很多，并允許通過 ID、類名、元素類型甚至使用一組偽選擇器（pseudo-selector）來查找元素。

　　例如，使用常規(guī) JavaScript，您也許會用以下代碼通過 ID 來選擇 DOM 元素：

　　var theElement = document.getElementById（‘the_element’）;

　　與其他框架一樣，MooTools 提供了執(zhí)行此操作的快捷方法。除了選取該元素，MooTools 還可通過一系列實用函數(shù)擴展此元素。其語法如下：

　　var theElement = $（‘the_element’）;

　　如上所示的單美元符號（dollar）函數(shù)，在很多（但不是所有）流行的 JavaScript 框架中都可用，而且語法也大體一致。Prototype 庫則更進一步，允許通過 ID 一次選取多個元素，并返回元素數(shù)組。和 MooTools 一樣，可用Prototype 實用函數(shù)擴展這些元素。用 Prototype 一次選取多個元素的語法是：

　　var elementArray = $（‘element_one’， ‘element_two’，‘element_three’）;

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

　　在前面的例子中，必須提供需要選取的元素的 ID。然而，如果要選取多個元素（例如，所有圖片）或是具有特定 CSS類名的所有表行，那又怎么辦呢？MooTools（還有其他庫）提供了一個簡單的方法來實現(xiàn)此功能 — 雙美元符號（dollar-dollar）函數(shù)。它的工作方式與單美元符號函數(shù)相同，不同之處在于它接受 CSS 元素名、類名、偽選擇器作為參數(shù)，而不是接受元素 ID 作為參數(shù)。例如，要使用 MooTools 選取 Web 頁面上的所有圖片，將用以下代碼：

　　var allImages = $$（‘img’）;

　　這將返回一個包含文檔中的所有圖片的數(shù)組，其中每一個圖片都使用單美元符號函數(shù)進行擴展，以包含 MooTools 實用函數(shù)。

　　根據(jù)標(biāo)記名選取元素非常有用，但如果只是想根據(jù) CSS 類選擇一個元素子集，該怎么辦呢？這也很簡單。在下面的例子中，MooTools 將會選擇 CSS 類名為 “odd” 的所有表行。這在實現(xiàn)表行條狀化（在表行之間交替變化背景色）時將非常有用：

　　var allOddRows = $$（‘tr.odd’）;

　　實際上，MooTools 提供了實現(xiàn)表行條狀化（row striping）的更好方法。在上面的例子中，假設(shè)表中的所有奇數(shù)行的CSS 類名為 “odd”。以下代碼不要求對表行定義任何 CSS 類名：

　　var allOddRows = $$（‘tbody:odd’）;

　　這是一個偽選擇器的例子，將會返回所有符合條件的對象，在本例中為頁面中的 tbody（表主體）的所有奇數(shù)子元素。MooTools 偽選擇器的其他例子包括：

　　· checked— 選取所有選中的元素（例如，選中的復(fù)選框）

　　· enabled— 選取所有啟用的元素

　　· contains— 選取所有包含作為參數(shù)傳遞給選擇器的文本的元素（例如，contains（‘thistext’））

　　如前所述，并非所有 JavaScript 框架都使用單美元符號函數(shù)選取 DOM 元素。在 YUI （Yahoo！User Interface） 庫第 3 版中，用以下代碼根據(jù) ID 選取元素（請注意 YUI 3 要求在 ID 前傳遞 ID 選擇器符號 #）：

　　var theElement = Y.one（‘#the_element’）;

　　同樣，與使用雙美元符號函數(shù)根據(jù)標(biāo)記或類名檢索元素不同的是，YUI 使用了 Y.all 函數(shù)：

　　var allOddRows = Y.all（‘tr.odd’）;

　　ExtJS 使用類似的方式，用以下語法根據(jù) ID 選取元素：

　　var theElement = Ext.get（‘the_element’）;

　　以下語法用于根據(jù)標(biāo)記和類名選取元素：

　　var allOddRows = Ext.select（‘tr.odd’）;

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

?

　　DOM 遍歷

　　根據(jù) ID、元素類型或 CSS 類名查找元素非常有用，但如何根據(jù)元素在 DOM 樹中的位置執(zhí)行查找呢？換而言之，根據(jù)一個給定的元素查找其父元素、子元素、前一個或后一個兄弟元素。例如，看一下清單 1 的 HTML 片段。

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

　　《table》 《thead》 《tr》《th》Name《/th》 《th》Email Address《/th》《th》Actions《/th》 《/tr》 《/thead》 《tbody》 《trid=“row-001”》 《td》Joe Lennon《/td》《td》joe@joelennon.ie《/td》 《td》《ahref=“#”》Edit《/a》? 《ahref=“#”》Delete《/a》《/td》 《/tr》 《trid=“row-002”》 《td》Jill Mac Sweeney《/td》 《td》jill@example.com《/td》《td》《a href=“#”》Edit《/a》? 《ahref=“#”》Delete《/a》《/td》 《/tr》《/tbody》《/table》

　　清單 1 用縮進表示每個元素在 DOM 節(jié)點樹中的位置。在該例中，table 元素是根元素，它有兩個子節(jié)點，thead 和 tbody。thead 元素只有一個子節(jié)點 tr，后者有三個子節(jié)點 — 所有 th 元素。tbody 元素有兩個子節(jié)點，均為 tr 元素，每個 tr 元素又有三個子元素。每行的第三個子元素又有兩個子節(jié)點，都是 a （錨點）標(biāo)記。

　　如您所知，可以使用 JavaScript 框架的 Selector 函數(shù)根據(jù) ID 輕松選取元素。在該例中，有兩個元素具有 ID — 均為 tr（表行）元素，ID 分別為 row-001 和 row-002。要使用 Prototype 選取第一個 tr 元素，需要用到以下代碼：

　　var theRow = $（‘row-001’）;

　　在前面的小節(jié)中，您學(xué)會了如何使用選擇器根據(jù)類型或 CSS 類檢索元素。在本例中，可以使用以下語法選取所有 td 元素。

　　var allCells = $$（‘td’）;

　　這段代碼的問題是它將返回 DOM 中的所有 td 元素。但是，如果只希望獲取 ID 為 row-001 的行中的 td 元素，怎么辦呢？這時就該使用 DOM 遍歷函數(shù)了。首先，使用 Prototype 選取 ID 為 row-001 的 tr 元素的所有子節(jié)點：

　　var firstRowCells = theRow.childElements（）;

　　這將返回 theRow 變量（之前已設(shè)為 ID 為 row-001 的元素）的所有子元素的數(shù)組。

　　下一步，假設(shè)只希望取得該行的第一個子節(jié)點，在本例中，是內(nèi)容為 “Joe Lennon” 的 td 元素。應(yīng)使用以下語句：

　　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 兄弟節(jié)點間導(dǎo)航。本例中，第二個單元格是第一個單元格的下一個兄弟節(jié)點，因此可以使用以下語句：

　　var firstRowSecondCell = firstRowFirstCell.next（）;

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

　　var firstRowThirdCell = firstRowFirstCell.next（1）;

　　除了使用索引查找特定節(jié)點外，Prototype 還允許使用 CSS 選擇器語法?？紤] 清單 1 的例子，找到包含 Jill Mac Sweeney 的明細的行的第二個鏈接（“Delete” 鏈接）：

　　var secondRowSecondLink = $（‘row-002’）.down（‘a(chǎn)’， 1）;

　　在本例中，可以使用美元符號函數(shù)找到 ID 為 row-002 的元素，然后向下遍歷 DOM，直到找到下一個后代 a（錨點）元素。

　　有些框架可以使用 “菊花鏈” 遍歷函數(shù)，表示可以將遍歷命令互相連接。在 Prototype 中實現(xiàn)前一個例子的另一種方法是：

　　var secondRowSecondLink = $（‘row-002’）.down（‘a(chǎn)’）.next（）;

　　考慮下面的例子：

　　var domTraversal =$（‘row-001’）.down（）.up（）.next（）.previous（）;

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