第7章

JavaScript庫

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

本章小結本章主要說明了什么是JavaScript庫，并且重點介紹了現在使用比較廣泛的一些JavaScript庫。通過本章，希望讀者能夠了解每一個JavaScript庫的特點與應用場合，并能夠在Web應用開發中選擇合適的JavaScript庫來使用。本章