Dojo1.8系列教程一 ---- 开始使用Dojo

最新推荐文章于 2020-07-24 05:12:20 发布

原创最新推荐文章于 2020-07-24 05:12:20 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

Dojo1.8 专栏收录该内容

4 篇文章

订阅专栏

这篇教程介绍了如何开始使用Dojo 1.8，包括通过CDN引入Dojo并实现基本功能。讲解了异步加载模式、data-dojo-config属性，以及CDN的优缺点。适合Dojo新手，也提醒了从Dojo 1.7升级的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载请注明出处：http://blog.youkuaiyun.com/z787326

欢迎来到我的博客，在这个系列教程中，你将学会如何开始使用Dojo和一些Dojo的核心函数的使用。

让我们开始吧

今天我们讲如何在项目中引入Dojo，并且实现最基本的功能：Hello Dojo。获取Dojo最简单的方法之一就是通过CDN（内容分发网络），它让我们快速地获取到想要的资源,，但是使用这种方式你必须保证实时接入互联网，否则你的应用便无法很好的运行了。

√这种方式能让我们非常快速的开始使用Dojo，当我们进行商业项目或者大规模程序开发的时候，我们有一些其他的方式用来载入Dojo，并且性能更好，我们将在后面介绍他们。

你至少要将你编写的所有例子部署在一个本地的Web应用服务器上，比如Tomcat，以确保你可以通过本地浏览你编写的页面，这样做可以预防在运行时出现一些错误，一些不必要的错误。在这些例子中，对于Web应用服务器而言，我们只会用到它的发布功能。

√这个教程是针对刚刚接触Dojo的用户，如果你已经使用过Dojo 1.7，想要了解升级后的变化，请阅读后面的教程。

在开始编写具体功能之前，你需要先载入dojo/dojo.js这个文件，并且设置一些将会用到的配置信息。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Hello Dojo!</title>
	<link rel="stylesheet" href="demo.css">
</head>
<body>
	<h1 id="greeting">Hello</h1>
	<!-- 引入Dojo并且设置参数 -->
		<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script>
</body>
</html>

为了使页面更加友好，加入CSS。后面的例子会用到CSS类，建议新建CSS文件后引入。

* {
    outline: none !important;
}
body {
    margin: 0;
    padding: 2em;
    font-family: Lucida Sans,Lucida Grande,Arial !important;
    font-size: 13px !important;
    background: white;
    color: #333;
}
button {
	-webkit-transition: background-color 0.2s linear;
	border-radius:4px;
	-moz-border-radius: 4px 4px 4px 4px;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
	background-color: #E4F2FF;
	background-image: url("//ajax.googleapis.com/ajax/libs/dojo/1.7.3/dijit/themes/claro/form/images/button.png");
	background-position: center top;
	background-repeat: repeat-x;
	border: 1px solid #769DC0;
	padding: 2px 8px 4px;
	font-size:1em;
}
button:hover {
	background-color: #AFD9FF;
	color: #000000;
}
h1 {
	font-size:1.5em;
}
.break
{
	float:none;
	clear:both;
}

上面代码的作用是在你当前页面添加了Dojo的支持，是你继续使用Dojo其他模块的前提。

√你可能会想，上面src属性中的地址，是不是漏写了http:，其实很多同志不知道原因，当我们没有写协议也就是http:的时候，浏览器会自己帮我们加上http:或者https:，https所来带的安全大家应该就明白了。正因为如此，所以我前面提到，你编写的例子必须要运行在Web应用服务器上，否则浏览器就会自己加上file:的协议，你就无法正常获取到Dojo了。如果你不想实在不想开着Tomcat或者其他Web服务器学习，就请加上http:吧

还有就是data-dojo-config这个属性，这个属性是HTML5特有的属性，它是一个列表，包含了当dojo加载时会用到的外观及功能，就像一个没有开始和结束括号的JavaScript对象。在这种情况下，我们是给Dojo指派了一个异步模式，这是在Dojo1.7中引入的一种新模式，官方是推荐大家尽量使用这种模式来进行开发。

你可能还会感觉奇怪，为什么把<script>代码块，也就是引入Dojo的代码放在HTML页面的<body>标签中，而不是像传统的模式放在<head>标签中。针对上文提到的代码，你将<script>放在<head>中一样可以实现。但是有一种情况，就是当你的代码量比较大时，你如果将<script>放在<head>中，那么页面会一直处于加载状态，这回给用户带来较差的用户体验，感觉你的应用怎么这么慢。所以我们将<script>放在<body>的最后，先将页面内容呈现给用户。

从Dojo1.7开始，Dojo使用AMD（异步模块定义）作为JavaScript模块的标准，这不但使得页面的性能获得提升，同时使得Dojo更加的模块化，模块化所带来的好处，想必大家都明白。AMD也使得Dojo可以加载一些非Dojo模块。

相对于之前的版本，当我们使用这种异步的模式（async:true）时，程序不再需要加载所有的基础功能，仅仅加载那些必要的部分。这使得我们的Web程序更加的轻便，运行效率更高，提升整体的用户体验。

CDN的使用

CDN是很方便的，它使得你可以很容易的获取到需要的js文件，同时对于js文件而言，保证了你与我使用的是同一个版本，具有完全相同的内容，这样很多代码的示例，你可以直接复制执行。而不用担心我是否在js文件中加入我特有的一些函数等内容。但是它也存在一些问题：

js文件为了能够更快更好的在网络上进行传输，它们对js进行了压缩再压缩。当你的代码出现问题需要调试的时候，你就会发现一堆命名极其简单的变量和方法，易读性极低，给调试增添了麻烦。
你的Web应用必须接入互联网，如果是一个只在内网中运行的系统，便无法使用了。
CDN中的Dojo只包含了最最基本的模块。
有时因为用户浏览器的不同我们需要载入对应的js文件，只有一个版本的CDN明显没有办法做到这一点。

所以如果你想做大型的开发，或者避免以上的问题，你应该去下载一个完整版的Dojo，将它存在你本地的文件系统，或者部署在你的Tomcat上。文件结构：

Dojo1.8直接下载

然后你可以修改上文代码中引用js文件的部分

<body>
	<h1 id="greeting">Hello</h1>
	<!-- load dojo and provide config via data attribute -->
		<script src="dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script>
</body>