Dojo學習筆記2007年06月05日 星期二 17:18(1. 模塊與包)
Intro:
Dojo是一個非常強大的面向對象的JavaScript的工具箱, 建議讀者能夠去補充一下JavaScript下如何使用OO進行編程的, 這對于你以后閱讀Dojo Source有很大的用處
請大家下載dojo 0.3.1, 以下的說明均針對此版本
翻譯自http://manual.dojotoolkit.org/WikiHome/DojoDotBook/BookUsingDojo
Getting Started
1: 把Dojo加入到我們的Web程序中
1. 標志
<script type="text/javascript">
djConfig = { isDebug: false };
</script>
djConfig是Dojo里的一個全局對象, 其作用就是為Dojo提供各種選項, isDebug是最常用的屬性之一, 設置為True以便能夠在頁面上直接看到調試輸出, 當然其中還有些屬性與調試有關, 這里就不羅索了
2. 引用 dojo 的啟動代碼
<script type="text/javascript" src="/yourpath/dojo.js" />
這樣你就引用了dojo的代碼, 并可以直接使用其中部分常用的對象, 下載下來的dojo.js是壓縮(remove comments and space)后的代碼, 要閱讀的話,建議閱讀dojo.js.uncompressed.js, dojo.js大概有127K, 而未壓縮前有211K, ok, 為什么會這么大呢, 原來其已經把部分常用的模塊整合進dojo.js里, 因此顯得大了一點, build.txt里就說明了默認的dojo.js包含了哪些模塊
3. 聲明你所要用到的包
<script type="text/javascript">
dojo.require("dojo.math");
dojo.require("dojo.io.*");
dojo.require("dojo.widget.*");
</script>
你就把這些代碼當成是java的import語句或C#中的using語句一樣, 如果你不require的話, 而模塊本身又沒有整合在dojo.js中, 是會出現腳本錯誤的喔
2. 針對不同需求提供的預整合包
Dojo本身是由許多模塊所組合而成的, 但是由于用戶需求的多樣性, dojo針對不同的需求而提供了不同的版本, 用戶在下載dojo的時候就看見可以選擇很多的版本, 比如Ajax版和Widget版, 每個版本最重要的區別就在于dojo.js文件, 但是除此之外, 每一個版本都是全功能的, dojo.js根據版本的不同而整合進了不同的模塊
3. 直接獲取Dojo的最新源代碼
首先你必須安裝 Subversion, 當Subversion在你的電腦上能夠正常工作后,你就可以通過如下命令下載dojo的源代碼:
svn co http://svn.dojotoolkit.org/dojo/trunk/
這會在你的當前目錄下創建一個 trunk 的目錄; 如果你希望直接Get到當前目錄, 用這個命令:
svn co http://svn.dojotoolkit.org/dojo/trunk/ .
或者你希望Get到當前目錄下的 MyDir 目錄, 用這個命令:
svn co http://svn.dojotoolkit.org/dojo/trunk/ MyDir
模塊與包
模塊
Dojo的代碼被劃分為邏輯單元稱之為模塊, 這有點類似于Java中的package,除了dojo的模塊能夠包含類 (類似于java中的classes)和簡單函數
比如: 模塊"dojo.html"包含了一系列的函數, 比如dojo.html.getContentBox(), 模塊"dojo.dnd"包含了一系列的HtmlDragObject的類
注意名稱約定, 函數的首字母為小寫字母,類的首字母為大寫
模塊也可以稱之為"命名空間"
包
在多數情況下, dojo的模塊只需要定義在一個文件就可以了, 但有時, 一個模塊可能劃分到多個文件, 比如: 模塊dojo.html, 本來是定義在一個文件中, 可是由于功能的增強, 文件逐漸變大, 我們不得不將其拆分為多個文件, 這主要是為性能考慮, 以便瀏覽器可以只下載其需要用到的代碼, 不幸的是其實現細節對于dojo的用戶看起來不那么透明, 你必須知道你想要用到的功能到底是包含在哪個文件, 然后才能require并使用它
這樣的每一個文件都稱之為一個包
dojo.require("dojo.html.extras")
將引用文件 src/html/extras.js, 這將定義模塊 dojo.html 的若干(并非所有)函數
據我所知, 盡管單個文件可以定義包里的多個類, 單個腳本文件不能定義多個模塊 (在Java可以等效于在一個文件中定義2個類), 并且, 包的名稱和模塊的名稱可以不同, 比如: 包dojo.widget.Button定義了dojo.widget.html.Button
基本上你應該這樣認為, 包和模塊盡管密切相關, 但是是兩個完全不同的實體
為什么會有模塊和包這樣的概念?
為什么會有模塊和包這樣的概念? 為了滿足你的應用程序只需要加載其所用到的東西的需求, 充分利用模塊化設計的優點, dojo維護了最小的足印以便仍能提供你所需要的功能, 為什么要你的用戶浪費時間去下載用不到的JavaScript, 當一個包就是一個js文件時, 一個模塊本質上就是一個命名空間, 比如: dojo.style 或 dojo.html.extras
多數簡單情況下, 一個包包含了一個模塊, 但更常見的是, 一個模塊可能被拆分為幾個包文件
利用包和模塊, 將能確保你能夠交付最相關的功能代碼, 最小程度的減少代碼的膨脹和消除由此帶來的不好的用戶體驗,這就是模塊設計的主要目標, 通過模塊化, 你能夠引入自定義模塊(你自己擁有的 JavaScript 工具), 并且維護模塊對于核心代碼庫基本不會產生什么影響
另外, Dojo的模塊系統也提供了內建的機制來使用代碼提供命名空間, 比如, 通過模塊dojo.event定義的Dojo的事件系統
怎樣引用
設置引用語句
你怎樣才能知道該引用哪個包到dojo.require()?
1. 模塊
首先, 確定你要使用什么模塊, 這個例子我們假定你要使用 dojo.lfx.html
2. 包
搜索代碼后你發現dojo.lfx.html定義在2個文件:
src/lfx/html.js
src/lfx/extras.js
根據你要用到的功能, 你可以
dojo.require("dojo.lfx.html");
或
dojo.require("dojo.lfx.html");
dojo.require("dojo.lfx.extras");
通配符
新用戶可能會對dojo.lfx.*這樣就可以替代上面2句而感到詫異, 實際上, __package__.js 中已經定義了通配符可以代替的語句, 并且這樣可以讓dojo根據當時的環境而決定加載具體的模塊
Dojo學習筆記(2. djConfig解說)
djConfig是dojo內置的一個全局設置對象，其作用是可以通過其控制dojo的行為
首先我們需要在引用dojo.js前聲明djConfig對象，以便在加載dojo.js的時候才能夠取得所設置的值，雖然在0.3版本以后dojo支持在加載后設置，但是強烈建議你把聲明djConfig的代碼作為第一段script
一個完整的djConfig對象定義如下（值均為dojo的默認值）
<script type="text/javascript">
var djConfig = {
isDebug: false,
debugContainerId: "",
bindEncoding: "",
allowQueryConfig: false,
baseScriptUri: "",
parseWidgets: true
searchIds: [],
baseRelativePath: "",
libraryScriptUri: "",
iePreventClobber: false,
ieClobberMinimal: true,
preventBackButtonFix: true,
};
</script>
isDebug是一個很有用的屬性，顧名思義，如果設置為真，則所有dojo.Debug的輸出有效，開發時應該設置為true，發布時應該設置為false
debugContainerId同樣也是與調試有關的，如果不指定的話，調試信息將會直接利用 document.write輸出，這樣可能會破壞頁面的整體布局，所以你可以指定任何一個可以作為容器的html元素的id作為調試信息輸出容器
allowQueryConfig，這個屬性指明 dojo是否允許從頁面url的參數中讀取djConfig中的相關屬性，當值為true時，dojo會優先從url參數中讀取djConfig的其他屬性，比如: http://server/dojoDemo.htm?djConfig.debugContainerId=divDebug
baseScriptUri，一般不需要設置，dojo會自動根據你引用dojo.js的路徑設置這個值，比如，<script type="text/javascript" src="../dojo/dojo.js"></script>，自動獲取的值便是 ../dojo/
ps: 如果你有多個工程需要同時引用dojo.js的話，建議也把dojo當作一個獨立的工程，引用的時候采用絕對路徑就可以了
parseWidgets，這個是可以控制dojo是否自動解析具有dojoType的html元素為對應的widget，如果你沒有使用任何Widget，建議設置為false以加快dojo的加載速度
searchIds，這是一個字符串數組，定義了所有需要解析為widget的html元素的ID，如果ID不在其中的html元素是不會被解析的，當數組為空數組時，則所有具有dojoType的元素都會被解析
還有一個bindEncoding，是用來設置默認的bind請求的編碼方式
至于其它的屬性，不是用處不大，就是不知道有什么作用
在實際開發中，可以把djConfig的定義放在一個js文件里，并將其作為第一個引用的js文件，這樣應該是最方便的。
Dojo學習筆記(3. Dojo的基礎對象和方法)
這里所說的基礎對象和方法是指的不Require任何包就能夠調用的對象和方法
匿名函數
在開始前，我想介紹一下js里的匿名函數，這個在閱讀dojo的源代碼的時候，會發現到處都有匿名函數
;(function(){
alert(123);
})();
//前面的分號是一個空語句，是可以不要的
匿名函數。一個匿名函數就是一個沒有名字的函數。
你可以認為他們是一次性函數。當你只需要用一次某個函數時，他們就特別有用。通過使用匿名函數，沒有必要把函數一直放在內存中，所以使用匿名函數更加有效率。
當然你也可以根本不定義函數，但是使用匿名函數可以把你的代碼分段，就像C#中的#region一樣
dojo.byId
非常有用的一個方法，與prototype.js的著名的$一樣
似乎以前的版本還有dojo.byIdArray, 不過最新的版本已經找不到這個函數了(除了src\compat\0.2.2.js)
如果有多個元素具有指定的id，則返回的是一個集合
Usage Example:
dojo.byId("divTest");
dojo.byId("divTest", document);
dojo.byId(document.getElementById("divTest"));
dojo.version
dojo的版本，可以取得major, minor, patch, flag和revision
這個對象沒什么太大用處，除非你要根據dojo的版本選擇執行你的代碼
dojo.raise
拋出一個異常
dojo.errorToString
將異常轉換為字符串
Usage Example:
try
{
dojo.raise("打印失敗", new Error("文件不存在"));
}
catch(e)
{
alert(dojo.errorToString(e));
}
dojo.render
系統環境對象
dojo.render.name 返回 browser ，說明是工作在瀏覽器下
dojo.render.ver 返回 4 ，似乎沒什么用
dojo.os.win 返回true說明操作系統是Windows
dojo.os.linux 返回true說明操作系統是Linux
dojo.os.osx 返回true說明操作系統是MacOS
dojo.html.ie 返回true說明瀏覽器是Internet Explorer
dojo.html.opera 返回true說明瀏覽器是Opera
dojo.html.khtml 返回true說明瀏覽器是Konqueror
dojo.html.safari 返回true說明瀏覽器是Safari
dojo.html.moz 返回true說明瀏覽器是Mozilla FireFox
dojo.svg.capable 返回true說明瀏覽器支持svg
dojo.vml.capable 返回true說明瀏覽器支持vml
dojo.swf.capable 返回true說明瀏覽器支持swf
dojo.swt.capable 返回true說明瀏覽器支持swt (IBM開發的Standard Widget Toolkit)
如果dojo.html.ie為true的話
dojo.html.ie50 返回true說明瀏覽器是IE 5.0
dojo.html.ie55 返回true說明瀏覽器是IE 5.5
dojo.html.ie60 返回true說明瀏覽器是IE 6.0
dojo.html.ie70 返回true說明瀏覽器是IE 7.0
dojo.addOnLoad
可以加載指定函數到window.load時執行，好處就是可以很方便的在window.load時執行多個函數
Usage Example:
dojo.addOnLoad(init); //init是一個函數
dojo.addOnLoad(myObject, init); //init是myObject對象的一個方法
dojo.require
如果你想調用一個模塊的對象的時候，你應該首先用dojo.require來請求這個模塊，dojo會根據你的請求自動取得相應的js文件，并加載到內存中，這樣你才能調用或創建其中的對象
dojo會自動維護已加載的模塊列表，所以是不會重復加載模塊的
Usage Example:
dojo.require("dojo.event");
dojo.requireIf=dojo.requireAfterIf
可以根據指定的條件來決定是否加載指定的模塊
Usage Example:
dojo.requireIf(dojo.html.ie, "dojo.html"); //如果dojo.html.ie為true，才會加載dojo.html模塊
dojo.provide
除非你要開發自己的模塊，不然是用不到這個方法的，你可以這句看成是向系統注冊這個模塊名稱
Usage Example:
dojo.provide("dojo.custom");
dojo.exists
判斷指定對象是否具有指定名稱的方法
Usage Example:
dojo.exists(dojo, "exists"); //will return true
dojo.hostenv.getText
返回指定url的內容
PS: 由于瀏覽器的安全限制，因此只能用于取得同域名的url的內容，否則會報告權限不夠
Usage Example:
aSync = false; //同步，確保返回內容不為null
silent = true; //不拋出錯誤
s = dojo.hostenv.getText("http://www.google.com/", aSync, silent); //返回Google的首頁的HTML
alert(s);
dojo.debug
輸出調試信息，如果在djConfig中指定了debugContainerId，則輸出到指定的console容器中，否則直接document.write
所有的調試信息均以 DEBUG: 開頭
Usage Example:
dojo.debug("這是調試信息");
dojo.hostenv.println
與dojo.debug類似，不同的是，輸出內容沒有 DEBUG:
Usage Example:
dojo.hostenv.println("這是一般的輸出信息");
dojo.debugShallow
輸出指定對象的全部信息(Shallow說明并不會遍歷到下一級別的對象屬性)以供調試
Usage Example:
dojo.debugShallow(dojo.render.html);
Dojo學習筆記(4. dojo.string & dojo.lang)
模塊：dojo.string.common / dojo.stringdojo.string.common 和 dojo.string 是一樣的，只要require其中一個就可以使用以下方法dojo.string.trim去掉字符串的空白Usage Example:s = " abc ";dojo.string.trim(s); //will return "abc"dojo.string.trim(s, 0); //will return "abc"dojo.string.trim(s, 1); //will return "abc "dojo.string.trim(s, -1);//will return " abc"
dojo.string.trimStart去掉字符串開頭的空白Usage Example:s = " abc ";dojo.string.trimStart(s); //will return "abc "dojo.string.trimEnd去掉字符串結尾的空白Usage Example:s = " abc ";dojo.string.trimEnd(s); //will return " abc"dojo.string.repeat生成由同一字符(串)重復組成的字符串Usage Example:dojo.string.repeat("a", 4); //will return "aaaa"dojo.string.repeat("1234", 3, "-"); //will return "1234-1234-1234"dojo.string.pad使用字符補齊字符串Usage Example:dojo.string.pad("100", 6); //will return "000100"dojo.string.pad("100", 6, "0", 1); //will return "000100"dojo.string.pad("100", 6, "0", -1); //will return "100000"dojo.string.padLeft使用字符補齊字符串開頭Usage Example:dojo.string.padLeft("100", 6); //will return "000100"dojo.string.padRight使用字符補齊字符串結尾Usage Example:dojo.string.padRight("100", 6); //will return "100000"
模塊：dojo.lang.common / dojo.langdojo.lang.common 和 dojo.lang 是一樣的，只要require其中一個就可以使用以下方法
dojo.lang.mixin將一個對象的方法和屬性增加到另一個對象上Usage Example:var s1 = {name: "TestObj", test1: function(){alert("this is test1!");}}var s2 = {value: 1000, test2: function(){alert("this is test2!");}}var d = {};dojo.lang.mixin(d, s1, s2); //執行后d就具備了s1和s2的所有屬性和方法d.test1();dojo.lang.extend為指定類的原型擴展方法與屬性Usage Example:TestClass = function() {};dojo.lang.extend(TestClass, {name: "demo", test: function(){alert("Test!");}});var o = new TestClass(); //TestClass本來是沒有test方法的，但是extend以后就有test方法了o.test();dojo.lang.find=dojo.lang.indexOf查找指定對象在指定數組中的位置Usage Example:var arr = [1,2,3,3,2,1];dojo.lang.find(arr, 2); //will return 1dojo.lang.find(arr, 2, true); //will return 1dojo.lang.find(arr, "2", true); //will return -1dojo.lang.find(arr, "2", false); //will return 1dojo.lang.find(arr, 2, true, true); //will return 4dojo.lang.findLast=dojo.lang.lastIndexOf查找指定對象在指定數組中的位置，從后往前查Usage Example:var arr = [1,2,3,3,2,1];dojo.lang.findLast(arr, 2); //will return 4dojo.lang.findLast(arr, 2, true); //will return 4dojo.lang.findLast(arr, "2", true); //will return -1dojo.lang.findLast(arr, "2", false); //will return 4dojo.lang.inArray查找指定對象是否在指定數組中Usage Example:var arr = [1,2,3];dojo.lang.inArray(arr, 1); //will return truedojo.lang.inArray(arr, 4); //will return falsedojo.lang.isObject判斷輸入的類型是否為對象Usage Example:dojo.lang.isObject(new String()); //will return truedojo.lang.isObject("123")); //will return falsedojo.lang.isArray判斷輸入的類型是否為數組Usage Example:dojo.lang.isArray({a:1,b:2}); //will return falsedojo.lang.isArray([1,2,3]); //will return truedojo.lang.isFunction判斷輸入的類型是否為函數Usage Example:dojo.lang.isFunction(function() {}); //will return truedojo.lang.isString判斷輸入的類型是否為字符串Usage Example:dojo.lang.isString(""); //will return truedojo.lang.isString(0); //will return falsedojo.lang.isAlien判斷輸入的類型是否為系統函數Usage Example:dojo.lang.isAlien(isNaN); //will return truedojo.lang.isBoolean判斷輸入的類型是否為布爾類型Usage Example:dojo.lang.isBoolean(2>1); //will return truedojo.lang.isNumber判斷輸入的類型是否為數值，根據注釋所說，此函數使用不太可靠，但是可替換使用的系統函數isNaN也不太可靠dojo.lang.isUndefined判斷輸入是否為未定義，根據注釋所說，此函數有可能會導致拋出異常，推薦使用 typeof foo == "undefined" 來判斷
模塊：dojo.lang.extrasdojo.lang.setTimeout延遲指定時間后執行指定方法Usage Example:function onTime(msg){dojo.debug(msg)}dojo.lang.setTimeout(onTime, 1000, "test"); //1秒后會輸出調試信息"test"dojo.lang.setTimeout(dojo, "debug", 1000, "test"); //1秒后會輸出調試信息"test"dojo.lang.getNameInObj獲得指定項目在指定對象中的名稱Usage Example:dojo.lang.getNameInObj(dojo, dojo.debug); //will return "debug"dojo.lang.shallowCopy返回指定對象的淺表復制副本Usage Example:dojo.lang.shallowCopy({}); //will return a 空對象dojo.lang.firstValued返回第一個存在定義的參數Usage Example:var a;dojo.lang.firstValued(a,2,3); //will return 2以上全部是自己閱讀源代碼寫的總結，如有錯誤，還請指明。