中国第一Ajax站长门户:www.okajax.com   虚拟主机 域名注册 云主机

dojo Quick Start/dojo入门手册 - okajax.com - Ajax中国

我要投稿 会员登陆 RSS订阅 本站推荐:
您的位置主页 > Ajax技术 > Ajax框架学习 > dojo > dojo Quick Start/dojo入门手册

dojo Quick Start/dojo入门手册

2008-07-28    文章来源:互联网    浏览次数:

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

  • 第1页:开始使用dojo.js
  • 第2页:Ajax 对象 xmlhttp
  • 第3页:获取json、xml的数据类型
  • 第4页:类似于Function.bind的dojo.hitch
  • 第5页:dojo里如何定义和继承Class
  • 第6页:dojo的package机制
  • 上一篇:Dojo 之 面向对象
  • 下一篇:Dojo实用API大全
  • 文章评论(查看全部)

    看不清楚?单击换一张。
    loading.. 评论加载中....
    关于我们 - 广告服务 - 版权隐私 - 免责声明 - RSS地图 - 网站地图 - 使用帮助 - 返回顶部