第07章 JavaScript库.ppt

2020年1月31日星期五 JavaScript语言与Ajax应用 1 7 1JavaScript库简介7 2JavaScript库的选择7 3利用JavaScript库实现DOM操作 第7章JavaScript库 2020年1月31日星期五 JavaScript语言与Ajax应用 2 7 1JavaScript库简介 7 1 1Dojo7 1 2Prototype7 1 3jQuery7 1 4Yahoo UILibrary YUI 7 1 5Mootools7 1 6Script aculo us7 1 7ExtJS 2020年1月31日星期五 JavaScript语言与Ajax应用 3 7 1 1Dojo Dojo 2020年1月31日星期五 JavaScript语言与Ajax应用 4 7 1 1Dojo JavaScript中的变量命名同其他语言非常相似 这里要注意以下几点 第一个字符必须是字母 大小写均可 下划线 或者美元符号 后续的字符可以是字母 数字 下划线或者美元符号 变量名称不能是关键字或保留字 不允许出现中文变量名 且大小写敏感 2020年1月31日星期五 JavaScript语言与Ajax应用 5 7 1 2Prototype Prototype http prototypejs org 是最早被广泛应用的JavaScript库之一 并且现在项目开发中用到的许多JavaScript技术都是由它推广而来的 Prototype库被广泛认同和使用的一个原因是它让许多事情都大大简化了 包括对常用的获取DOM对象的window document getElementById方法的简化处理 例如 获取id为elementId的DOM元素 elementId 2020年1月31日星期五 JavaScript语言与Ajax应用 6 7 1 2Prototype 在Prototype库中 函数不仅仅获取DOM元素 同时在返回的DOM元素上会被自动加上许多方法 因此对元素的操纵能力将大大增加 Prototype库的特点在于 它非常关注两个关键方面 操作DOM和应用上的便利措施 包括许多字符串函数和一个定制的枚举对象 用于扩展一个定制的散列对象以及内建的Array对象 在Web应用项目的开发中 尤其是大量使用Ajax技术的Web应用 Prototype库都是一个可靠的选择 2020年1月31日星期五 JavaScript语言与Ajax应用 7 7 1 3jQuery jQuery 是使用最灵活的JavaScript库 与其它库相比 jQuery在设计上大量使用了方法链 jQuery库封装得很好 它的jQuery命名空间使其与其他的库一起使用时不会产生冲突 它也提供了一个 函数 该函数也提供了对DOM元素获取的封装 如果和Prototype库一起使用 可以在jQuery中关闭 函数 以免产生冲突 jQuery库是一个简练并且功能强大的JavaScript库 如果需要为Web应用项目添加一些交互性 JQuery是一个优秀的解决方案 2020年1月31日星期五 JavaScript语言与Ajax应用 8 7 1 4Yahoo UILibrary YUI YUI 2020年1月31日星期五 JavaScript语言与Ajax应用 9 7 1 4Yahoo UILibrary YUI YUI库主要专注于DOM工具 其dom命名空间和Anim命名空间就提供了DOM元素对象的获取与创建动画效果的方法 除此之外 YUI库还提供了很多界面部件 界面部件能帮助我们快速的在应用程序中添加复杂功能 YUI库主要专注于DOM工具 其dom命名空间和Anim命名空间就提供了DOM元素对象的获取与创建动画效果的方法 除此之外 YUI库还提供了很多界面部件 界面部件能帮助我们快速的在应用程序中添加复杂功能 2020年1月31日星期五 JavaScript语言与Ajax应用 10 7 1 5Mootools Mootools 最早叫做Moo fx 是一个以Prototype为基础的效果库 利用Mootools库可以很方便的实现JavaScript动画效果 它不但能给DOM元素设置动画 而且还能一次设置多个DOM元素 2020年1月31日星期五 JavaScript语言与Ajax应用 11 7 1 6Script aculo us Script aculo us http script aculo us 是一个动画及界面部件库 它也是基于Prototype库构建的 目前Prototype库与Script aculo us库的联合使用比较广泛 利用Script aculo us库 往往只需要几行代码便可以实现复杂的动态效果 2020年1月31日星期五 JavaScript语言与Ajax应用 12 7 1 7ExtJS ExtJS 是一个界面部件库 它可以说是现有的JavaScript库中最优雅和灵活的一个 ExtJS刚出现时叫做YUI Ext 因为当时它是专门用于YUI库的增强包 但是在其1 0版发布时经过一次改写 从此ExtJS库可以搭配YUI库 jQuery库和Prototype库使用 到了现在的最新版本中 ExtJS库又增加了一个独立版本 不再依赖其它库 2020年1月31日星期五 JavaScript语言与Ajax应用 13 7 1 7ExtJS ExtJS库特别适合用来建立界面复杂的Web应用 因为ExtJS库包含了大量的界面部件 并且在使用上也并不复杂 2020年1月31日星期五 JavaScript语言与Ajax应用 14 7 2JavaScript库的选择 我们在开发一个Web应用项目时 面对那么多的JavaScript库 到底应该如何选择呢 实际上JavaScript库的选择完全取决于项目需求 JavaScript库一般可以被划分为3大类 DOM辅助 应用程序辅助和界面部件 首先应该从这3个方面来考察Web应用项目 缩小选择的范围 如果只是给Web应用项目增加一些交互性 比如简单的滑动效果 那么选择的库应该专注于DOM辅助 和一些基本的动画效果 例如Mootools或者jQuery都很合适 如果Web应用项目需要操纵数据集和建立复杂的用户界面 那么结合使用Prototype和ExtJS是比较好的方案 2020年1月31日星期五 JavaScript语言与Ajax应用 15 7 2JavaScript库的选择 考察一个JavaScript库的时候 需要充分实验 并且还要看一下源代码 只有对库的结构很好的理解后 才能发挥出它的威力 而且理解库的结构之后 可以更好的选择库 JavaScript库的这个开发领域已经十分成熟 我们在做Web应用开发时可以选择一个现有的JavaScript库 每次都重新进行JavaScript库的开发是不必要的 上述介绍的JavaScript库应用都很广泛 也就是说有大量的项目在使用它们 使用这些JavaScript库可以节省很多时间 无论是跨浏览器的兼容性 还是测试 维护都能体现出使用JavaScript库的优越性 每个JavaScript库都有各自的特点 选择合适的工具能让我们的Web应用开发事半功倍 2020年1月31日星期五 JavaScript语言与Ajax应用 16 7 3利用JavaScript库实现DOM操作 7 3 1jQuery7 3 2ExtJS 2020年1月31日星期五 JavaScript语言与Ajax应用 17 7 3 1jQuery jQuery库结合了CSS和XPath选择符的特点 让我们可以在DOM中快捷而轻松的获取元素或元素集合 在jQuery库中 无论我们使用哪种类型的选择符 都要使用函数 函数简化了JavaScript获取DOM元素的复杂性 消除了使用for循环获取一组DOM元素的需求 放到 函数参数中的任何元素都将自动执行循环遍历 并且会被保存到一个jQuery对象中 可以在 函数中使用的参数几乎被有什么限制 2020年1月31日星期五 JavaScript语言与Ajax应用 18 7 3 2ExtJS 在ExtJS库中 提供了DomQuery组件 专门用于获取页面上的DOM元素 DomQuery在ExtJS库中以单例的形式出现 其作用就是通过CSS选择符选取目标节点元素 如果找不到目标节点元素就返回null值 使用ExtJS库时 通常可以通过Ext get 或Ext fly 方法获取页面上的元素 但如果我们想一次性获得多个页面上的元素就必须使用DomQuery组件中的select 或query 方法 2020年1月31日星期五 JavaScript语言与Ajax应用 19 本章小结 本章主要说明了什么是JavaScript库 并且重点介绍了现在使用比较广泛的一些JavaScript库 通过本章 希望读者能够了解每一个JavaScript库的特点与应用场合 并能够在Web应用开发中选择合