Dojo开发（一）

时间 2021-01-11 标签 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 加载不同模块的方法。

Base
Base 包提供 Dojo Toolkit 的基础，包括一些功能，比如 DOM 使用函数、CSS3 基于选择器的 DOM 查询、事件处理、基本的动画、以及 Dojo 基于类的面向对象特性。本文主要介绍 Base。
Core
Core 包包含一些 Base 中没有包含的附加特性。通常，这些特性不像 Base 中的特性那样频繁使用；因此，它们单独加载减轻 Base 包的负担。从这一点上来讲，Core 包提供一些实际有用的组件，包括高级动画拖放、I/O、数据管理、国际化（i18n）、浏览器历史管理。Core 包不再本文范围之内。
Dijit
Dijit 包包含 Dojo 小部件和组件的扩展 UI 库。这些小部件的一些示例包括对话框、日历、调色板、工具提示和树。它也包括一些表单控件，这比标准 HTML 表单控件提供更多的功能，还有一些完整的布局管理选项。本系列的第 3 部分将深入介绍 Dijit 特性。
DojoX
Dojo eXtensions (DojoX) 包含工具箱的各个子项目。位于 DojoX 中的大多数是实验特性，但是也有一些稳定组件和特性。DojoX 将在本系列的第 3 部分做一简要介绍。

加载Dojo

建立 Dojo 最简单的方法是从一个 Content Delivery Network (CDN) 提供它，这将从附近的客户机器上传递 Dojo JavaScript 文件，而不是从您自己的服务器上。这不仅有助于加速脚本加载，也意味着用户从其他网站加载 Dojo 文件的机会有所增加，这使得它们从缓存中加载，进一步提高了加载速度。

在本系列中，假设您使用的是 Dojo 1.5，尽管任何 1.x 版本都是可兼容的。包含在您的 HTML 页面中的以下 <script> 标记将从 Google 的 CDN 中下载 Dojo 1.5：

<script src="//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>

有一点很重要，将以 typeof(dojo) 开头的代码放在一行；否则，它将不能运行。如果您想测试副本是否起作用，只需要注释掉从 CDN 加载的这一行，然后使用 “Hello, World!” 示例（几分钟内就可以创建）测试您的页面即可。

Dojo Hello World示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Dojo Hello World入门</title>
</head>
<body>
	<!-- 从cdn加载dojo.js -->
	<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script>
	<script>
		// DOM 加载完成后触发
		dojo.addOnLoad(function(){
			dojo.create("div",{
				"innerHTML":"Hello World! HuangBaoKang"
			},dojo.body());
		});
	</script>
</body>
</html>

浏览器运行效果图：

加载好dojo.js后，在浏览器控制台中可以看到dojo是一个非常强大的对象