第7章

JavaScript庫

7.1JavaScript庫簡介7.2JavaScript庫的選擇7.3利用JavaScript庫實(shí)現(xiàn)DOM操作25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）17.1JavaScript庫簡介7.1.1Dojo7.1.2Prototype7.1.3jQuery7.1.4Yahoo!UILibrary（YUI）7.1.5Mootools7.1.6Script.aculo.us7.1.7ExtJS25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）27.1.1DojoDojo（/）是一個(gè)大型的JavaScript庫，重點(diǎn)在于簡化Web開發(fā)的過程并處理不同瀏覽器之間的差異問題，它提供的界面部件和其他界面元素可以簡單的加入到任何項(xiàng)目之中。Dojo庫的目標(biāo)是建立一個(gè)平臺，讓人們在上面構(gòu)建類似于桌面程序的Web應(yīng)用。如果只是在頁面中添加一點(diǎn)動(dòng)畫效果，用Dojo就屬于大材小用了。25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）37.1.1DojoJavaScript中的變量命名同其他語言非常相似，這里要注意以下幾點(diǎn)：①第一個(gè)字符必須是字母（大小寫均可），下劃線（_）或者美元符號（$）；②后續(xù)的字符可以是字母、數(shù)字、下劃線或者美元符號；③變量名稱不能是關(guān)鍵字或保留字；④不允許出現(xiàn)中文變量名，且大小寫敏感。25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）47.1.2PrototypePrototype（）是最早被廣泛應(yīng)用的JavaScript庫之一，并且現(xiàn)在項(xiàng)目開發(fā)中用到的許多JavaScript技術(shù)都是由它推廣而來的。Prototype庫被廣泛認(rèn)同和使用的一個(gè)原因是它讓許多事情都大大簡化了，包括對常用的獲取DOM對象的window.document.getElementById方法的簡化處理。例如：//獲取id為elementId的DOM元素$(‘elementId’)25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）57.1.2Prototype在Prototype庫中$()函數(shù)不僅僅獲取DOM元素，同時(shí)在返回的DOM元素上會被自動(dòng)加上許多方法，因此對元素的操縱能力將大大增加。Prototype庫的特點(diǎn)在于，它非常關(guān)注兩個(gè)關(guān)鍵方面：操作DOM和應(yīng)用上的便利措施，包括許多字符串函數(shù)和一個(gè)定制的枚舉對象，用于擴(kuò)展一個(gè)定制的散列對象以及內(nèi)建的Array對象。在Web應(yīng)用項(xiàng)目的開發(fā)中，尤其是大量使用Ajax技術(shù)的Web應(yīng)用，Prototype庫都是一個(gè)可靠的選擇。25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）67.1.3jQueryjQuery（）是使用最靈活的JavaScript庫，與其它庫相比，jQuery在設(shè)計(jì)上大量使用了方法鏈。jQuery庫封裝得很好，它的jQuery命名空間使其與其他的庫一起使用時(shí)不會產(chǎn)生沖突。它也提供了一個(gè)$()函數(shù)，該函數(shù)也提供了對DOM元素獲取的封裝。如果和Prototype庫一起使用，可以在jQuery中關(guān)閉$()函數(shù)，以免產(chǎn)生沖突。jQuery庫是一個(gè)簡練并且功能強(qiáng)大的JavaScript庫。如果需要為Web應(yīng)用項(xiàng)目添加一些交互性，JQuery是一個(gè)優(yōu)秀的解決方案。25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）77.1.4Yahoo!UILibrary（YUI）YUI（/yui）是由Yahoo!的員工開發(fā)和支持的。Yahoo!的很多產(chǎn)品都使用了YUI庫，因此他是設(shè)計(jì)完善并且極其健壯的。YUI庫產(chǎn)用了傳統(tǒng)的設(shè)計(jì)模式，每個(gè)方法都只是帶有若干參數(shù)的函數(shù)調(diào)用。它不具備jQuery庫的方法鏈特性，也沒有像Prototype庫中提供的很多方便函數(shù)。不過YUI庫是一個(gè)成熟的工業(yè)產(chǎn)品，它具備超越本章所提到的許多庫的成熟的內(nèi)建功能。YUI庫中使用了大量的命名空間。最頂層是一個(gè)YAHOO對象，所有其它東西都是從這個(gè)對象延伸出來的。例如，如果需要通過id獲得DOM元素對象，可以使用下面的語句：YAHOO.util.Dom.get(“elementID”);25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）87.1.4Yahoo!UILibrary（YUI）YUI庫主要專注于DOM工具，其dom命名空間和Anim命名空間就提供了DOM元素對象的獲取與創(chuàng)建動(dòng)畫效果的方法。除此之外，YUI庫還提供了很多界面部件，界面部件能幫助我們快速的在應(yīng)用程序中添加復(fù)雜功能。YUI庫主要專注于DOM工具，其dom命名空間和Anim命名空間就提供了DOM元素對象的獲取與創(chuàng)建動(dòng)畫效果的方法。除此之外，YUI庫還提供了很多界面部件，界面部件能幫助我們快速的在應(yīng)用程序中添加復(fù)雜功能。25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）97.1.5MootoolsMootools（）最早叫做Moo.fx，是一個(gè)以Prototype為基礎(chǔ)的效果庫。利用Mootools庫可以很方便的實(shí)現(xiàn)JavaScript動(dòng)畫效果，它不但能給DOM元素設(shè)置動(dòng)畫，而且還能一次設(shè)置多個(gè)DOM元素。25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）107.1.6Script.aculo.usScript.aculo.us（http://script.aculo.us）是一個(gè)動(dòng)畫及界面部件庫，它也是基于Prototype庫構(gòu)建的。目前Prototype庫與Script.aculo.us庫的聯(lián)合使用比較廣泛。利用Script.aculo.us庫，往往只需要幾行代碼便可以實(shí)現(xiàn)復(fù)雜的動(dòng)態(tài)效果。25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）117.1.7ExtJSExtJS（）是一個(gè)界面部件庫，它可以說是現(xiàn)有的JavaScript庫中最優(yōu)雅和靈活的一個(gè)。ExtJS剛出現(xiàn)時(shí)叫做YUI.Ext，因?yàn)楫?dāng)時(shí)它是專門用于YUI庫的增強(qiáng)包。但是在其1.0版發(fā)布時(shí)經(jīng)過一次改寫，從此ExtJS庫可以搭配YUI庫、jQuery庫和Prototype庫使用。到了現(xiàn)在的最新版本中，ExtJS庫又增加了一個(gè)獨(dú)立版本，不再依賴其它庫。25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）127.1.7ExtJSExtJS庫特別適合用來建立界面復(fù)雜的Web應(yīng)用，因?yàn)镋xtJS庫包含了大量的界面部件，并且在使用上也并不復(fù)雜。25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）137.2JavaScript庫的選擇我們在開發(fā)一個(gè)Web應(yīng)用項(xiàng)目時(shí)，面對那么多的JavaScript庫，到底應(yīng)該如何選擇呢？實(shí)際上JavaScript庫的選擇完全取決于項(xiàng)目需求。JavaScript庫一般可以被劃分為3大類：DOM輔助、應(yīng)用程序輔助和界面部件。首先應(yīng)該從這3個(gè)方面來考察Web應(yīng)用項(xiàng)目，縮小選擇的范圍。如果只是給Web應(yīng)用項(xiàng)目增加一些交互性，比如簡單的滑動(dòng)效果，那么選擇的庫應(yīng)該專注于DOM輔助，和一些基本的動(dòng)畫效果。例如Mootools或者jQuery都很合適。如果Web應(yīng)用項(xiàng)目需要操縱數(shù)據(jù)集和建立復(fù)雜的用戶界面，那么結(jié)合使用Prototype和ExtJS是比較好的方案。25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）147.2JavaScript庫的選擇考察一個(gè)JavaScript庫的時(shí)候，需要充分實(shí)驗(yàn)，并且還要看一下源代碼，只有對庫的結(jié)構(gòu)很好的理解后，才能發(fā)揮出它的威力，而且理解庫的結(jié)構(gòu)之后，可以更好的選擇庫。JavaScript庫的這個(gè)開發(fā)領(lǐng)域已經(jīng)十分成熟，我們在做Web應(yīng)用開發(fā)時(shí)可以選擇一個(gè)現(xiàn)有的JavaScript庫。每次都重新進(jìn)行JavaScript庫的開發(fā)是不必要的。上述介紹的JavaScript庫應(yīng)用都很廣泛，也就是說有大量的項(xiàng)目在使用它們。使用這些JavaScript庫可以節(jié)省很多時(shí)間，無論是跨瀏覽器的兼容性，還是測試、維護(hù)都能體現(xiàn)出使用JavaScript庫的優(yōu)越性。每個(gè)JavaScript庫都有各自的特點(diǎn)，選擇合適的工具能讓我們的Web應(yīng)用開發(fā)事半功倍。25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）157.3利用JavaScript庫實(shí)現(xiàn)DOM操作7.3.1jQuery7.3.2ExtJS25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）167.3.1jQueryjQuery庫結(jié)合了CSS和XPath選擇符的特點(diǎn)，讓我們可以在DOM中快捷而輕松的獲取元素或元素集合。在jQuery庫中，無論我們使用哪種類型的選擇符，都要使用函數(shù)$()。$()函數(shù)簡化了JavaScript獲取DOM元素的復(fù)雜性，消除了使用for循環(huán)獲取一組DOM元素的需求。放到$()函數(shù)參數(shù)中的任何元素都將自動(dòng)執(zhí)行循環(huán)遍歷，并且會被保存到一個(gè)jQuery對象中?？梢栽?()函數(shù)中使用的參數(shù)幾乎被有什么限制。25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）177.3.2ExtJS在ExtJS庫中，提供了DomQuery組件，專門用于獲取頁面上的DOM元素。DomQuery在ExtJS庫中以單例的形式出現(xiàn)，其作用就是通過CSS選擇符選取目標(biāo)節(jié)點(diǎn)元素，如果找不到目標(biāo)節(jié)點(diǎn)元素就返回null值。使用ExtJS庫時(shí)，通?？梢酝ㄟ^Ext.get()或Ext.fly()方法獲取頁面上的元素，但如果我們想一次性獲得多個(gè)頁面上的元素就必須使用DomQuery組件中的select()或query()方法。25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）18

本章小結(jié)本章主要說明了什么是JavaScript庫，并且重點(diǎn)介紹了現(xiàn)在使用比較廣泛的一些JavaScript庫。通過本章，希望讀者能夠了解每一個(gè)JavaScript庫的特點(diǎn)與應(yīng)用場合，并能夠在Web應(yīng)用開發(fā)中選擇合適的JavaScript庫來使用。本章