JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）課件第07章 JavaScript庫(kù)

第7章

JavaScript庫(kù)

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

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