Sun River
Topics about Java SE, Servlet/JSP, JDBC, MultiThread, UML, Design Pattern, CSS, JavaScript, Maven, JBoss, Tomcat, ...
posts - 78,comments - 0,trackbacks - 0
Basic Dojo
 

Dojo API略解续

dojo.lang.string

dojo.string.substituteParams

类似C#中的String.Format函数
%{name}要保证与传入的对象的名称大小写一致，否则会出异常
Usage Example:
dojo.string.substituteParams("%{0} - %{1} - %{2}", "a", "b", "c"); //will return "a - b - c"
dojo.string.substituteParams("%{name}: %{value}", {name:"名称",value:"值"}); //will return "名称: 值"

dojo.string.capitalize

把每一个单词的首字母大写
Usage Example:
dojo.string.capitalize("show me love"); //will return "Show Me Love"

dojo.string.isBlank

判断输入字符串是否为空或全是空白字符，如果传入对象为非字符串则也会返回true
Usage Example:
dojo.string.isBlank(" 1 "); //will return false

dojo.string.escape

参数1为type，可传值为: xml/html/xhtml, sql, regexp/regex, javas cript/js cript/js, ascii
将按照所传type对字符串进行编码
Usage Example:
dojo.string.escape("html", "<input type='text' value='' />"); //will return "<input
type='text' value='' />"
dojo.string.encodeAscii
dojo.string.escapeXml
dojo.string.escapeSql
dojo.string.escapeRegExp
dojo.string.escapeJavas cript
dojo.string.escapeString
这些函数也就是 dojo.string.escape 所调用的，这里无需多说

dojo.string.summary

取得输入字符串的缩略版本
Usage Example:
dojo.string.summary("1234567890", 5); //will return "12345..."

dojo.string.endsWith

判断输入字符串是否以指定的字符串结尾
Usage Example:
dojo.string.endsWith("abcde", "E"); //will return false
dojo.string.endsWith("abcde", "E", true); //will return true

dojo.string.endsWithAny

判断输入字符串是否以指定的任意字符串结尾
Usage Example:
dojo.string.endsWithAny("abcde", "E", "e"); //will return true

dojo.string.startsWith

判断输入字符串是否以指定的字符串开头
Usage Example:
dojo.string.startsWith("abcde", "A"); //will return false
dojo.string.startsWith("abcde", "A", true); //will return true

dojo.string.startsWithAny

判断输入字符串是否以指定的任意字符串开头
Usage Example:
dojo.string.startsWithAny("abcde", "A", "a"); //will return true

dojo.string.has

判断输入字符串是否含有任意指定的字符串
Usage Example:
dojo.string.has("abcde", "1", "23", "abc"); //will return true

dojo.string.normalizeNewlines

按要求转换回车换行的格式
Usage Example:
dojo.string.normalizeNewlines("a"r"nb"r"n", ""r"); //will return "a"rb"r"

dojo.string.splitEscaped

将字符串按分隔符转换为数组
Usage Example:
dojo.string.splitEscaped("a""_b_c", '_'); //will return ["a""_b", "c"]


模块：dojo.lang.func

dojo.lang.hitch

将指定的方法挂在指定的对象下并返回该方法
Usage Example:
func = {test: function(s) {alert(s)}};
dojo.lang.mixin(func, {demo: dojo.lang.hitch(func, "test")});
func.demo("demo and test are same method");

dojo.lang.forward

返回自身对象的指定名称的方法引用
Usage Example:
func = {test: function(s) {alert(s)}, demo: dojo.lang.forward("test")};
func.demo("demo and test are same method");

dojo.lang.curry

What is curry? 请参阅这篇文章：http://www.svendtofte.com/code/curried_javas cript/
Usage Example:
function add(a, b)
{
return a + b;
}
dojo.lang.curry(null, add, 2, 3); //will return 5
dojo.lang.curry(null, add, 2)(3); //will return 5

dojo.lang.curry(null, add)(2)(3); //will return 5
dojo.lang.curry(null, add)()(2)(3); //will return 5

dojo.lang.curryArguments

与dojo.lang.curry类似，但是可以选择忽略掉前n个参数
Usage Example:
function add(a, b)
{
return a + b;
}
dojo.lang.curryArguments(null, add, [1,2,3,4,5], 2); //will return 7 (= 3 + 4)

处理数组相关api

dojo.lang.has

判断对象是否具有指定属性，不过这个方法有用吗，不如直接使用 if(name in obj)
Usage Example:
dojo.lang.has(dojo.lang, "has"); //will return true

dojo.lang.isEmpty

判断对象或数组是否为空
Usage Example:
dojo.lang.isEmpty({a: 1}); //will return false
dojo.lang.isEmpty([]); //will return true

dojo.lang.map

调用指定的方法处理指定的数组或字符串
Usage Example:
dojo.lang.map([1,2,3,4,5], function(x) { return x * x;}); //will return [1,4,9,16,25]

dojo.lang.forEach

遍历指定的数组或字符串，并对其中的元素调用指定的方法
Usage Example:
dojo.lang.forEach("abc", function(x) { alert(x); });

dojo.lang.every

检查指定的数组是否全部满足指定方法的条件
Usage Example:
dojo.lang.every([1,-2,3], function(x) { return x > 0; }); //指定的数组不是全大于0的，因此返回false

dojo.lang.some

检查指定的数组是否部分满足指定方法的条件
Usage Example:
dojo.lang.some([1,-2,3], function(x) { return x > 0; }); //指定的数组有大于0的元素，因此返回true

dojo.lang.filter

根据指定的方法来过滤指定的数组
Usage Example:
dojo.lang.filter([1,-2,3], function(x) { return x > 0; }); //will return [1, 3]

dojo.lang.unnest

把指定的参数或数组转换为一维数组
Usage Example:
dojo.lang.unnest(1, 2, 3); //will return [1, 2, 3]
dojo.lang.unnest(1, [2, [3], [[[4]]]]); //will return [1, 2, 3, 4]

dojo.lang.toArray

将输入转换为数组
Usage Example:
function test()
{
return dojo.lang.toArray(arguments, 1);
}
test(1,2,3,4,5); //will return [2,3,4,5]

Dojo入门教程之dojo.io.bind详解

dojo.io.bind ：处理请求取回需要的数据并处理。
        这个函数是AJAX中最为重要和有用的函数，dojo.io.bind这个类是用来处理客户端与服务器间通讯的，需要通讯的参数由对象dojo.io.Request所定义，具体通讯的方法则由另外一个对象Transport所提供。Dojo里提供了一个同时兼容IE和Firefox的dojo.io.XMLHTTPTransport，但是这个对象位于dojo.io.BrowserIO，因此，一般require dojo.io.IO时，还应该require dojo.io.BrowserIO
Usage Example: 

dojo.io.bind({ 
    url: "http://localhost/test.html", //要请求的页面地址 
    mimetype: "text/html", //请求的页面的类型，应该设置为与你请求页面类型对应的mimetype，默认为 "text/plain" 
    method："GET", //默认为"GET" 
    sync: false, //默认为异步执行 
    useCache: false, //默认为不使用页面缓存，注意这里的缓存并不是浏览器的缓存，而是Dojo自身所维护的页面缓存 
    preventCache: false, //默认为启用浏览器缓存，否则将通过自动增加不同的参数来确保浏览器缓存失效 
    timeoutSeconds: 3000,  //3秒后超时，如果为0则永不超时 
    load: function(type, data, evt) { alert(data); }, //type should be "load", data is that we wante 
    error: function(type, error) { alert(error.message); }, //error is dojo.io.Error 
    timeout: function(type) { alert("请求超时！"); } 
  }); 


  你也可以用一个handle来处理所有的事件 

dojo.io.bind({ 
    url: "http://localhost/test.html", //要请求的页面地址 
    mimetype: "text/html", //请求的页面的类型，应该设置为与你请求页面类型对应的mimetype 
    timeoutSeconds: 3000,  //3秒后超时，如果为0则永不超时 
    handle: function(type, data, evt){ 
      if(type == "load") { alert(data); } //data is that we wanted 
      else if (type == "error") { alert(data.message); } //data is the error object 
      else { ; } //other events maybe need handled 
    } 
  });  

  
  如果没有在Request中指定所用的transport，则Dojo会自动的在已注册的transports中寻找能够处理这个Request的transport，如果不能找到，则返回指定的Request。下面是一个指定了transport的例子: 
  

dojo.io.bind({ 
    url: "http://localhost/test.html", //要请求的页面地址 
    mimetype: "text/html", //请求的页面的类型，应该设置为与你请求页面类型对应的mimetype 
    timeoutSeconds: 3000,  //3秒后超时，如果为0则永不超时 
    transport: "XMLHTTPTransport", 
    load: function(type, data, evt) { alert(data); }, //type should be "load", data is that we wante 
    error: function(type, error) { alert(error.message); }, //error is dojo.io.Error 
    timeout: function(type) { alert("请求超时！"); } 
 }); 


你还可以利用bind来得到一个Javas cript所定义的对象（注意mimetype必须要定义为"text/javasript"） 

testObj = dojo.io.bind({ 
    url: "http://localhost/test.js", //test.js里定义了一个对象 
    mimetype: "text/javas cript", //请求的页面的类型，应该设置为与你请求页面类型对应的mimetype 
    timeoutSeconds: 3000,  //3秒后超时，如果为0则永不超时 handle: function(type, data, evt){ 
     if(type == "load") { alert(data); } //data is a object or value 
      else if (type == "error") { alert(data.message); } //data is the error object 
      else { ; } //other events maybe need handled 
    } 
  });   

 
  下面是一个Post的例子:    

dojo.io.bind({ 
    url: "http://localhost/test.aspx", //要提交的页面地址 
    mimetype: "text/html", //请求的页面的类型，应该设置为与你请求页面类型对应的mimetype 
    timeoutSeconds: 3000,  //3秒后超时，如果为0则永不超时 
    method: "POST", 
    formNode: dojo.byId("myForm"), //指定提交的Form名称 
   load: function(type, data, evt) { alert(data); }, //type should be "load", data is that we wanted 
    error: function(type, error) { alert(error.message); }, //error is dojo.io.Error 
    timeout: function(type) { alert("请求超时！"); } 
 }); 
  另一个Post的例子(without Form to post): 

dojo.io.bind({ 
    url: "http://localhost/test.aspx", //要提交的页面地址 
    mimetype: "text/html", //请求的页面的类型，应该设置为与你请求页面类型对应的mimetype 
    timeoutSeconds: 3000,  //3秒后超时，如果为0则永不超时 
    method: "POST", 
    content: {a: 1, b: 2}, //要提交的数据 
   load: function(type, data, evt) { alert(data); }, //type should be "load", data is that we wanted 
    error: function(type, error) { alert(error.message); }, //error is dojo.io.Error 
    timeout: function(type) { alert("请求超时！"); } 
 }); 


  dojo.io.queueBind
  有时，我们需要一次发出多个网页请求，则应该使用dojo.io.queueBind，因为浏览器可能只允许同时发出有限个数的请求，如果是使用dojo.io.bind的话，则有可能会申请不到新的XMLHttp对象而导致出错。
  用法与dojo.io.bind是一样的。
dojo.io.argsFromMap
  用来把对象转换为URL的参数形式   
Usage Example:
  dojo.io.argsFromMap({a:1,b:2,c:3}); //will return "c=3&b=2&a=1"
  dojo.io.argsFromMap({name:"名称",value:"值"},"utf"); //will return "value=?€?&name=????§°", 有中文的话应该指定utf格式，否则dojo.string.encodeAscii返回的编码是很怪异的
  dojo.io.argsFromMap({a:1,b:2,c:3}, "utf", "c"); //will return "b=2&a=1&c=3"，最后一个参数可以控制指定名称的值出现在最后
dojo.io.setIFrameSrc
  设置IFrame的Src   
Usage Example:
  dojo.io.setIFrameSrc(dojo.byId("myFrame"), "http://localhost/test.htm"); //myFrame打开指定的网页
  dojo.io.setIFrameSrc(dojo.byId("myFrame"), "http://localhost/test.htm", true); //myFrame打开指定的网页，并覆盖浏览器的历史记录
模块：dojo.io.BrowserIO
基本上就提供了dojo.io.XMLHTTPTransport这个对象
XMLHTTPTransport一般能够满足我们的需求，但是其有几个限制：它不能传输文件，不能够成功执行跨域名的远程请求，并且不支持 file:// 这样的协议
因此，根据应用要求，我们可能会需要选用其它的transport: dojo.io.IframeTransport, dojo.io.repubsubTranport, dojo.io.s criptSrcTransport, ShortBusTransport
dojo.io.IframeTransport，用法与xmlhttp是一样的，其优点就是可以跨域，不存在任何的安全问题
如果Request指定的mimetype是text或javas cript，返回的内容应该是放在第一个textarea里的内容，如果指定的mimetype是html，则IFrame里的html则是需要的内容。因为浏览器兼容的原因，IframeTransport不能正确处理返回类型为XML的请求。 
关于Rpc，这个类似于Remoting的东西，也将在以后对其进行介绍。

开始使用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

Java代码

  1. dojo.addOnLoad(function(){   
  2.     var username = dojo.byId('username').value   
  3.     alert(username);   
  4. });  

dojo.connect
OK，window.onload搞定了，那么如何监听普通的dom事件呢？没问题，强大的dojo.connect出场

Java代码

  1. <script type="text/javascript">   
  2. function sayHello(event)   
  3. {   
  4.     alert("Hello");   
  5. }   
  6. dojo.addOnLoad(function(){   
  7.     var btn = dojo.byId('hello');   
  8.     dojo.connect(btn,"onclick",sayHello);   
  9. });   
  10. </script>   
  11. <input type="button" id="hello" value="Hello" /> 
alert("Hello");
var btn = dojo.byId('hello');
dojo.connect(btn,"onclick",sayHello);

是不是和prototype的Event.observe($('btnAdd'), "load", doAdd)差不多?
用prototype时最烦的就是那个长长的bindAsListener了，使用dojo.conncect，可以在第三个参数中指定当前的scope：

Java代码

  1. var name = "Mark"  
  2. function sayHello()   
  3. {   
  4.     alert("Hello " + this.name);   
  5. }   
  6. var obj = {   
  7.     name: "Karl"  
  8. }   
  9. dojo.addOnLoad(function(){   
  10.     var btn = dojo.byId('hello');   
  11.     dojo.connect(btn,"onclick",obj,sayHello);//注意这行的第三个和第四个参数  
  12. });  
alert("Hello " + this.name);
name: "Karl"
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时的标签：

Java代码

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


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

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

Java代码

  1. function sayHello() {   
  2.     dojo.xhrGet({   
  3.         url: "http://localhost/hello/sayHello.jsp",   
  4.         handleAs: "text",   
  5.         load: function(responseText)   
  6.         {   
  7.           alert(responseText);   
  8.           dojo.byId("divHello").innerHTML = responseText;   
  9.         },   
  10.         error: function(response)   
  11.         {   
  12.           alert("Error");   
  13.         }   
  14.     });   
  15. }   
  16. dojo.connect(btn,"onclick",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");
}
});


看看，够不够一目了然？

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

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

Java代码

  1. var params = {   
  2.     username:'Mark',   
  3.     id:'105'  
  4. }   
  5. dojo.xhrGet({   
  6.     url: "http://localhost/hello/sayHello.jsp",   
  7.     content:params,   
  8.     //...   
  9. });  
username:'Mark',
id:'105'
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"

Java代码

  1. dojo.xhrGet({   
  2.     url: "http://localhost/hello/sayHello.jsp",   
  3.     handleAs: "json",   
  4.     load: function(json)   
  5.     {   
  6.         alert(json.name)   
  7.     }   
  8.     //...   
  9. });  
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有一个表格，应该能找到你需要的。

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

Java代码

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

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

Java代码

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

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

Java代码

  1. var handler = {   
  2.     name:'Mark',   
  3.     execute1: function(){   
  4.         dojo.xhrGet({   
  5.             url: "http://localhost/hello/sayHello.jsp",   
  6.             handleAs: "text",   
  7.             error: function(text)   
  8.             {   
  9.                 console.dir(this);   
  10.                 alert(this.name);//输出undefined,这里的this表示当前io参数  
  11.             }   
  12.             //...   
  13.         });   
  14.     },   
  15.     load: function(text){   
  16.         alert(this.name);   
  17.     },   
  18.     execute2: function(){   
  19.         dojo.xhrGet({   
  20.             url: "http://localhost/hello/sayHello.jsp",   
  21.             handleAs: "text",   
  22.             error: dojo.hitch(this,"load") //输出Mark    
  23.             //error: dojo.hitch(this,this.load); //与上一句相同,知道为什么要用方法名字而不是引用了吧?省去了长长的一串this.xxx   
  24.             //...   
  25.         });   
  26.     }   
  27. }  
name:'Mark',
execute1: function(){
dojo.xhrGet({
url: "http://localhost/hello/sayHello.jsp",
handleAs: "text",
error: function(text)
{
console.dir(this);
alert(this.name);//
}
//...
});
},
load: function(text){
alert(this.name);
},
execute2: function(){
dojo.xhrGet({
url: "http://localhost/hello/sayHello.jsp",
handleAs: "text",
error: dojo.hitch(this,"load") //
//error: dojo.hitch(this,this.load); //
//...
});
}

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

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

Java代码

  1. dojo.declare("Customer",null,{   
  2.     constructor:function(name){   
  3.         this.name = name;   
  4.     },   
  5.     say:function(){   
  6.         alert("Hello " + this.name);   
  7.     },   
  8.     getDiscount:function(){   
  9.         alert("Discount is 1.0");   
  10.     }   
  11. });   
  12.   
  13. var customer1 = new Customer("Mark");   
  14. customer1.say();  
constructor:function(name){
this.name = name;
},
say:function(){
alert("Hello " + this.name);
},
getDiscount:function(){
alert("Discount is 1.0");
}

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

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

再来看看如何继承:

Java代码

  1. dojo.declare("VIP",Customer,{   
  2.     getDiscount:function(){   
  3.         alert("Discount is 0.8");   
  4.     }   
  5. });   
  6. var vip = new VIP("Mark");   
  7. vip.say();   
  8. vip.getDiscount();  
getDiscount:function(){
alert("Discount is 0.8");
}

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

Java代码

  1. dojo.declare("VIP",Customer,{   
  2.     getDiscount:function(){   
  3.         this.inherited(arguments);   
  4.         //this.inherited("getDiscount",arguments);   
  5.     }   
  6. });  
getDiscount:function(){
this.inherited(arguments);
//this.inherited("getDiscount",arguments);
}

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

Java代码

  1. dojo.declare("Customer",null,{   
  2.     constructor:function(name){   
  3.         this.name = name;   
  4.         alert("base class");   
  5.     },   
  6.     say:function(){   
  7.         alert(this.name);   
  8.     }   
  9. });   
  10.   
  11. dojo.declare("VIP",Customer,{   
  12.     constructor:function(age){   
  13.         this.age = age;   
  14.         alert("child class");   
  15.     },   
  16.     say:function(){   
  17.         alert("name:" + this.name);   
  18.         alert("age:" + this.age);   
  19.     }   
  20. });   
  21.   
  22. var vip = new VIP("123");//1   
  23. vip.say();//2  
constructor:function(name){
this.name = name;
alert("base class");
},
say:function(){
alert(this.name);
}
constructor:function(age){
this.age = age;
alert("child class");
},
say:function(){
alert("name:" + this.name);
alert("age:" + this.age);
}


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里的关键字参数。

Java代码

  1. constructor:function(args){   
  2.     var args = args || {};   
  3.     this.name = args.name;   
  4.     this.age = args.age;   
  5. }  
var args = args || {};
this.name = args.name;
this.age = args.age;

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

Java代码

  1. dojo.declare("Customer",null,{   
  2.     say:function(){   
  3.         alert("Hello Customer");   
  4.     },   
  5.     getDiscount:function(){   
  6.         alert("Discount in Customer");   
  7.     }   
  8. });   
  9.   
  10. dojo.declare("MixinClass",null,{   
  11.     say:function(){   
  12.         alert("Hello mixin");   
  13.     },   
  14.     foo:function(){   
  15.         alert("foo in MixinClass");   
  16.     }   
  17. });   
  18. dojo.declare("VIP",[Customer,MixinClass],{   
  19. });   
  20. var vip = new VIP();   
  21. vip.getDiscount();   
  22. vip.foo();   
  23. vip.say();//输出"Hello MixinClass"  
say:function(){
alert("Hello Customer");
},
getDiscount:function(){
alert("Discount in Customer");
}
say:function(){
alert("Hello mixin");
},
foo:function(){
alert("foo in 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的.

Widgets

什么是widget呢？一个按钮，一个图片，这都是widget，最常见的html widget有链接，按钮，输入框。

使用Dojo可以改变widget ，例如在日期输入框旁边加上一个彩色日历，让用户可以选择日期，与此同时Dojo并不会破坏你原始的输入框，因为Dojo是扩展了你的html而不是替换了它。

使用widget的优势主要三点：

·             跨平台：使用Dojo widget，无论使用任何浏览器，都会准确的得到正确效果。

·             自动退化：一些老浏览器可能对javascript支持并不是那么完美，Dojo也可以让它们显示出正确的内容，例如前面彩色日历的例子，如果浏览器不支持，那么Dojo会自动将日历退化到一个简单的选择框，或者其他（根据不同widget而定）。

·             扩展性：你可以利用Dojo提供的widget创造出新的widget，在这个过程中你并不需要从库中复制任何代码或者修改库中的代码。

如何使用Widget

Widget有很多使用方法。Widget会搜索整个网页框架，然后自动把应该添加的内容加入到当中。

下面是个简单的例子，我们也可以看出WIdget是怎样自动退化的，因为我们并没有给ComboBox定义选择项，而只是一个value，而且所以最后显示出来的只象是一个简单的inputbox，如果用户禁用了javascript，显示结果也会一样。

<input dojoType="ComboBox" value="default" dataUrl="comboBoxData.js">

但是如果我们只想使用W3C标准（译者注：没有那些额外的tag，例如dojoType），我们可以用下面的方法。

<input class="dojo-ComboBox?" value="default" dataUrl="comboBoxData.js">

<dojo:ComboBox? value="default" dataUrl="comboBoxData.js">

你可能注意到了dataUrl，他的作用是把comboBoxData.js中的内容加到comboBox中，但是现在comboBoxData.js中没用任何内容。（译者注：当然你可以随意改变dataUrl的内容，名字不是固定的。）

下面是一个select的例子：

<select dojoType="combobox">
<option value="foo">foo</option>
<option value="bar">bar</option>
<option value="baz">baz</option>
<option value="thud">thud</option>
</select>

从上面的例子中，你知道了很多事情，但却好像没什么用处，这里只是想告诉你其实dojo并没有那么复杂。

后退和前进

动态网页程序（dynamic web application）避免了频繁的刷新页面，不过通常也带来后退和前进按钮会失去作用。更多的，有的时候，用户可能很难把网页加入收藏夹。

Dojo提供了一个解决办法，让网页程序处理浏览器的后退和前进，并且提供给浏览器一个唯一的地址。这个解决办法就是使用dojo.undo.browser。

使用dojo.undo.browser

在dojo 0.2.2版本中，并没有dojo.undo.browser，这是在0.3以后的版本中才加入的。

首先，需要使用dojo.undo.browser.setInitialStae(state)设定当浏览器第一次载入网页的状态。

理论

动态网页程序会调用XMLHTTPRequest和DOM来更新网页内容而避免了刷新，更新浏览历史，并且也不会改变浏览器的地址栏。这就意味着当用户点击了后退按钮，整个网页程序丢失了当前运行的状态（state）。而且即使用户想把当前的网页内容加入收藏夹，也是不可能的，因为收藏夹不会记录网页程序运行的状态，而只会简单的记录下网页程序的地址（URL）。

开发者可以使用dojo.undo.browser包得到用户点击后退和前进的事件（event），然后根据这些事件来更新页面内容。 dojo.undo.browser通过使用一个隐藏的表单（hidden IFRAME）或者一个唯一的标签（fragment identifier）传递浏览的历史记录。（译者注：可以想像成一个cookie或者一个session，但是这个session信息是存储在hidden IFRAME或者标签中）例如：

http://some.domain.com/my/path/to/page.html#fragmentIdentifier

（译者注：#fragmentIdentifier就是标签记录）

因为当改变标签的时候并不会使网页刷新，所以非常适合记录当前网页程序的状态。当然开发者可以自定义一个更容易读懂的标签，并且使用户可以把它加入收藏夹。

dojo.undo.browser允许开发者创建一个相对于运行状态的对象（state object），这个对象会得到回叫（callback）当用户点击后退或者前进按钮。

开发

下面是使用dojo.undo.browser之前必须作的一些事情：

1：在djConfig中设置preventBackButtonFix: false。这样保证了隐藏的表单（hidden IFRAME）将会添加到页面当中，如果不加入这段，dojo.undo.browser不会正常工作。

译者注：设置方法就是在header中加入如下代码：

<script language="JavaScript" type="text/javascript">
djConfig = { isDebug: true, preventBackButtonFix: false };
</script>

2: 加入dojo.require("dojo.undo.browser");

设定网页程序的初始状态：

dojo.undo.browser.setInitialState(state);

当用户每次点击前进或者后退，state对象都会被调用。

然后我们需要给state对象创建几个方法（function）

·                 得到后退提示：back（），backButtion（）或者handle（type），type可以是“back”或者是“forward”。

·                 得到前进提示：forward（），forwardButton（）或者handle(type），type如上。

下面是个简单的例子：

var state = {
back: function() { alert("Back was clicked!"); },
forward: function() { alert("Forward was clicked!"); }
};

注册一个state对象使用下面的方法：

dojo.undo.browser.addToHistory(state);

如果向改变浏览器的地址（URL），引用state对象的changeUrl属性。如果changeUrl是true，dojo.undo.browser 就将产生一个唯一的标签，如果changeUrl被定义为任何其他的值（不包括undefined，null
posted on 2008-02-19 11:30 Sun River 阅读(1173) 评论(0)  编辑  收藏
Copyright ©2025 Sun River Powered By博客园 模板提供：沪江博客