从头开始学习 Dojo,第 1 部分: 开始 Dojo 开发
Dojo Toolkit 简介Dojo 于 2004 年创建,使开发 DHTML 和 JavaScript web 应用程序开发流程更为容易,隐藏了很多现代 web 浏览器中普遍存在的跨浏览器矛盾。这使重点放在实现功能上,而不是调整代码使其在每个浏览器上运行。Dojo 属于 Dojo 基金会,该基金会是 Russell 和 Dylan Schiemann 于 2005 年创建的。Dojo 是一个开源软件(OSS),有双重许可,Academic Free License (AFL) 和一个修改的 BSD 许可,您可以选择遵守一个。 特性一瞥Dojo Toolkit 的特性可以分到 4 个不同部分。这种划分使得开发人员可以将库大小保持到最小,确保应用程序性能不受大量 JavaScript 库下载的影响。例如,如果您只需要 Ajax 支持性能,您只需要包含 base 包;不需要包含扩展的 Dijit UI 组件,在本系列中稍后您将学习更多关于 Dojo 加载不同模块的方法。
准备开始Dojo 讨论的够多了。现在我们来看看工具包的实际使用。本小节将介绍在您的项目中使用 Dojo 的各种方法,如何使用 Firefox 和 Firebug 插件建立一个开发环境,以及如何编写 Dojo 代码来确保一切如预期正常运行。 建立 Dojo建立 Dojo 最简单的方法是从一个 Content Delivery Network (CDN) 提供它,这将从附近的客户机器上传递 Dojo JavaScript 文件,而不是从您自己的服务器上。 这不仅有助于加速脚本加载,也意味着用户从其他网站加载 Dojo 文件的机会有所增加,这使得它们从缓存中加载,进一步提高了加载速度。 在本系列中,假设您使用的是 Dojo 1.5,尽管任何 1.x 版本都是可兼容的。包含在您的 HTML 页面中的以下 <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script> 另外,您可以下载 Dojo 到您自己的服务器上,然后从那里加载它。我的首选方法是从一个 CDN 加载,同时有一个本地副本在 CDN 服务器出现问题时作为后备。为了做到这一点,下载 Dojo 并将文件放在一个相对于存储您的 web 目录比较合适的位置。假设从您 web 目录到 Dojo 脚本文件的相对路径是 “script/”,清单 1 中的代码将首先从 CDN 加载 Dojo,如果失败,则加载本地版本。 清单 1. 使用本地回退从 CDN 加载 Dojo<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"> </script> <script> typeof(dojo) === "undefined" && document.write(unescape('%3Cscript src="js/libs/dojo-1.5.min.js"%3E%3C/script%3E')) </script> 有一点很重要,将以 使用 Firebug 控制台与需要创建一个 web 页面来试验 Dojo 相比,本文中的很多示例是使用一个卓越的 Firefox 插件 Firebug 来执行的。Firebug 为 JavaScript 开发人员提供完整的控制台记录、调试和网络监控设施,这使得测试和修复 JavaScript 应用程序中的问题更为容易。其他的一些 web 浏览器实际上也包含这些特性,但是在本例中我使用的是 Firefox 和 Firebug,因为它们在各种平台上都可使用。 首先,您必须安装 Firefox 和 Firebug(更多下载信息见参考资料)。安装了 Firefox 之后,启动它,然后下载和安装 Firebug 插件。Firebug 安装完成之后,在您 Firefox 窗口的右下角您可以看到一个像虫子的图标,如图 1 所示,单击这个图标就可以打开 Firebug 窗口。 图 1. Firebug 图标和窗口 要使用这个 Firebug 控制台,单击 Console 选项卡。您可能首先需要启动控制台,单击选项卡上的下箭头然后单击Enable。现在,在控制台窗口中,输入代码: 您可以看到图 2 所示的结果,有一条消息显示 JavaScript 调试器被启动来支持控制台。 图 2. 使用 Firebug 控制台Hello,World!接下来,我们来测试 Dojo。对于 “Hello,World!” 示例,当 DOM 完成加载后(见清单 2),您将使用 Dojo 附加一个函数。该函数只是将消息 “Hello,World!” 打印到页面结尾处。好了,所以说这的确不会改变您创建 web 应用程序的方法,它所做的只是让您确认 Dojo 在您的页面上可用。整篇文章中您都要加载这个页面,使用 Firebug 控制台探究 Dojo 特性。 清单 2. listing1.html:Dojo Hello World 应用程序<html> <head> <title>Exploring Dojo</title> </head> <body> <h1>Exploring Dojo</h1> <div id="message">This is a DIV element with id attribute message.</div> <ul id="list"> <li>This is the first item in a list</li> <li class="highlight">This is the second item in a list</li> <li>This is the third item in a list</li> </ul> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"> </script> <script> dojo.addOnLoad(function() { dojo.create( "div",{ "innerHTML": "Hello,World!" },dojo.body() ); }); </script> </body> </html> 该函数将附加一个 图 3. “Hello World” 页面光彩夺目暂时不要删除这个页面或者关闭它。在下一小节,您将会用到这个页面,只有一个目的 — 加载 Dojo,并且您将使用 Firebug 控制台直接试验 Dojo 的其他方面。 继续下一小节之前,还有一点非常重要需要指出,那就是关于 JavaScript 在页面上的定位。您可能注意到了,我没有将 Dojo 和这个 JavaScript 页面包含在 HTML 文档的 回页首
基础知识在本小节,您将学习一些很有用的 Dojo 功能,使之更易于使用 DOM 和阵列。要实验本节中的示例,继续使用上小节您在 Firefox 中创建的页面,输入 Firebug 控制台窗口中的代码。 DOM 实用函数DOM 实用函数通过提供根据 ID 寻找条目的能力或者使用 CSS3 选择器,使得使用 DOM 中的元素比较容易。还有一些其他功能,可以创建和销毁元素,以及操作现有元素内容。
|
描述 | 名字 | 大小 |
---|---|---|
文档源代码 | dojo.ground.1.zip | 1KB |
参考资料
学习
- 访问Dojo Toolkit主页。
- 观看一些Dojo Toolkit 演示。
- Introducing The Dojo Toolkit:从 Opera 开发人员网站阅读优秀的 Dojo Toolkit 入门读物。
- Introduction to the Dojo toolkit,Part 1: Setup,core,and widgets:从 Javaworld 阅读另一篇关于 Dojo 工具包的优秀入门读物。
- Dojo 1.5: Ready to power your web app:阅读 Sitepen 上的这篇文章,了解 Dojo 1.5 中的一些新特性。
- Introduction to the Dojo Toolkit: Tutorial:阅读 Ajax Matters 上的这个入门教程。
- “使用 Dojo 国际化 Web 应用程序”(developerWorks,2008 年 8 月):找到一种使用 Dojo 工具箱的 i18n 特性在网站和 Web 应用程序的上下文中实现本地语言支持的方法。
- “利用 Dojo Toolkit 使用 web 服务”(developerWorks,2010 年 9 月):了解如何通过 Dojo Toolkit 使用服务,在 web 页面上实现 Ajax。
- 参阅Dojo: 使用 Dojo JavaScript Library 来构建 Ajax 应用程序,作者:James E. Harmon。
- “编写一个定制的 Dojo 应用程序”(developerWorks,2008 年 12 月):阅读这篇文章,了解更多 Dojo 信息。
- “使用 Dojo 开发 HTML 小部件”(developerWorks,2006 年 10 月)探讨 Dojo 的可扩展性。
- “Using the Dojo Toolkit with WebSphere Portal”(developerWorks,2007 年 11月)介绍在 WebSphere Portal 应用程序中如何安装、配置、使用 Dojo Toolkit。
- developerWorksdeveloperWorks 中国网站 Web 开发专区专门提供关于各种 Web 解决方案的文章。
- developerWorks Web development 专区:通过专门关于 Web 技术的文章和教程,扩展您在网站开发方面的技能。
- developerWorks Ajax 资源中心:这是有关 Ajax 编程模型信息的一站式中心,包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
- developerWorks Web 2.0 资源中心,这是有关 Web 2.0 相关信息的一站式中心,包括大量 Web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过Web 2.0 新手入门栏目,迅速了解 Web 2.0 的相关概念。
- 查看HTML5 专题,了解更多和 HTML5 相关的知识和动向。
获得产品和技术
- 下载Dojo Toolkit。本文使用的是版本 1.5。
- 阅读Dojo Toolkit API 文档。
- 获取Firefox。
- 获取Firebug。
- IBM - Dojo 扩展样例:可以使用 Dojo Extension Feature Set 启用一个 IBM WebSphere Portlet Factory 模型来利用 Dojo JavaScript Toolkit 提供的功能。
- IBM 产品评估试用版软件或IBM SOA 人员沙箱,并开始使用来自 DB2?、Lotus?、Rational?、Tivoli? 和 WebSphere? 的应用程序开发工具和中间件产品。
讨论
- 加入developerWorks 中文社区。查看开发人员推动的博客、论坛、组和维基,并与其他 developerWorks 用户交流。
原文来自
http://www.ibm.com/developerworks/cn/web/wa-ground/index.html
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!