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

　　什么是JavaScript 框架？

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

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

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

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

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

　　JavaScript 框架的典型特性

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

　　· 選擇器（Selector）

　　· DOM 遍歷

　　· DOM 操作

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

　　· 事件處理

　　· Ajax

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

?

　　選擇器

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

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

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

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

　　var theElement = $（‘the_element’）;

　　如上所示的單美元符號(hào)（dollar）函數(shù)，在很多（但不是所有）流行的 JavaScript 框架中都可用，而且語(yǔ)法也大體一致。Prototype 庫(kù)則更進(jìn)一步，允許通過(guò) ID 一次選取多個(gè)元素，并返回元素?cái)?shù)組。和 MooTools 一樣，可用Prototype 實(shí)用函數(shù)擴(kuò)展這些元素。用 Prototype 一次選取多個(gè)元素的語(yǔ)法是：

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

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

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

　　var allImages = $$（‘img’）;

　　這將返回一個(gè)包含文檔中的所有圖片的數(shù)組，其中每一個(gè)圖片都使用單美元符號(hào)函數(shù)進(jìn)行擴(kuò)展，以包含 MooTools 實(shí)用函數(shù)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

?

　　DOM 遍歷

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

　　清單 1. HTML 片段（一個(gè) 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 用縮進(jìn)表示每個(gè)元素在 DOM 節(jié)點(diǎn)樹(shù)中的位置。在該例中，table 元素是根元素，它有兩個(gè)子節(jié)點(diǎn)，thead 和 tbody。thead 元素只有一個(gè)子節(jié)點(diǎn) tr，后者有三個(gè)子節(jié)點(diǎn) — 所有 th 元素。tbody 元素有兩個(gè)子節(jié)點(diǎn)，均為 tr 元素，每個(gè) tr 元素又有三個(gè)子元素。每行的第三個(gè)子元素又有兩個(gè)子節(jié)點(diǎn)，都是 a （錨點(diǎn)）標(biāo)記。

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

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

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

　　var allCells = $$（‘td’）;

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

　　var firstRowCells = theRow.childElements（）;

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

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

　　var firstRowFirstCell = theRow.down（）;

　　很簡(jiǎn)單吧？這種特別的用法等價(jià)于：

　　var firstRowFirstCell = theRow.childElements（）［0］;

　　也可以表示為：

　　var firstRowFirstCell = theRow.down（0）;

　　JavaScript 索引值從零（0）開(kāi)始，所以以上語(yǔ)句實(shí)際上是告訴 JavaScript 選取第一個(gè)子元素。要選取第二個(gè)子元素（包含joe@joelennon.ie 郵件地址的單元格），可以使用下面的語(yǔ)句：

　　var firstRowSecondCell = theRow.down（1）;

　　或者，可以在 DOM 兄弟節(jié)點(diǎn)間導(dǎo)航。本例中，第二個(gè)單元格是第一個(gè)單元格的下一個(gè)兄弟節(jié)點(diǎn)，因此可以使用以下語(yǔ)句：

　　var firstRowSecondCell = firstRowFirstCell.next（）;

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

　　var firstRowThirdCell = firstRowFirstCell.next（1）;

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

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

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

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

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

　　考慮下面的例子：

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

　　如您所見(jiàn)，菊花鏈方式可以將幾個(gè) DOM 遍歷語(yǔ)句連接起來(lái)。實(shí)際上，上例實(shí)際上選擇 tr 元素 row-001，因此菊花鏈剛好回到了起點(diǎn)！