- 浏览: 216911 次
- 性别:
- 来自: 成都
最新评论
-
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 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,涵盖了从DOM操作、事件处理到AJAX通信等多个方面。Dojo的核心在于它的模块化系统,这使得开发者可以按需加载代码,提高应用的性能和可维护...
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 库,它提供了一系列模块化、面向对象的工具,用于构建高性能的 Web 应用程序。在 Dojo 中,模块和包的概念是核心组成部分,它们帮助开发者组织和管理代码,使其更易于维护和重用。...
《dojo中文文档-dojo手册》提供了全面而深入的Dojo框架知识,这是一份非常有价值的资源,对于想要理解和掌握Dojo JavaScript库的开发者来说至关重要。Dojo是一个强大的JavaScript工具包,它提供了丰富的功能,包括...
Dojo是一个非常强大的、面向对象的、开源的JavaScript工具箱,它为开发富客户端Ajax应用提供了一套完整的小部件和一些特效操作。曾经有人这样说:“对于一个Web开发者而言,如果没有Dojo,他将是一个“残废”的...
### Dojo常用方法总结 Dojo是一个开源的JavaScript框架,用于构建高性能的富客户端Web应用程序。它提供了一系列功能强大的工具和API,可以帮助开发者更轻松地处理DOM操作、AJAX调用、用户界面组件构建等任务。本文...
DOJO中文手册是针对JavaScript库Dojo的详细指南,源自中国的本地化版本,旨在帮助开发者理解和使用这个强大的工具包。Dojo是一个开源的DHTML工具集,由nWidgets、Burstlib和f(m)等多个项目的合并发展而来,因此被...
学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源...
Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,涵盖了从DOM操作、事件处理到AJAX通信、动画效果等各个方面。在深入理解Dojo之前,我们需要了解JavaScript在网页开发中的核心地位以及它...
### Dojo 快速入门知识点详解 #### 一、Dojo 概览 Dojo 是一个功能强大且灵活的开源 JavaScript 库,主要用于构建高性能的富客户端 Web 应用程序。Dojo 提供了一系列工具和组件,使得开发者能够轻松创建交互式 Web...
**DOJO权威指南+DOJO1.1源码** DOJO是一个开源的JavaScript库,它提供了丰富的工具和功能,用于构建交互式Web应用程序。这个资源集合包括了《DOJO权威指南》的中文版以及DOJO 1.1的源代码,为深入理解和应用DOJO...
Dojo 是一个强大的JavaScript工具库,它为开发者提供了丰富的功能,包括对Array对象的处理。在Dojo中,数组操作是一大亮点,因为它们提供了一系列高效且易用的方法,使得处理数组变得更加便捷。 首先,`dojo....
Dojo 是一个强大的JavaScript工具库,专为构建富互联网应用程序(RIA)而设计。它提供了一个全面的开发框架,包括AJAX、DOM操作、动画效果、数据存储、模块化代码管理等多个方面,使得Web开发者能够更高效地创建交互...
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事件处理框架是JavaScript库Dojo Toolkit中的一个重要组成部分,它提供了一种统一的方式来管理和处理DOM事件以及JavaScript对象之间的交互。这个系统深受面向切面编程(AOP)思想的影响,尤其是其advice机制,...
Dojo工具包是一个广泛使用的JavaScript库,主要用于构建交互式的Web应用程序。这个压缩包包含了你在学习Dojo时可能需要用到的各种资源,旨在提供一个完整的开发环境,同时也作为一种备份手段。现在,让我们深入了解...
Dojo的DOM操作库提供了一组高效且易于使用的API,如`dojo/query`用于选择元素,`dojo/dom`用于获取和设置元素属性,`dojo/dom-geometry`用于获取元素的位置和尺寸,以及`dojo/dom-class`和`dojo/dom-style`用于处理...