dojo入门

柔光的暖阳◎ 2023-06-01 05:45 22阅读 0赞

[dojo入门][dojo]

1.**引入dojo.js**

dojo的发行包里有4个子目录，要引入的文件是名叫"dojo"的子目录里的dojo.js。 假设你是这样的目录结构:

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>project</code> 
     </div> 
     <div> 
      <code>|</code> 
     </div> 
     <div> 
      <code>+--dojo-lib</code> 
     </div> 
     <div> 
      <code>| |</code> 
     </div> 
     <div> 
      <code>| +--dijit</code> 
     </div> 
     <div> 
      <code>| +--dojo</code> 
     </div> 
     <div> 
      <code>| +--dojox</code> 
     </div> 
     <div> 
      <code>| +--util</code> 
     </div> 
     <div> 
      <code>|</code> 
     </div> 
     <div> 
      <code>+--dojo_hello_world.html</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code>&nbsp; 
      <code>src=</code> 
      <code>"./dojo-lib/dojo/dojo.js"</code> 
      <code>&gt;&lt;/script&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

2.**开始使用dojo**

**dom**

(1)**dojo.byId**

dojo.byId就等同于常用的document.getElement 。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;input type=</code> 
      <code>"text"</code>&nbsp; 
      <code>name=</code> 
      <code>"username"</code>&nbsp; 
      <code>id=</code> 
      <code>"username"</code>&nbsp; 
      <code>value=</code> 
      <code>"Mark"</code>&nbsp; 
      <code>/&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>var</code>&nbsp; 
      <code>username = dojo.byId(</code> 
      <code>'username'</code> 
      <code>).value</code> 
     </div> 
     <div> 
      <code>alert(username);</code> 
     </div> 
     <div> 
      <code>&lt;/script&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

(2)**dojo.addOnLoad**

现在我们想在window.onload里面处理一点东西，就像Ext.onReady，这个东西在dojo里叫做dojo.addOnLoad。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>dojo.addOnLoad(</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>var</code>&nbsp; 
      <code>username = dojo.byId(</code> 
      <code>'username'</code> 
      <code>).value</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>alert(username);</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

（3）**dojo.connect**

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

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

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var</code>&nbsp; 
      <code>name =&nbsp;</code> 
      <code>"Mark"</code> 
     </div> 
     <div> 
      <code>function</code>&nbsp; 
      <code>sayHello()</code> 
     </div> 
     <div> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>alert(</code> 
      <code>"Hello "</code>&nbsp; 
      <code>+&nbsp;</code> 
      <code>this</code> 
      <code>.name);</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>var</code>&nbsp; 
      <code>obj = { </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>name:&nbsp;</code> 
      <code>"Karl"</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>dojo.addOnLoad(</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>var</code>&nbsp; 
      <code>btn = dojo.byId(</code> 
      <code>'hello'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>dojo.connect(btn,</code> 
      <code>"onclick"</code> 
      <code>,obj,sayHello);</code> 
      <code>//注意这行的第三个和第四个参数</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

OK，点击按钮，将输出：Hello Karl。这里dojo.connect的第三个参数变成了scope，而handler函数是第四个，实际上dojo.connect(btn,"onclick",sayHello); 与dojo.connect(btn,"onclick",null,sayHello); 相同。

更加复杂的用法这里不作介绍，写太多就越搞越复杂了，后面再写文章详细介绍dojo.connect，这里只简单介绍如何绑定DOM事件。

**xmlhttp dojo.xhrGet**

(1)**默认绑定为utf-8**

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code>&nbsp; 
      <code>src=</code> 
      <code>"./dojo-lib/dojo/dojo.js"</code>&nbsp; 
      <code>djConfig=</code> 
      <code>"isDebug:true,bindEncoding:'UTF-8'"</code> 
      <code>&gt;&lt;/script&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

(2)**发出一个xmlhttp请求**

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

看看，够不够一目了然？ url 就是url…… ；handleAs 把获取的内容作为text/html ；load 成功时的回调函数；error 失败时的回调函数

(3)**传入参数**

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var</code>&nbsp; 
      <code>params = { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>username:</code> 
      <code>'Mark'</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>id:</code> 
      <code>'105'</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>dojo.xhrGet({ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>url:&nbsp;</code> 
      <code>"http://localhost/hello/sayHello.jsp"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>content:params,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//...</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

(4)*json*

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>dojo.xhrGet({ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>url:&nbsp;</code> 
      <code>"http://localhost/hello/sayHello.jsp"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>handleAs:&nbsp;</code> 
      <code>"json"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>load:&nbsp;</code> 
      <code>function</code> 
      <code>(json)</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(json.name)</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//...</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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][http_dojotoolkit.org_book_dojo-book-0-9_part-3-programmatic-dijit-and-dojo_other-miscellaneous-function_converting-json]有一个表格**，**应该能找到你需要的。

(5)**直接提交一个表单**

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>dojo.xhrGet({ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>url:&nbsp;</code> 
      <code>"http://localhost/hello/sayHello.jsp"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>form: dojo.byId(</code> 
      <code>"form1"</code> 
      <code>)</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//...</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

(6)**preventCache　　**

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>dojo.xhrGet({ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>url:&nbsp;</code> 
      <code>"http://localhost/hello/sayHello.jsp"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>preventCache:&nbsp;</code> 
      <code>true</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//...</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**dojo.hitch scope/context**

(1)**dojo.hitch　**

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

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

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

**面向对象,定义Class**

(1)**定义Class**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>dojo.declare(</code> 
      <code>"Customer"</code> 
      <code>,</code> 
      <code>null</code> 
      <code>,{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>constructor:</code> 
      <code>function</code> 
      <code>(name){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.name = name;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>say:</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(</code> 
      <code>"Hello "</code>&nbsp; 
      <code>+&nbsp;</code> 
      <code>this</code> 
      <code>.name);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>getDiscount:</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(</code> 
      <code>"Discount is 1.0"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
     <div> 
      <code>var</code>&nbsp; 
      <code>customer1 =&nbsp;</code> 
      <code>new</code>&nbsp; 
      <code>Customer(</code> 
      <code>"Mark"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>customer1.say();</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

declare有三个参数: 第一个 class名字；第二个 父类的引用 ；第三个 ...   
  
构造函数的名字就叫做"construnctor"

(2)**继承**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>dojo.declare(</code> 
      <code>"VIP"</code> 
      <code>,Customer,{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>getDiscount:</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(</code> 
      <code>"Discount is 0.8"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
     <div> 
      <code>var</code>&nbsp; 
      <code>vip =&nbsp;</code> 
      <code>new</code>&nbsp; 
      <code>VIP(</code> 
      <code>"Mark"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>vip.say();</code> 
     </div> 
     <div> 
      <code>vip.getDiscount();</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

(3)**this.inherited方法调用父类**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>dojo.declare(</code> 
      <code>"VIP"</code> 
      <code>,Customer,{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>getDiscount:</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.inherited(arguments);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//this.inherited("getDiscount",arguments);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

(4)**关于构造函数**

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

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>constructor:</code> 
      <code>function</code> 
      <code>(args){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code>&nbsp; 
      <code>args = args || {};</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.name = args.name;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.age = args.age;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

（5）**多继承,mixin　**

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

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

**package机制**

说完了dojo里的类继承机制，不得不说说package机制。

主要用到的有   
dojo.require   
dojo.provide   
dojo.registerModulePath

（1）**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很相似。

（2）**dojo.provide**

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

dojo.provide("com.javaeye.fyting.Package1");

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

(3)**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原生地支持这些。

转载于:https://www.cnblogs.com/Jeely/p/11438233.html

[dojo]: https://www.cnblogs.com/jymz/p/4211385.html
[sarissa]: http://sarissa.sourceforge.net/
[http_dojotoolkit.org_book_dojo-book-0-9_part-3-programmatic-dijit-and-dojo_other-miscellaneous-function_converting-json]: http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/other-miscellaneous-function/converting-json