對以前項目中用到的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幫助[需要在線狀態下安裝]；打包工具等
推薦資料
mastering dojo http://www.pragprog.com 站點可以下載例子代碼，本書有中文版本“精通Dojo”
該書對Dojo的方方面面進行了介紹
電子書也可以在http://ppurl.com上下載