第20章 使用第三方框架程序庫

JS從入門到精通第20章使用第三方框架（程序庫）第20章使用第三方框架（程序庫）

JavaScript技術(shù)和其他的技術(shù)一樣，都在不停的發(fā)展著，通過結(jié)合JavaScript、CSS等技術(shù)，出現(xiàn)了一些新的技術(shù)，比如Ajax，嚴(yán)格來說Ajax不是一種新的技術(shù)，只是現(xiàn)有技術(shù)的綜合運(yùn)用。一些優(yōu)秀的程序開發(fā)者或者開發(fā)團(tuán)體，運(yùn)用這些技術(shù)，創(chuàng)建了一些組件或者框架，或者一些通用的程序庫。這些框架或者程序庫的使用，能夠讓一些功能的實(shí)現(xiàn)，變得非常的簡便，甚至還能使用一些特殊的效果。本章就介紹一些第三方的框架和程序庫。20.1使用Ajax框架

Ajax是JavaScript的高級應(yīng)用，是綜合了JavaScript、XMLHttp、CSS、XHTML、XML等的一個(gè)綜合應(yīng)用，近年來，隨著Web2.0的風(fēng)靡，Ajax技術(shù)被廣泛的運(yùn)用，程序開發(fā)領(lǐng)域并不缺少佼佼者，很多具有一定能力的開發(fā)者編寫了一些工具庫，或者提供了一些方便的調(diào)用接口和方法。隨著不斷的完善，這些工具庫變得規(guī)范和通用，功能也得到擴(kuò)展，慢慢的，就形成了框架，本節(jié)主要對一些常用的框架進(jìn)行介紹。讀者可以有選擇的使用，或者在網(wǎng)絡(luò)上尋找更多的資源，甚至，有能力的讀者完全可以嘗試自己編寫一個(gè)易用的框架。20.1.1使用一個(gè)微型的框架Sack嚴(yán)格的來說，Sack還不能被成為一個(gè)框架，因?yàn)閷?shí)在太精簡了，一個(gè)更合適的名稱是Ajax代碼包。雖然非常的小，但是使用卻非常的容易。對于剛剛接觸Ajax的開發(fā)人員應(yīng)該是一個(gè)很好的選擇。Sack是一個(gè)針對XMLHttpRequest的瘦包裝器，調(diào)用者能指定回調(diào)函數(shù)或者回調(diào)DOM對象。借助于回調(diào)DOM，應(yīng)答文本直接被推入到DOM中，簡單的來說，就是能夠通過回調(diào)函數(shù)來改變頁面某個(gè)DOM的內(nèi)容。20.1.2使用一個(gè)有用的表單驗(yàn)證框架checkForm

checkForm框架是用來實(shí)現(xiàn)客戶端表單通用驗(yàn)證功能的一個(gè)實(shí)用JavaScript框架，不論是網(wǎng)頁還是Web應(yīng)用系統(tǒng)的開發(fā)，對于表單的驗(yàn)證是必不可少的，眾多的表單驗(yàn)證規(guī)則，通常需要開發(fā)人員對驗(yàn)證的JavaScript腳本進(jìn)行維護(hù)，而最終的驗(yàn)證代碼都會顯得重復(fù)，比如可能在多個(gè)表單里都需要驗(yàn)證是否允許輸入非數(shù)字字符的判斷，那就需要重復(fù)的在不同的地方編寫同樣類似的代碼，重復(fù)的工作往往都不會讓人感覺很好。checkForm很好的解決了這個(gè)問題，幾乎所有的驗(yàn)證，都可以通過簡單的標(biāo)簽配置即可實(shí)現(xiàn)。本小節(jié)，主要對這個(gè)JavaScript框架作簡單介紹。

20.1.3相關(guān)資源本小節(jié)目的是對常見的Ajax框架進(jìn)行匯總介紹，本小節(jié)的主要內(nèi)容源于AJAXPatterns網(wǎng)站的一篇《AjaxFrameworks》的wiki文章，為了篇幅著想，本小節(jié)僅列出一個(gè)目錄，具體請查看網(wǎng)上資源，鏈接地址為“http:///post/AJAX_Frameworks.asp”，更多的資源請查看資源“http:///wiki/index.php?title=AJAXFrameworks”。20.2使用jQuery框架

jQuery是JavaScript語言的一個(gè)新的框架，jQuery能快速、簡潔的使用HTML，documents，handleevents，performanimations，并且可以把Ajax交互應(yīng)用到網(wǎng)頁中。jQuery能夠改變書寫JavaScript的方式，更值得一提的是，它是一個(gè)跨瀏覽器的框架，使用jQuery完全不用考慮瀏覽器的種類去編寫針對多種瀏覽器的多余代碼。JQuery的口號是——TheWriteLess,DoMore.20.2.1jQuery框架介紹

JQuery函數(shù)庫是一個(gè)新興的框架，很多的開發(fā)人員基于jQuery還編寫了一系列插件，實(shí)現(xiàn)了很多非常好用的功能。jQuery能夠?qū)崿F(xiàn)的功能很多，在jQuery的文檔內(nèi)也說得比較明確，從官方網(wǎng)站也能下載到很多的例子，國內(nèi)的開發(fā)者也建立了jQuery中文社區(qū)，也有很多熱心的開發(fā)人員對英文文檔進(jìn)行了翻譯工作。接下來在有關(guān)jQuery的小節(jié)里，不會大篇幅的摘錄這些文檔，主要從中摘錄一些簡明扼要的例子，體驗(yàn)一下使用jQuery進(jìn)行JavaScript的書寫方式。關(guān)于jQuery的文檔及相關(guān)資源的網(wǎng)絡(luò)地址，將會在后面章節(jié)中介紹。20.2.2jQuery框架示例本小節(jié)會列舉應(yīng)用jQuery框架制作的幾個(gè)示例，部分例子從上摘錄，為了配合講解，做了一定的修改。（1）比window.onload更快一些的載入（2）簡單的實(shí)現(xiàn)雙色表格20.2.3jQuery的插件介紹——Thickbox

jQuery提供了豐富的程序庫，很多的開發(fā)人員，基于jQuery框架，編寫了一系列的插件，用來提升某一個(gè)方面的效果，本小節(jié)主要針對一個(gè)比較典型的網(wǎng)頁對話窗體UI插件做一個(gè)介紹，它就是thickbox，它可以用來展示單一圖片，若干圖片，內(nèi)嵌的內(nèi)容，iframed的內(nèi)容，或以AJAX的混合modal提供的內(nèi)容。20.2.4相關(guān)資源

以上的各個(gè)小節(jié)講解的示例里，在官方網(wǎng)站或者作者的主頁上，都能夠找到很多有用的資源，還能獲取到最近更新的版本，下面做一個(gè)匯總。（1）jQuery相關(guān)資源。官方網(wǎng)站：http:///中文社區(qū)http:///（2）Thickbox資源。作者主頁：http:///Thickbox目前最新版本Thickbox3.1：http:///demo/thickbox/Thickbox2.0中文翻譯：/articleimg/2006/08/3912/thickbox.html20.3Prototype框架和其他更多的框架介紹

Prototype對JavaScript的內(nèi)置對象（如String對象、Array對象等）進(jìn)行了很多有用的擴(kuò)展，同時(shí)它也新增了不少自定義的對象，包括對Ajax開發(fā)的支持等都是在自定義對象中實(shí)現(xiàn)的。對字符串進(jìn)行各種處理。除了Prototype和jQuery框架外，還有更多同樣優(yōu)秀的框架，在未來，也一定會涌現(xiàn)更多別的優(yōu)秀框架，在搜索引擎網(wǎng)站里搜索就會發(fā)現(xiàn)它們，更多的驚喜，留給讀者去發(fā)現(xiàn)，說不定，在不久的將來，讀者自己就能開發(fā)出一個(gè)優(yōu)秀的框架。20.4小結(jié)本章主要介紹了JavaScript的第三方框架，主要以jQuery框架為代表，對一些典型的框架進(jìn)行了介紹，也提供了網(wǎng)絡(luò)上的一些資源，下面對本章做一個(gè)小結(jié)。所謂的JavaScript框架其實(shí)就是JavaScript的程序庫，規(guī)范化、標(biāo)準(zhǔn)化、通用化后逐漸發(fā)展成為受開發(fā)人員青睞的框架。幾個(gè)典型的框架是：微型的框架Sack；通用表單驗(yàn)證框架；跨瀏覽器的優(yōu)秀框架jQuery和Prototype。基于jQuery的插件Thickbox是一個(gè)網(wǎng)頁UI對話框組件，更多的資源可以在官網(wǎng)http://上獲取。20.5常見面試題分析

20.5.1Ajax是什么？

Ajax即“AsynchronousJavaScriptandXML”（異步JavaScript和XML)，Ajax并非縮寫詞，而是由JesseJamesGaiiett創(chuàng)造的名詞，是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。20.5.2描述jQuery的發(fā)展和優(yōu)勢

jQuery由美國人JohnResig創(chuàng)建，至今已吸引了來自世界各地的眾多JavaScript高手加入其團(tuán)隊(duì)，包括來自德國的Jörn

Zaefferer，羅馬尼亞的StefanPetre等等。jQuery是繼Prototype之后又一個(gè)優(yōu)秀的JavaScriptīpt框架。其宗旨是——WRITELESS，DOMORE。寫更少的代碼，做更多的事情。它是輕量級的JS庫(壓縮后只有21k)，這是其它的JS庫所不及的，它兼容CSS3，還兼容各種瀏覽器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+）。jQuery是一個(gè)快速的，簡潔的JavaScript庫