JavaScript语言与Ajax应用（第二版）课件第07章 JavaScript库

第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库来使用。本章