dojo的根本方法介绍 _Web前端

dojo的基本方法介绍
一 dojo.moduleUrl(module,url)
在模块开发中，可能要引用外部的资源文件，如图片，css文件等。通过dojo.moduleUrl(module,url)可以把模块内一个相对于模块的路径转换为实际访问路径，参数module表示模块名称，url是相对于模块的路径，返回一个dojo._url对象，如dojo.moduleUrl("example","image/log.jpg")表示的路径是js/example/image/log.jpg.

二混入（mixin）和dojo.extend

在有些时候，需要用一个 JavaScript 对象来扩展另外一个 JavaScript 对象的功能，即把一个 JavaScript 对象混入到另外一个对象中。dojo.mixin()方法提供了这样的能力。该方法接受多个 JavaScript 对象作为参数，并按照参数从右到左的顺序依次混入。第一个参数表示的对象将包含其它参数对象中的全部属性。对于名称相同的属性，右边参数对象的值将覆盖左边参数对象中对应的值。dojo.mixin()的一个常见用法是处理选项的默认值。应用一般来说会为选项提供默认值，用户则会提供自定义的值。实际使用的值应该是用户提供的值覆盖默认值之后的结果。代码清单 11中给出了 dojo.mixin()的一个示例。

清单 11. dojo.mixin() 示例

 var defaultOptions = { 
    lang : "zh_CN", 
    maxLength : 100 
 }; 
 function getOptions(userOptions) { 
    return dojo.mixin({}, defaultOptions, userOptions); 
 } 
 getOptions({ 
    lang : "en"
 });

在代码清单 11中，dojo.mixin()的第一个参数是个新创建的空 JavaScript 对象。这样的好处是返回的结果是一个新创建的对象，不会对已有对象造成无意的修改。

其它方法

除了 dojo.declare()和 dojo.mixin()之外，Dojo 基本库还提供其它几个方法，具体的介绍如下。

dojo.extend(constructor, props)：该方法把 props中所有的属性和方法都添加到 constructor的原型（prototype）中。这些属性和方法对 constructor的所有实例都是可见的。
dojo.delegate(obj, props)：该方法会返回一个新的对象。该对象包含 props中的属性和方法。当在该对象中找不到某个属性的时候，会继续在 obj对象中进行查找。
dojo.getObject(name, create, context)：该方法用来从 context对象中获取名为 name的属性。name属性支持类似 com.example.abc这样的“.”分隔的形式。如果指定参数 create的值为 true，当属性 name不存在的时候，会创建该属性并设置其值为空对象。不指定 context对象时默认为全局对象 dojo.global。
dojo.setObject(name, value, context)：在对象 context中创建名称为 name，值为 value的属性。属性 name同样支持“.”分隔的形式。不指定 context对象时默认为全局对象 dojo.global。
dojo.exists(name, obj)：判断对象 obj中是否包含属性 name。属性 name同样支持“.”分隔的形式。不指定 obj对象时默认为全局对象 dojo.global。

三 dojo.connect
使用dojo.connect()添加事件处理器是很方便的，不用再考虑跨浏览器的问题了。但要想正确地使用这个方法，仍然要注意几个问题：
        1、用dojo.byId()获取的是dom元素，而用dijit.byId()获取的是dojo widget，这两点是有根本不同的。
        2、事件名称的大小写很关键，如果对dom元素添加事件处理器，事件名称要小写，例如click事件，可以用click或者onclick都行，但一定要把c字母小写；如果对dojo widget添加事件处理器，事件名称必须符合dojo的规范，例如click事件，一定要写成onClick，字母o是小写，而字母c一定要大写。
        3、如果要对某个页面元素添加事件处理器，一定要根据这个元素是dom元素还是dojo widget，分别使用dojo.byId()或dijit.byId()来获取元素引用。如果乱用，那么结果可能会添加失败或出现不正常的情况。
        注意以上这几个问题，正确使用好dojo.connect()方法是没有问题的。

例一：
<button id=”btn”>Click Me!</button>
<script type=”text/javascript”>
        dojo.connect(dojo.byId(‘btn’), ‘onclick’, null, handler);
</script>
        例二：
<button id=”btn” dojoType=”dijit.form.Button” label=”Click Me!”></button>
<script type=”text/javascript”>
        dojo.connect(dijit.byId(‘btn’), ‘onClick’, null, handler);
</script>

四认识dojo的界面控件dijit
下拉框：dijit.form.FilteringSelect

http://dojotoolkit.iteye.com/blog/764797
dijit.form.ComboBox

http://www.ibm.com/developerworks/cn/web/wa-lo-dojointro5/

五页面部分区域遮挡,DialogUnderlay
记得dijit.Dialog吧,当打开一个Dialog的时候会将页面全部遮挡住，用户不能操作。前一段时间有个网友跟我提起部分遮挡怎么实现的问题。当时没有时间写，现在写写吧。

其实使用的也是Dialog里面的内容。这个类叫dijit.DialogUnderlay()

下面发一个例子吧：

<html>
<head>
<title>Button Widget Dojo Tests</title>
<style type="text/css">
 @import "../js/dojo/resources/dojo.css";
 @import "../js/dijit/themes/tundra/tundra.css";
 .tab1{
 margin:0px;
 padding:0px;
 }
 

</style>  
<script type="text/javascript"
 djConfig="parseOnLoad: true, isDebug: true"
 src="../js/dojo/dojo.js"></script>
<script language="javascript" src="../js/dijit/dijit.js"></script>
<script type="text/javascript">
 dojo.require("dijit.Dialog");

function bkifm(){
 var d=dojo.byId("div1");
 var pos=dojo.contentBox(d);
 var bg=new dijit.DialogUnderlay();

//这里需要重写一下layout函数
  bg.layout=function(){     
     var is = this.node.style,
      os = this.domNode.style;
  
     os.top = d.offsetTop + "px";
     os.left = d.offsetLeft + "px";
     is.width = 300 + "px";
     is.height = d.offsetHeight + "px";  
     is.backgroundColor="#666666"; 
     
    }
 bg.show();

//自动隐藏遮罩

 dojo.fadeOut({node:bg.domNode,duration:3000,onEnd:function(){bg.node.style.display="none";}}).play();

}
</script>
</head>
<body class="tundra">
<div id="div1">
<table id="tab1" width="300px" border="0" cellspacing="0" cellpadding="0" style="margin:0px;padding:0px;display:inline;">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>7</td>
  </tr>
</table>
</div>
<button onClick="bkifm()">ifrm</button>

</body>
</html>

六 dojo.palce
dojo.place移动dom结点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>dojo.place移动dom结点</title> 
<meta http-equiv='Content-Type' content='text/html;charset=utf-8' /> 
<script type='text/javascript' src='../dojo/dojo.js'></script> 
<script type='text/javascript'> 
    var handle = function() { 
        dojo.query('#btn').connect('onclick' , function(){ 
            //参数1 - 需要被被动的结点 
            //参数2 - 移动到哪个结点的 
            //参数3 - 被移动的位置 
            dojo.place('n2' , 'n1' , 'after') ; 
        }); 
         
         dojo.query('#btn2').connect('onclick' , function(){ 
            //参数1 - 需要被被动的结点 
            //参数2 - 移动到哪个结点的 
            //参数3 - 被移动的位置 
            dojo.place('n2' , 'hr' , 'after') ; 
        }); 
    }; 
     
    dojo.addOnLoad(handle); 
     
</script> 
</head> 
<body> 
    <button id='btn'>移动结点</button><br/><br/> 
    <button id='btn2'>移动结点回原来位置</button> 
    <div id='n1'>结点1</div> 
    <div id='n3'>结点3</div> 
    <hr id='hr'/> 
    <div id='n2'>结点2</div> 
     
     
</body> 
</html>

七 Dojo中的dojoAttachPoint
在 Dojo declaration 和 Dojo template 中，经常见到 dojoAttachPoint="xxx" 这种语句，经过查文档，终于有了些理性的认识。
其实就是可以在JavaScript中用this.xxx来引用这个元素。
举例说明如下：

<thead dojoAttachPoint="head"> 
            <tr dojoAttachPoint="headRow"></tr> 
</thead>

如果想在 js 中修改 thead 、tr 时，就可以通过 dojoAttachPoint 指定的别名 head , headRow 来引用到 thead , tr ，从而可以操作它。更深层地理解，就是 thead , tr 在页面的 DOM 树上分别对应着 DOM Node ，JS 操作 DOM 树时，要得到 DOM node 的实例时，才能对其进行操作。
比如在上面示例的表格中，要增加一个 td 结点时，就要得到 tr 的 instance，然后对其操作；在 JS 中实现的代码如下：

var tth = document.createElement("th"); 
this.headRow.appendChild(tth);

其实就是可以用this.headRow来引用
其实这和设置id，然后通过byId拿到dom节点也没有什么区别，只不过这样方便一点而已

八.Dojo中this.inherited(arguments)
在dojo中，你会经常遇到 this.inherited(arguments)。这个是一个dojo的内部方法，用来向基类查找该代码所在的方法，然后调用它，直到知道为止。
九.dojo.Defered
dojo提供dojo.Defered来对异步操作进行抽象，如果一个方法是异步执行的，就可以用一个dojo.Defered作为返回值，对于异步操作典型的方法就是对他添加回调方法。当异步操作完成的时候，回调方法会被调用来执行特定的处理逻辑。
十.dojo.formToObject
用来获取整个forma请求的数据：
Adding a new Player

var button = dijit.byId("addPlayerBtn");
dojo.connect(button, "onClick", function(event){
.... event.preventDefault();
       event.stopPropagation();
       var data = dojo.formToObject("addPlayerForm");
       var team = teams[data.team];
       data.team = team;
       data = dojo.toJson(data);
       var xhrArgs = {
           postData: data,
           handleAs: "json",
           load: function(data) {
               alert("Player added: " + data);
               dojo.byId("gridContainer").innerHTML = "";
               loadPlayers();
           },
           error: function(error) {
               alert("Error! " + error);
           },
           url: "/SoccerOrg/resources/players",
           headers: { "Content-Type": "application/json"}
       };
       var deferred = dojo.xhrPost(xhrArgs);
});