dojo Quick Start/dojo入门手册开始使用dojo.js

2006年初，dojo还是0.22的时候就很关注它的发展，可一直没有在实际项目中使用。一来是由于文档的缺少，而来是dojo的相关介绍总是让人望而生畏。

到现在都如此，第一个hello world就搞了一大堆东西，比如widget组件，自定义的script标签等，加上要引入什么css文件，djConfig、dojo.require等等，让人很迷惑，这么复杂，到底dojo该怎么使用呢？

我只是想把dojo当作一个普通的js类库，就像prototype那样？OK，闲话少说，来看看如何使用dojo。

第一步，引入dojo.js

dojo的发行包里有4个子目录，要引入的文件是名叫"dojo"的子目录里的dojo.js。 假设你是这样的目录结构:

project
|
+--dojo-lib
| |
| +--dijit
| +--dojo
| +--dojox
| +--util
|
+--dojo_hello_world.html

<script type="text/javascript" src="./dojo-lib/dojo/dojo.js"></script>

开始使用dojo

现在开始使用dojo的第一个函数:dojo.byId ，dojo.byId就等同于常用的document.getElement 。

<input type="text" name="username" id="username" value="Mark" />
<script type="text/javascript">
var username = dojo.byId('username').value
alert(username);
</script>

OK，是不是和普通的js库一样，没有任何玄机？

dojo.addOnLoad

现在我们想在window.onload里面处理一点东西，就像Ext.onReady，这个东西在dojo里叫做dojo.addOnLoad。

dojo.addOnLoad(function(){
 var username = dojo.byId('username').value
 alert(username);
});

dojo.connect

OK，window.onload搞定了，那么如何监听普通的dom事件呢？没问题，强大的dojo.connect出场。

<script type="text/javascript">
function sayHello(event)
{
 alert("Hello");
}
dojo.addOnLoad(function(){
 var btn = dojo.byId('hello');
 dojo.connect(btn,"onclick",sayHello);
});
</script>
<input type="button" id="hello" value="Hello" />

是不是和prototype的Event.observe($('btnAdd'), "load", doAdd)差不多? 用prototype时最烦的就是那个长长的bindAsListener了，使用dojo.conncect，可以在第三个参数中指定当前的scope：

var name = "Mark"
function sayHello()
{
 alert("Hello " + this.name);
}
var obj = {
 name: "Karl"
}
dojo.addOnLoad(function(){
 var btn = dojo.byId('hello');
 dojo.connect(btn,"onclick",obj,sayHello);//注意这行的第三个和第四个参数
});

OK，点击按钮，将输出：Hello Karl。这里dojo.connect的第三个参数变成了scope，而handler函数是第四个，实际上dojo.connect(btn,"onclick",sayHello); 与dojo.connect(btn,"onclick",null,sayHello); 相同。

更加复杂的用法这里不作介绍，写太多就越搞越复杂了，后面再写文章详细介绍dojo.connect，这里只简单介绍如何绑定DOM事件。