JavaScript DOJO使用總結

對以前項目中用到的dojo架構進行一個架構式的總結，以備參考學習。

主要組成... 1

開發注意... 3

Dojo代碼約定... 3

Dojo形式的指令碼庫... 4

Dojo Build. 4

Dojo ToolBox. 5

推薦資料... 6

參考執行個體... 6

主要組成

包括三個部分：

Dojo: 架構核心

Dijit: 基於dojo的UI介面部分，主題使用css控制

Dojox: 其他擴充

Util：打包風格檢查等工具[在原始碼的發布包中]

頁面應用庫的步驟

Dojo初始庫	形式1 <script type="text/javascript"> djConfig = { parseOnLoad: true, isDebug: true}; </script> <!-- now load dojo.js; note no djConfig attribute --> <script type="text/javascript" src="Scripts/Dojo/dojo/dojo.js"> </script> 形式2 <script type="text/javascript" src="Scripts/Dojo/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug:true"> </script> 注意 如果寫成 <script type="text/javascript" src="Scripts/Dojo/dojo/dojo.js"/>形式不能正常工作
引用使用的庫 Dijit和CSS 只有在使用了dijit時才用	<% #if DEBUG %>         <style type="text/css">                @import "Scripts/Dojo/dijit/themes/tundra/tundra.css";                @import "Scripts/Dojo/dojo/resources/dojo.css";         </style>         <script type="text/javascript" src="Scripts/Dojo/dojo/dojo.js" djconfig="parseOnLoad: true, isDebug:true">         </script>         <script type="text/javascript">                dojo.require("dojo.parser");                dojo.require("dijit.dijit-all"); //開發狀態下包含所有dijit              </script>         <% #else %>         <%--這個是發布目錄，執行Scripts\Dojo\util\buildscripts\my.bat 即建立出來--%>         <style type="text/css">                @import "Scripts/Dox/dijit/themes/tundra/tundra.css";                @import "Scripts/Dox/dojo/resources/dojo.css";         </style>         <script type="text/javascript" src="Scripts/Dox/dojo/dojo.js" djconfig="parseOnLoad: true">         </script>         <script type="text/javascript">                dojo.require("dojo.parser");                dojo.require("dijit.dijit"); </script> <% #endif %>
Dijit使用 [HTML標籤擴充形式]	<div class="formContainer" dojotype="dijit.layout.TabContainer">                <div dojotype="dijit.layout.ContentPane" title="Personal Data">                      <label for="first_name">                             First Name:</label>                      <input type="text" name="first_name" id="first_name" dojotype="dijit.form.ValidationTextBox"                             trim="true" propercase="true" required="true" size="30" invalidmessage="You must enter your first name" /><br />         。。。

Dojo庫的組織思想是按照小的功能塊進行組織的,因此可以看到dojo dijit dojox目錄下有很多的檔案，dojo.js內含的功能包括：瀏覽器環境屬性、語言擴充、非同步編程、DOM編程、XHR編程、物件導向和Dojo載入器；其他的功能都在獨立的js檔案中，如html解析

Dojo/ parser.js 引用這個功能使用dojo.require("dojo.parser") [dojo比較推薦使用HTML標籤擴充的形式使用dijit]

開發注意

Ø 如果在本地查看demo檔案，在Firefox3中預設不能正確顯示，修改方法如下：

Firefox地址欄輸入about:config，找到security.fileuri.strict_origin_policy改為false

Ø 開發建議、跟蹤

console.dir

console.log error debug

Ø 庫

最好使用原始碼的指令碼庫，然後在項目發布時使用dojo的打包系統根據需要打包，以減少js檔案的大小

Ø 推薦工具

由於需要跟蹤用戶端的指令碼處理情況，因此瀏覽器端的工具非常重要

Firefox: FireBug

IE: Developer Toolbar， HttpWatch Professional是個更好的工具

Dojo代碼約定

Dojo中的代碼檔案命名規範

普通的模組是小寫字母

如果一個模組定義了一個建構函式，那麼它的名字將首字母大寫，表示這個模組定義了一個類

少數的指令碼和模組的名字永底線開頭，表示私人的，只在內部供其他模組使用，需要時自動載入這些指令碼，可以忽略

據此規則，可以看到指令碼庫的檔案類別

Dojo形式的指令碼庫

/// <reference path="../Intellisense/dojo.aspx"/>
dojo.provide("My.Shape");
dojo.declare(
       //the name of the constructor function (class) created...
       "My.Shape",
       //this is where the superclass (if any) goes...    
       null,
       //this object contains everything to add to the new class's prototype...
       {
       //default property values can go in prototype...
       color: 0,
       //here is the single prototype method...
       setColor: function (color) {
             this.color = color;
       }
}
  );

以上是Dojo形式的類

Dojo Build

http://www.ibm.com/developerworks/cn/web/0912_shenjc_dojobuild/ 這個是打包的說明

dependencies = {
       //Layers屬性中每一個對象都指定了如何把多個JavaScript資源合并成一個資源
       layers: [
       {
              name: "dojo.js",
              dependencies: [
                           "dojo.parser",
                           "dojo.string"
                    ]
       },
       {
              name: "../dijit/dijit.js",
              layerDependencies: ["dojo.js"],
              dependencies: [
                           "dijit.dijit",
                           "dijit.layout.ContentPane",
                           "dijit.layout.TabContainer",
                           "dijit.form.ValidationTextBox",
                           "dijit.form.DateTextBox",
                           "dijit.Dialog"
                    ]
       },
       {
              //打包的資源檔的檔案名稱，相對於dojo目錄
              name: "../My/demodojo.js",
              //本層依賴的其他資源打包
              layerDependencies: [
              ],
              //打包資源套件含的模組名
              dependencies: [
                    //指定模組名稱後，打包程式自動載入對應的檔案併合並
                       "My.demodojo"
                    ]
       }
  ],
      //prefixes一個集合，集合中的每個元素給出了從模組名到模組路徑的一個映射[路徑名是相對於dojo/的
       prefixes: [
       //Dojo路徑預設包含
       ["dijit", "../dijit"],
       //["dojox", "../dojox"],
       ["My", "../My"]
  ]
}

上例是把js檔案分別放到dojo.js dijit.js和demodojo.js 三個檔案中，這樣發布的系統就下載的檔案數量就很少了

Dojo ToolBox

官方網站可以下載這個工具，包括API協助[需要線上狀態下安裝]；打包工具等

推薦資料

http://dojotoolkit.org/

http://www.dojocn.com/

mastering dojo http://www.pragprog.com 網站可以下載例子代碼，本書有中文版本“精通Dojo”

該書對Dojo的方方面面進行了介紹

電子書也可以在http://ppurl.com上下載

參考執行個體

http://jsfkit.codeplex.com