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事件。

本文转自左正博客园博客，原文链接：http://www.cnblogs.com/soundcode/archive/2011/07/26/2117547.html，如需转载请自行联系原作者