從網上搜集Dojo的相關材料，dojo的相關介紹總是讓人望而生畏。第一個hello world就搞了一大堆東西，比如widget組件，自訂的script標籤等，加上要引入什麼css檔案，djConfig、dojo.require等等，讓人很迷惑。我根據網路中給出的執行個體，由於涉及的dojo包太多，加上我是初學者，最終也沒有配置好，給我的感覺是一個字：“太亂”。這麼複雜，到底dojo該怎麼使用呢？
我把問題細化了一下，那麼，只需要把dojo當作一個普通的js類庫，僅僅引入dojo.js，就像prototype那樣，可以使用嗎？OK！
閑話少說，來看看如何使用dojo.js中的幾個基本函數。
1. dojo.js的引入方法
說明：dojo的發行包分為兩個版本：Ajax和widget版本。在這裡我下載的是dojo-0.3.1-ajax版本
[
要下載完整的Dojo架構，請點擊這裡下載：http://download.dojotoolkit.org/release-0.3.1/dojo-0.3.1-ajax.zip。
]
下載下來的dojo.js是壓縮(remove comments and space)後的代碼, 要閱讀的話,建議閱讀dojo.js.uncompressed.js, dojo.js大概有127K, 而未壓縮前有211K, ok, 為什麼會這麼大呢, 原來其已經把部分常用的模組整合進dojo.js裡, 因此顯得大了一點, build.txt裡就說明了預設的dojo.js包含了哪些模組。
接下來，就是引入的檔案是名叫"dojo"的子目錄裡的dojo.js。
執行個體：<script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug:true,bindEncoding:'UTF-8'"></script>
註：djConfig屬性。第一個isDebug指是否開啟FireBug的Console，第二個bindEncoding指xmlhttp使用的編碼，這個在以後會用到。
2. dojo.connect()的用法
說明：監聽普通的dom事件
執行個體1：頁面載入時，輸出“Hello World！”
<html>
<head>
<meta name="generator" content="HTML Tidy, see http://www.w3.org/">
<meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1">
<title>Dojo, Hello World!</title>
<script type="text/javascript" src="dojoroot/dojo/dojo.js" djConfig="isDebug:true,bindEncoding:'UTF-8'">
</script>
<script type="text/javascript">
function init(){
alert("Hello World!");
}
dojo.connect(dojo, "loaded", "init");
</script>
</head>
<body>
<input id="hello" value="hello" type="button"/>
</body>
</html>
執行個體2：頁面載入時，輸出“Hello Karl”
<script type="text/javascript">
var name = "Mark"
function sayHello()
{
alert("Hello " + this.name);
}
var obj = {
name: "Karl"
}
dojo.addOnLoad(function(){
var btn = dojo.byId('hello');
dojo.connect(btn,"onclick",obj,sayHello);//注意這行的第三個和第四個參數
});
</script>
3. dojo.event.connect的用法(結合package機制理解)
說明：在引入event包之後，如何監聽dom事件呢？強大的dojo.event.connect出場。
執行個體：頁面載入時，直接彈出“Hello World!”
<html>
<head>
<meta name="generator" content="HTML Tidy, see http://www.w3.org/">
<meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1">
<title>Dojo, Hello World!</title>
<script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug:true,bindEncoding:'UTF-8'"> </script>
<script type="text/javascript">
dojo.require("dojo.event.*");
function init(){
alert("Hello World!");
}
dojo.event.connect(dojo, "loaded", "init");
</script>
</head>
<body>
</body>
</html>
4. dojo.addOnLoad()的用法
說明：頁面自動載入功能
執行個體：滑鼠點擊按鈕時，彈出對話方塊。即，button的onclick事件
<html>
<head>
<meta name="generator" content="HTML Tidy, see http://www.w3.org/">
<meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1">
<title>Dojo, Hello World!</title>
<script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug:true,bindEncoding:'UTF-8'">
</script>
<script type="text/javascript">
dojo.require("dojo.event.*");
function helloworld(){
var myfirst = document.getElementById("hello").value;
alert(myfirst);
}
dojo.addOnLoad(function(){
alert("Hello, welcome !");
var first = document.getElementById("hello");
dojo.event.connect(first, "onclick", helloworld);
})
</script>
</head>
<body>
<input id="hello" value="This is my first page!" type="button"/>
</body>
</html>
5. dojo.byId的用法
說明：dojo.byId就等同於常用的document.getElement 。
執行個體：載入頁面時將文字框的內容清空
<html>
<head>
<meta name="generator" content="HTML Tidy, see http://www.w3.org/">
<meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1">
<title>Dojo, Hello World!</title>
<script type="text/javascript" src="dojo/dojo.js.uncompressed.js" djConfig="isDebug:true,bindEncoding:'UTF-8'">
</script>
<script type="text/javascript">
dojo.require("dojo.event.*");
function helloworld(){
var myfirst = document.getElementById("hello").value;
alert(myfirst);
var buttonContent = dojo.byId("dropContent");
buttonContent.value = myfirst;
}
dojo.addOnLoad(function init(){
dojo.byId("dropContent").value = "";
alert("Hello, welcome !");
var first = document.getElementById("hello");
dojo.event.connect(first, "onclick", helloworld);
})
</script>
</head>
<body>
<input id="hello" value="This is my first page!" type="button"/><input id="dropContent" value="" type="text"/>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
