Dojo學習筆記(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 };
djConfig </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.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.0dojo.html.ie55 返回true說明瀏覽器是IE 5.5dojo.html.ie60 返回true說明瀏覽器是IE 6.0dojo.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.string dojo.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 "s = " abc ";dojo.string.trimEnd(s); //will return " abc"dojo.string.repeat("a", 4); //will return "aaaa"dojo.string.repeat("1234", 3, "-"); //will return "1234-1234-1234"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("100", 6); //will return "000100"dojo.string.padRight("100", 6); //will return "100000"模塊：dojo.lang.common / dojo.lang dojo.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();TestClass = function() {};dojo.lang.extend(TestClass, {name: "demo", test: function(){alert("Test!");}});var o = new TestClass(); //TestClass本來是沒有test方法的，但是extend以後就有test方法了o.test();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 4var 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 4var arr = [1,2,3];dojo.lang.inArray(arr, 1); //will return truedojo.lang.inArray(arr, 4); //will return falsedojo.lang.isObject(new String()); //will return truedojo.lang.isObject("123")); //will return falsedojo.lang.isArray({a:1,b:2}); //will return falsedojo.lang.isArray([1,2,3]); //will return truedojo.lang.isFunction(function() {}); //will return true
dojo.lang.isString(""); //will return truedojo.lang.isString(0); //will return falsedojo.lang.isAlien(isNaN); //will return truedojo.lang.isBoolean(2>1); //will return truedojo.lang.isNumber 判斷輸入的類型是否爲數值，根據註釋所說，此函數使用不太可靠，但是可替換使用的系統函數isNaN也不太可靠
dojo.lang.isUndefined 判斷輸入是否爲未定義，根據註釋所說，此函數有可能會導致拋出異常，推薦使用 typeof foo == "undefined" 來判斷
模塊：dojo.lang.extras dojo.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(dojo, dojo.debug); //will return "debug"dojo.lang.shallowCopy({}); //will return a 空對象var a;dojo.lang.firstValued(a,2,3); //will return 2以上全部是自己閱讀源代碼寫的總結，如有錯誤，還請指明。