- 浏览: 215542 次
- 性别:
- 来自: 成都
最新评论
-
greatwqs:
标记一下
SpringAOP嵌套调用的解决办法 -
lengyubing:
非常感谢,刚好遇到这个问题
SpringAOP嵌套调用的解决办法 -
paladin1988:
非常感谢。。
Code Review工具Jupiter的使用 -
niuka:
不错不错,小弟学习了。
Code Review工具Jupiter的使用 -
sunwang810812:
读编程思想4,读到这里一直就读不下去,看了你的文章,豁然开朗. ...
java泛型中的上界下界(上限下限)
转载请注明出处 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。
假设你是这样的目录结构:
project
|
+--dojo-lib
| |
| +--dijit
| +--dojo
| +--dojox
| +--util
|
+--dojo_hello_world.html
开始使用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.connect
OK,window.onload搞定了,那么如何监听普通的dom事件呢?没问题,强大的dojo.connect出场
是不是和prototype的Event.observe($('btnAdd'), "load", doAdd)差不多?
用prototype时最烦的就是那个长长的bindAsListener了,使用dojo.conncect,可以在第三个参数中指定当前的scope:
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时的标签:
多了一个djConfig属性,很简单,第一个isDebug是说是否打开FireBug的Console,第二个是xmlhttp使用的编码。第二个才是重点,设置了就一劳永逸了。
这次我们要点击了hello按钮后发出一个xmlhttp请求:
看看,够不够一目了然?
url 就是url……
handleAs 把获取的内容作为text/html
load 成功时的回调函数
error 失败时的回调函数
那如果要传入参数怎么办?
注意那个content参数,你要传入的参数是个关联数组/object,dojo会自动把参数解析出来,要使用post方法?
dojo.xhrGet ---> dojo.xhrPost
其他的还有
dojo.xhrPut
dojo.xhrDelete
json
那要是我想更换获取到的数据类型,比如json?xml?
修改handleAs即可,如:
handleAs: "json"
handleAs: "json-comment-filtered" 使用注释符号/**/把json数据包含起来,推荐使用
handleAs: "json-comment-optional" 首先尝试使用json-comment-filtered,如果执行错误,再使用普通的json格式解析
handleAs: "javascript" dojo尝试把服务器返回的数据当作javascript执行,并把结果作为参数传递给load函数
handleAs: "xml" xml对象。注意在Mozilla和IE中的xml是不同的,推荐使用sarissa
至于json和object的转换等,在http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/other-miscellaneous-function/converting-json有一个表格,应该能找到你需要的。
想要直接提交一个表单,就这样:
要解决IE下那个臭名昭著的缓存问题,就这样,preventCache会帮你自动生成一个timestamp
dojo.hitch scope/context
既然用到了xmlhttp,一个常见的问题就是回调函数的scope/context。在prototype、mootools里我们常用Function.bind,在dojo中,做相同事情的东西叫做dojo.hitch
OK,基本的东西解决了,还有很多常用的函数没有介绍,比如:dojo.query,dojo.forEach,dojo.marginBox,dojo.contentBox等等
这个就没事翻翻dojo.js.uncompressed.js源代码,dojo的文档是没啥好指望的了。
面向对象,定义Class
下一步我们看看dojo里如何定义Class:
declare有三个参数:
第一个 class名字
第二个 父类的引用
第三个 ...
构造函数的名字就叫做"construnctor"
再来看看如何继承:
那么,如何调用父类的方法呢。使用this.inherited方法
关于构造函数:
父类构造函数总是被自动调用的,所以看下面的例子:
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里的关键字参数。
多继承,mixin
说到继承,多继承的问题又来了。dojo支持多继承,准确地说,是mixin。还记得dojo.declare的第二个参数吗,就是表示父类的那个参数,这个参数可以是一个数组,数组的第一个元素作为声明的类的父类,其他的作为mixin。子类自动获得父类和mixin的所有方法,后面的mixin的同名方法覆盖前面的方法
其他的比较有用的函数就是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的
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);
我想请问一下楼主,加粗的一行为什么不起作用呢?
这个问题是因为“引用”。dojo.connect是用javascript在运行时的行为,所以在实现过程中,它会把原来的函数替换掉。可以先这样来看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
可以看到,connect后的foo函数已经不是之前的foo了,你可以看作spring里用cglib 实现的AOP。
而
这句代码在
另外,有两个小错误,一个是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,有很多问题不太明白,希望可以邮件向您请教!
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);
我想请问一下楼主,加粗的一行为什么不起作用呢?
这个问题是因为“引用”。dojo.connect是用javascript在运行时的行为,所以在实现过程中,它会把原来的函数替换掉。可以先这样来看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
可以看到,connect后的foo函数已经不是之前的foo了,你可以看作spring里用cglib 实现的AOP。
而
这句代码在
另外,有两个小错误,一个是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吧
要给单元行添加事件,你可以监听onRowClick事件,比如:
具体的可以参考
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中有一些解决办法,先给大家截个图。
JSI很不错,一直没来得及看……
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事件。
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) } //... });
引用
handleAs: "json-comment-filtered" 使用注释符号/**/把json数据包含起来,推荐使用
handleAs: "json-comment-optional" 首先尝试使用json-comment-filtered,如果执行错误,再使用普通的json格式解析
handleAs: "javascript" dojo尝试把服务器返回的数据当作javascript执行,并把结果作为参数传递给load函数
handleAs: "xml" xml对象。注意在Mozilla和IE中的xml是不同的,推荐使用sarissa
至于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的
- samples-without-dojo.zip (10.1 KB)
- 描述: 不带dojo的源代码
- 下载次数: 338
- samples-with-dojo.zip (3.8 MB)
- 描述: 带有dojo的源代码
- 下载次数: 2240
评论
11 楼
careprad
2008-06-30
建议不要沉迷于他
用多了非常非常慢的
用多了非常非常慢的
10 楼
fyting
2008-04-19
fyting.yang{{在}}gmail.com,在我的个人资料里有的呵呵。
9 楼
commond
2008-04-18
fyting 写道
commond 写道
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);
我想请问一下楼主,加粗的一行为什么不起作用呢?
这个问题是因为“引用”。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,有很多问题不太明白,希望可以邮件向您请教!
8 楼
wxtm
2008-04-15
Q:149421695
我想问你点 dojo读取json缓存的问题
谢谢
我想问你点 dojo读取json缓存的问题
谢谢
7 楼
fyting
2008-04-12
commond 写道
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);
我想请问一下楼主,加粗的一行为什么不起作用呢?
这个问题是因为“引用”。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吧
6 楼
commond
2008-04-09
<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>
我想请问一下楼主,加粗的一行为什么不起作用呢?
<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>
我想请问一下楼主,加粗的一行为什么不起作用呢?
5 楼
sinapaper
2008-01-24
xhrget不错
4 楼
fyting
2008-01-10
advancegongyu 写道
楼主,请教下Dojo Grid的问题 我用的版本是1.0.2
如何添加单元行的单击事件啊?
如何隐藏一个列啊?
如何动态改变行数啊?
有没有分页器啊?
谢谢
如何添加单元行的单击事件啊?
如何隐藏一个列啊?
如何动态改变行数啊?
有没有分页器啊?
谢谢
要给单元行添加事件,你可以监听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,你就别想闲下来……这篇都是元旦时才写的……)
jindw 写道
关于调试问题,同类动态装载脚本的实现都有类似问题。
这个问题在JSI中有一些解决办法,先给大家截个图。
JSI很不错,一直没来得及看……
3 楼
jindw
2008-01-10
<p>关于调试问题,同类动态装载脚本的实现都有类似问题。</p><p>这个问题在JSI中有一些解决办法,先给大家截个图。</p><p> </p><p>这时<a href='../../../../../../topic/152188'>JSI2.1</a>在firebug上做脚本调试时的截图,我们可以轻松定位到没个源文件,可以在其中设置断点,一旦有错误,可以准确定位到准确行数。</p><p>PS:<a href='../../../../../../topic/152188'>JSI2.1 </a>以基本开发完成,将择日发布</p><p> </p><p> <img src='../../../../../../topics/download/ac3e773f-5e17-3eb5-8a2c-9ef057a4e9a0' alt=''/></p>
2 楼
advancegongyu
2008-01-10
楼主,我找不到你的联系方式,能不能加我QQ啊?79666049,谢谢
1 楼
advancegongyu
2008-01-10
楼主,请教下Dojo Grid的问题 我用的版本是1.0.2
如何添加单元行的单击事件啊?
如何隐藏一个列啊?
如何动态改变行数啊?
有没有分页器啊?
谢谢
如何添加单元行的单击事件啊?
如何隐藏一个列啊?
如何动态改变行数啊?
有没有分页器啊?
谢谢
相关推荐
dojo官方网站上Dojo Quick Start的中文版 英文版原址:http://sitepen.com/labs/guides/?guide=DojoQuickStart
dojo dojo实例 dojo例子 dojo资料 dojo项目 dojo实战 dojo模块 dojo编程
一、 Dojo学习笔记(1. 模块与包) 1 二、 Dojo学习笔记(2. djConfig解说) 4 三、 Dojo学习笔记(3. Dojo的基础对象和方法) 6 四、 Dojo学习笔记(4. dojo.string & dojo.lang) 9 五、 Dojo学习笔记(5. dojo.lang.array ...
dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档
dojo js dojo js dojo js dojo js dojo js dojo js dojo js
Dojo是一个非常强大的、面向对象的、开源的JavaScript工具箱,它为开发富客户端Ajax应用提供了一套完整的小部件和一些特效操作。曾经有人这样说:“对于一个Web开发者而言,如果没有Dojo,他将是一个“残废”的...
DOJO中文手册【出自dojo中国】 页数60+ 简单介绍: Dojo 是一个用javascript语言实现的开源DHTML工具包。它是在几个项目捐助基础上建立起来的(nWidgets, Burstlib, f(m)), 这也是为什么叫它a \"unified\" toolkit的...
dojo.js.核心jsDojo.js核心dojo的javaScript类库Dojo.js核心dojo的javaScript类库Dojo.js核心dojo的javaScript类库Dojo.js核心dojo的javaScript类库
学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源...
dojo中文文档下载。dojo中文文档下载。
dojo资料dojo资料dojo资料dojo资料dojo资料
Dojo学习笔记-- dojo.event & dojo.event.topic & dojo.event.browser Dojo学习笔记--DateTextbox Dojo学习笔记--Dojo的基础对象和方法 Dojo学习笔记--FisheyeList鱼眼效果 Dojo学习笔记--TabContainer Dojo...
Dojo学习笔记-- dojo.event & dojo.event.topic & dojo.event.browser Dojo学习笔记--DateTextbox Dojo学习笔记--Dojo的基础对象和方法 Dojo学习笔记--FisheyeList鱼眼效果 Dojo学习笔记--TabContainer Dojo...
Dojo学习笔记-- dojo.event & dojo.event.topic & dojo.event.browser Dojo学习笔记--DateTextbox Dojo学习笔记--Dojo的基础对象和方法 Dojo学习笔记--FisheyeList鱼眼效果 Dojo学习笔记--TabContainer Dojo...
dojo笔记dojo笔记dojo笔记dojo笔记dojo笔记dojo笔记dojo笔记dojo笔记dojo笔记dojo笔记dojo笔记
精通Dojo(中文版),之前自己学习的时候看的,质量挺高,百度网盘地址
dojo中文文档dojo中文文档
1.OReilly.Dojo.The.Definitive.Guide.Jun.2008.pdf 2.IntroToDojo.pdf 3.Using the Dojo .pdf 4.Mastering Dojo.pdf
dojo常用方法总结,主要是元素的获取,事件的监听,数组的遍历等
dojo 开发指南, 讲述如何用dojo技术构建web应用