dojo Quick Start

转载请注明出处 http://www.fyting.com,谢谢
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。
假设你是这样的目录结构:

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



xmlhttp dojo.xhrGet
OK，介绍了简单的DOM操作方法，接下来该到Ajax的传统项目-XmlHttp了
在使用xmlhttp时，需要注意到编码的问题，要让dojo默认绑定为utf-8怎么办呢？很简单，只需要修改一下引入dojo.js时的标签：

<script type="text/javascript" src="./dojo-lib/dojo/dojo.js" djConfig="isDebug:true,bindEncoding:'UTF-8'"></script>

多了一个djConfig属性，很简单，第一个isDebug是说是否打开FireBug的Console，第二个是xmlhttp使用的编码。第二个才是重点，设置了就一劳永逸了。

这次我们要点击了hello按钮后发出一个xmlhttp请求:

function sayHello() {
    dojo.xhrGet({
        url: "http://localhost/hello/sayHello.jsp",
        handleAs: "text",
        load: function(responseText)
        {
          alert(responseText);
          dojo.byId("divHello").innerHTML = responseText;
        },
        error: function(response)
        {
          alert("Error");
        }
    });
}
dojo.connect(btn,"onclick",sayHello);

看看，够不够一目了然？

url             就是url……
handleAs        把获取的内容作为text/html
load            成功时的回调函数
error           失败时的回调函数


那如果要传入参数怎么办?

var params = {
    username:'Mark',
    id:'105'
}
dojo.xhrGet({
    url: "http://localhost/hello/sayHello.jsp",
    content:params,
    //...
});

注意那个content参数，你要传入的参数是个关联数组/object，dojo会自动把参数解析出来，要使用post方法？
dojo.xhrGet  --->   dojo.xhrPost
其他的还有
dojo.xhrPut
dojo.xhrDelete


json
那要是我想更换获取到的数据类型，比如json？xml？
修改handleAs即可，如：
handleAs: "json"

dojo.xhrGet({
    url: "http://localhost/hello/sayHello.jsp",
    handleAs: "json",
    load: function(json)
    {
        alert(json.name)
    }
    //...
});

至于json和object的转换等，在http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/other-miscellaneous-function/converting-json有一个表格，应该能找到你需要的。


想要直接提交一个表单,就这样:

dojo.xhrGet({
    url: "http://localhost/hello/sayHello.jsp",
    form: dojo.byId("form1")
    //...
});

要解决IE下那个臭名昭著的缓存问题，就这样,preventCache会帮你自动生成一个timestamp

dojo.xhrGet({
    url: "http://localhost/hello/sayHello.jsp",
    preventCache: true
    //...
});

dojo.hitch scope/context
既然用到了xmlhttp，一个常见的问题就是回调函数的scope/context。在prototype、mootools里我们常用Function.bind，在dojo中，做相同事情的东西叫做dojo.hitch

var handler = {
    name:'Mark',
    execute1: function(){
        dojo.xhrGet({
            url: "http://localhost/hello/sayHello.jsp",
            handleAs: "text",
            error: function(text)
            {
                console.dir(this);
                alert(this.name);//输出undefined,这里的this表示当前io参数
            }
            //...
        });
    },
    load: function(text){
        alert(this.name);
    },
    execute2: function(){
        dojo.xhrGet({
            url: "http://localhost/hello/sayHello.jsp",
            handleAs: "text",
            error: dojo.hitch(this,"load") //输出Mark 
            //error: dojo.hitch(this,this.load); //与上一句相同,知道为什么要用方法名字而不是引用了吧?省去了长长的一串this.xxx
            //...
        });
    }
}

OK，基本的东西解决了，还有很多常用的函数没有介绍，比如：dojo.query，dojo.forEach，dojo.marginBox，dojo.contentBox等等
这个就没事翻翻dojo.js.uncompressed.js源代码，dojo的文档是没啥好指望的了。



面向对象,定义Class
下一步我们看看dojo里如何定义Class：

dojo.declare("Customer",null,{
    constructor:function(name){
        this.name = name;
    },
    say:function(){
        alert("Hello " + this.name);
    },
    getDiscount:function(){
        alert("Discount is 1.0");
    }
});

var customer1 = new Customer("Mark");
customer1.say();

declare有三个参数:
第一个                    class名字
第二个                    父类的引用
第三个                    ...

构造函数的名字就叫做"construnctor"


再来看看如何继承:

dojo.declare("VIP",Customer,{
    getDiscount:function(){
        alert("Discount is 0.8");
    }
});
var vip = new VIP("Mark");
vip.say();
vip.getDiscount();

那么，如何调用父类的方法呢。使用this.inherited方法

dojo.declare("VIP",Customer,{
    getDiscount:function(){
        this.inherited(arguments);
        //this.inherited("getDiscount",arguments);
    }
});

关于构造函数:
父类构造函数总是被自动调用的，所以看下面的例子:

dojo.declare("Customer",null,{
    constructor:function(name){
        this.name = name;
        alert("base class");
    },
    say:function(){
        alert(this.name);
    }
});

dojo.declare("VIP",Customer,{
    constructor:function(age){
        this.age = age;
        alert("child class");
    },
    say:function(){
        alert("name:" + this.name);
        alert("age:" + this.age);
    }
});

var vip = new VIP("123");//1
vip.say();//2

1将打印出两条alert语句，先是父类的构造函数，再是子类的。
2将输出"name: 123"  "age: 123"
个人认为，这个特性并不好，因为javascript这种弱类型的语言中，根本无法确定构造函数中的参数是传递给谁的，就比如上面的语句执行后，name="123",age="123"，那哪个才是正确的？这个问题在使用dojo Grid的model里就很麻烦，定义一个model得这样:new dojox.grid._data.Table(null,null,data);我要是想扩展这个Model，更麻烦，所有子类的构造函数都被父类给搞乱了。所以推荐的做法是使用关联数组作为构造函数的参数，就像Python里的关键字参数。

constructor:function(args){
    var args = args || {};
    this.name = args.name;
    this.age = args.age;
}

多继承,mixin
说到继承，多继承的问题又来了。dojo支持多继承，准确地说，是mixin。还记得dojo.declare的第二个参数吗，就是表示父类的那个参数，这个参数可以是一个数组，数组的第一个元素作为声明的类的父类，其他的作为mixin。子类自动获得父类和mixin的所有方法，后面的mixin的同名方法覆盖前面的方法

dojo.declare("Customer",null,{
    say:function(){
        alert("Hello Customer");
    },
    getDiscount:function(){
        alert("Discount in Customer");
    }
});

dojo.declare("MixinClass",null,{
    say:function(){
        alert("Hello mixin");
    },
    foo:function(){
        alert("foo in MixinClass");
    }
});
dojo.declare("VIP",[Customer,MixinClass],{
});
var vip = new VIP();
vip.getDiscount();
vip.foo();
vip.say();//输出"Hello MixinClass"

其他的比较有用的函数就是dojo.mixin和dojo.extend了，顾名思义，一个是作用于对象实例，一个是用于扩展class，翻文档和源码吧。



package机制
说完了dojo里的类继承机制，不得不说说package机制。
主要用到的有
dojo.require
dojo.provide
dojo.registerModulePath


dojo.require
dojo.require就是引入相应路径文件下的js文件，现在已经有很多library这样做了。现在我们假设要用
project/dojo-lib/dojo/string.js

dojo中的顶层目录就是dojo.js所在目录的上一层,即"project/dojo-lib/"，而dojo.js放在
project/dojo-lib/dojo/dojo.js
所以我们就这样:
dojo.require("dojo.string");
比如要引用其他目录下的:
project/dojo-lib/dojox/dtl/_base.js，则这样：dojo.require("dojox.dtl._base");

project/dojo-lib/dojox/grid/Grid.js         dojo.require("dojox.grid.Grid");

说白了，就和ruby之类的require很相似。

dojo.provide
要自己编写一个package怎么办，那就利用dojo.provide。比如要写在：
project/dojo-lib/com/javaeye/fyting/Package1.js
那么在对应的Package1.js中第一行需要这样写:
dojo.provide("com.javaeye.fyting.Package1");

类似java里的package声明，是吧？

dojo.registerModulePath
那要是我写的js文件不想和dojo放在一起怎么办呢，那就用registerModulePath。假设要放在：
project/js/com/javaeye/fyting/Package2.js

Package2.js和上面的Package1.js一样的写法，不需要作特殊变化，就这样就行：
dojo.provide("com.javaeye.fyting.Package2");

在使用时，需要指名这个Package2.js所在的位置，
dojo.registerModulePath("com","../../js/com");
只需要注意这里的相对路径是相对dojo.js来的。

我们假设所有以com.javaeye开头的js都放在一起，而com.microsoft的放在另外的地方，为了防止冲突，可以这样:
dojo.registerModulePath("com.javaeye","../../js/com/javaeye");
dojo.registerModulePath("com.microsoft","../../javascript/com/microsoft");

总得来说，package机制是开发大型项目必须的，但是造成了调试困难，使用dojo.require引入js出错时，根本不知道是什么原因，所以调试时最好手动引入js，dojo的test也是这么搞的。还有js框架中的各种实现类继承的手法，也造成调试困难，dojo还随地抛出个Error，又缺少java那样的error statck，根本不知道错误根源在哪儿。所以，期待js原生地支持这些^^
完整的代码文件在附件里，一个是含有dojo-1.0.2的，一个是没有dojo的

楼主，请教下Dojo Grid的问题 我用的版本是1.0.2
如何添加单元行的单击事件啊？
如何隐藏一个列啊？
如何动态改变行数啊？
有没有分页器啊？
谢谢

关于调试问题，同类动态装载脚本的实现都有类似问题。

这个问题在JSI中有一些解决办法，先给大家截个图。

 

这时JSI2.1在firebug上做脚本调试时的截图，我们可以轻松定位到没个源文件，可以在其中设置断点，一旦有错误，可以准确定位到准确行数。

PS:JSI2.1 以基本开发完成，将择日发布

 

 

要给单元行添加事件，你可以监听onRowClick事件，比如：

dojo.connect(this.grid, "onRowClick", ContextObj, "_onRowClick");
var ContextObj = {
     _onCellClick:function(event){
     	 var rowIndex = event.rowIndex;
     	 alert("当前点击的是" + rowIndex + "行");
     }
}

具体的可以参考
http://www.dojotoolkit.org/book/dojo-book-0-9/docx-documentation-under-development/grid/events
要注意的就是这里的event对象含有Grid的一些属性，文档里有说明

隐藏一个列可以改变Grid的Structure，在你去掉structure里面某一个列的配置信息后，重新
grid.setStructure(layout);
这样应该就可以实现你的隐藏一个列了，不知道这样是否清楚？

动态改变行数，有个方法的：grid.scrollToRow(55)

分页的，dojo还没有实现，在邮件列表上有人问这个，Alex Russell回答说dojo-grid有了virtual scrolling就不需要分页，我只想抽他丫的……在1.1里面不知道是否会加入分页条，在Grid的主要贡献者dylan的开发者blog上也没啥人提……
分页我倒是加了，不过感觉不爽。个人认为Grid的model部分设计得比较烂，不太好扩展，这里是一个典型的组合优先于继承的设计，所以Ext的Grid感觉易用性好些……下面有一张图，等空了我会把这部分的代码整理后贴出来(用了dojo，你就别想闲下来……这篇都是元旦时才写的……)



JSI很不错，一直没来得及看……

xhrget不错

<head>
<title>Dojo Events are Great</title>
<script src="js/dojo/dojo.js" type="text/javascript" djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript">
function foo() { console.debug("A click upon your houses!"); }
function globalGuy() { console.debug("Global Guy fired!"); }
var someObject = {
   bar: function() { console.debug("Bar fired!"); return 7; },
   baz: function() { console.debug("Baz fired!"); return 14; }
}
var anotherObject = {
    afterBaz: function () { console.debug("afterBaz fired!"); }
}
firstLinkConnections = [];
firstLinkNode = dojo.byId("firstLink");
firstLinkConnections[0] = dojo.connect(firstLinkNode, 'onclick', null, foo);
firstLinkConnections[1] = dojo.connect(firstLinkNode, 'onclick', someObject, "bar");
firstLinkConnections[2] = dojo.connect(foo, globalGuy);firstLinkConnections[3] = dojo.connect(someObject, "bar", globalGuy);



</script>
<body>
<a id="firstLink" href="http://dojotoolkit.org/">Dojo</a> is an excellent tool kit.
</body>

我想请问一下楼主，加粗的一行为什么不起作用呢？

这个问题是因为“引用”。dojo.connect是用javascript在运行时的行为，所以在实现过程中，它会把原来的函数替换掉。可以先这样来看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad: true, isDebug: true"></script> 
		<script type="text/javascript">
function foo ()
{
    console.debug("foo.");
}
function bar()
{
    console.debug("bar.");
}
var old_foo = window['foo'];
dojo.connect("foo",bar);
console.debug("old_foo==new_foo ==> " + (old_foo == foo));
		</script>
	</head>
</html>

可以看到，connect后的foo函数已经不是之前的foo了，你可以看作spring里用cglib 实现的AOP。
而

firstLinkConnections[2] = dojo.connect(foo, globalGuy);

这句代码在

irstLinkConnections[0] = dojo.connect(firstLinkNode, 'onclick', null, foo); 

之后，因此传递给onclick的foo是未被connect->globalGuy处理的，一个原生态的foo引用。除非你在此之后把foo设置到onclick里面，否则修改是不会起任何作用的。你可以把firstLinkConnections[2]放到firstLinkConnections[0]前面试试：

firstLinkConnections = []; 
firstLinkNode = dojo.byId("firstLink"); 
[color=red]firstLinkConnections[2] = dojo.connect("foo", globalGuy);[/color]
firstLinkConnections[0] = dojo.connect(firstLinkNode, 'onclick', null, foo);

另外，有两个小错误，一个是dojo.connect接受的参数形式是这样的：
dojo.connect(obj,"method_name",scope,"method")
dojo.connect(obj,"method_name",scope,method)
dojo.connect(null,"method_name",scope,"method")
dojo.connect("method_name",method)
也就是说，被connect的函数必须是字符串的形式，它所在的object要么指定，如果是window，可以写成null或者干脆不写，可以看看dojo源码的connect.js
还有就是不要直接在<script>标签里初始化，用dojo.addOnLoad吧

非常感谢楼主的回复，我才开始接触dojo，有很多问题不太明白，希望可以邮件向您请教！

fyting.yang{{在}}gmail.com，在我的个人资料里有的呵呵。

建议不要沉迷于他
用多了非常非常慢的