Hello Dojo

原文：http://dojotoolkit.org/documentation/tutorials/1.6/hello_dojo/

欢迎使用Dojo!在本教程中，我们将从最基础的部分——一个简单的HTML页面开始。当本教程结束的时候，我们就已将Dojo加载到页面中，并且开始使用一些核心函数了。为了给您提供更为丰富的学习体验，我们还将简单介绍Dojo的模块化架构，并讨论如何载入依赖模块。

难度：初学者

Dojo版本：1.6

让我们开始吧～

我们的起点是一个如下所示的简单HTML页面。我们希望在这个页面里添加一些代码来证明Dojo已经成功加载。

 
   view plain 
  
 <!DOCTYPEhtml>
 <html>
 <head>
 <Metacharset="utf-8">
 <title>Tutorial:HelloDojo!</title>
 <!--loadDojo-->
 <scriptsrc="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script>
 </head>
 <body>
 <h1id="greeting">Hello</h1>
 </body>
 </html>

这很简洁，不是么？我们在<head>里放了一个加载Dojo的<script>标签（当然它也可以放在<body>的最后），其中的src属性包含了dojo.js文件所在的URL。

本教程中我们通过GoogleCDN加载Dojo。如果你已经下载了一个Dojo的发布版，你就可以把这里的URL改为dojo.js文件在你自己服务器上的位置。如果URL是正确的，那么Dojo现在已经在后台安静地加载好了。接下来我们需要找个地方放一些代码，在一切都准备好的时候运行，这样我们就能做些更有趣的事情了。

dojo.ready

由于牵涉到HTML页面和浏览器，要确定“万事俱备”的时机可不容易。在我们自己的JavaScript代码开始运行之前，首先DOM树需要准备好以供操作，而且Dojo库（以及声明的任何依赖模块）也需要全部加载完毕。因为“万事俱备”这个概念在不同的浏览器里是不同的，所以Dojo干脆为此提供了一个非常可靠的、跨浏览器的函数——dojo.ready。我们给它传一个函数作为参数，这个函数就会在“万事俱备”的时候执行。

<script> dojo.ready(function(){
 alert("Dojoversion"+dojo.version+"isloaded");
 });
 </script>
 </head>
 <body>
 <h1id="greeting">Hello</h1>
 </body>
 </html>

我们传给dojo.ready的这个函数应该会在页面加载好以后弹出一个alert对话框。必须承认，Dojo的version属性（包含版本信息）对于此类示例程序非常有用。当我们以后更为深入地学习Dojo时，这样的alert对话框就会变得越来越讨厌了。于是我们就会想要学习往浏览器控制台打印日志的方法。不过目前我们暂时略过。

能加载Dojo的确不错，但您一定更希望操作这个刚刚载入了Dojo的页面。我们将会在其他教程中深入讲解这方面的内容。而现在，我们只是简单地获取我们的<h1>元素的引用然后更新其内容。

dojo.byId("greeting").innerHTML+=",from"+dojo.version; </html>

这次，在我们的“万事俱备”函数里使用了dojo.byId来获取DOM树中含有给定ID的元素，然后给它的innerHTML属性添加Dojo的版本信息字符串。

需要特别注意的是，您可以对dojo.ready做任意次调用。您每一次传入的这些函数会按照传入顺序依次执行。实际上，如果您有比较多的代码，常见的做法是定义一个具名函数（非匿名函数）然后把函数名传给dojo.ready：

view plain 
  

让我们开始吧～

dojo.ready

模块

试试一个酷模块

结语

猜你在找的Dojo相关文章