麻雀雖小五臟俱全 Dojo自定義控件應(yīng)用
現(xiàn)在Javascript框架、控件庫有很多，jQuery、Ext、prototype、MooTools、Dojo等等，這些都是在Google上搜索“javascript+framework”列在第一頁的。其中，除了MooTools，其它的都有所了解，但只在項(xiàng)目中用過Ext和Dojo。但一直不太喜歡Ext，性能有問題，新的版本還收費(fèi)了。
另外，Ext官方提供的例子都是用JavaScript來創(chuàng)建和初始化控件，一個JavaScript配套一個HTML來用，這樣管理起來很混亂。而且官方例子是Best Practice，所以不太接受這種模式。Dojo在本人眼里是一個缺點(diǎn)和優(yōu)點(diǎn)都很突出的家伙：
缺點(diǎn)：
1、文檔非常之差；
2、CodeBase非常之大（優(yōu)點(diǎn)乎，缺點(diǎn)乎?）；
3、版本演進(jìn)快，且每次版本演進(jìn)，都有大量的API發(fā)生變化，還不夠成熟。
優(yōu)點(diǎn)：
1、是一個很優(yōu)秀的控件開發(fā)框架；
2、完全體現(xiàn)了javascript面向?qū)ο蟮囊幻妗?/P>
EXT和Dojo比起來，本人覺得EXT是一個控件庫，而Dojo是一個框架。第一次接觸Dojo，當(dāng)時版本0.3.X，今天項(xiàng)目中又有需求想用Dojo，版本是1.3.1，對比0.3和1.3，發(fā)現(xiàn)核心的思路并沒有太大變化，但出廠提供的控件卻有翻天覆地的變化，不過已經(jīng)先入為主的對它的控件有成見，導(dǎo)致現(xiàn)在也沒有興趣再去研究，還是講講如何拿Dojo做自定義的控件吧。Dojo很復(fù)雜，但我們可以簡單的認(rèn)為它分三層：
1、最底層的是核心API
核心API提供的方法簡化了DOM、字符串、CSS、事件等相關(guān)的操作。核心API還實(shí)現(xiàn)了類似于Java的package概念和import機(jī)制，方便了代碼組織和依賴管理。
2、基于核心API，創(chuàng)造了“控件生命周期”概念
這是Dojo的亮點(diǎn)，允許第三方以規(guī)范的方式開發(fā)控件?；贒ojo開發(fā)的控件具有很強(qiáng)的內(nèi)聚性和面向?qū)ο蟮奶匦浴?/P>
3、基于2所開發(fā)的各類控件
Dojo自己提供的控件也比較全了，只是由于歷史原因，沒有深入研究過。
Dojo的控件統(tǒng)稱DIJIT，要寫出Dojo版的Hello World控件，你需要了解的知識并不太多：
◆一個控件就是一個JS類；
◆所有的控件都繼承自_Widget或其子類，_Widget類提供了控件的生命周期管理函數(shù)；
◆可以同時繼承_Templated，繼承該類，可以為控件綁定模板來描述控件的展示。
關(guān)于_Widget基類的介紹
1、生命周期方法
_Widget提供了一系列方法稱為“生命周期方法”，Dojo框架在初始化一個控件的時候，會依次調(diào)用它們，我們的自定義控件，可以重寫特定的方法來加入自己的初始化邏輯，方法調(diào)用順序及說明：
preamble(/*Object*/ params, /*DOMNode*/node)
//這是一個通常不會用到的方法，這個方法的返回值，作為constructor的輸入?yún)?shù)param
constructor(/*Object*/ params, /*DOMNode*/node)
// 這個方法相當(dāng)于java類的構(gòu)造函數(shù)
// 在這個類中執(zhí)行初始化動作
postscript(/*Object*/ params, /*DOMNode*/node)
//實(shí)際的控件創(chuàng)建過程，依次調(diào)用如下方法（都可以被重寫）
_Widget.create(/*Object*/params, /*DOMNode*/node)
_Widget.postMixInProperties( )
_Widget.buildRendering( )
_Widget.postCreate( )
//我用得最多的是postCreate方法，這個方法中，控件已經(jīng)初始化完畢，界面上也已經(jīng)顯示出來了，
//通常在這個方法中啟動業(yè)務(wù)相關(guān)的處理
2、該類的幾個重要屬性（控件可以通過this訪問）
◆id:控件被授予的唯一編號，如果用戶不指定，則Dojo隨機(jī)創(chuàng)建一個。
◆domNode:該控件在HTML中對應(yīng)的DOM節(jié)點(diǎn)。
最基本的自定義控件示例：
js文件：./hello/world.js（以下涉及到文件名，都用相對路徑，其中./代表和"Dojo,dijit,Dojox"同級目錄）。
//聲明自己輸出的類名
Dojo.provide("hello.world");
//聲明自己依賴的類名Dojo.require("dijit._Widget");
Dojo.require("dijit._Templated");
//Dojo.declare定義控件類，第一個參數(shù)：類名，第二個參數(shù)：父類數(shù)組，第三個參數(shù)：類的prototype
Dojo.declare("hello.world",[dijit._Widget,dijit._Templated],
{
postCreate:function(){
this.domNode.innerHTML="hellow world";
}
}
);
該控件的行為極其簡單，在postCreate方法中，將自己在HTML頁面中對應(yīng)的DOM節(jié)點(diǎn)的內(nèi)容設(shè)置為hellow world。
<html>
<head>
<title>Hello World</title>
<!-- 首先引入Dojo.js，modulePaths用來定義包含控件的js目錄，類似于jsp的自定義tag引入的機(jī)制-->
<script type="text/javascript" src="./Dojo/Dojo.js" djConfig="parseOnLoad:true,modulePaths:{hello:'../hello'}"></script>
<script type="text/javascript">
Dojo.require("Dojo.parser");
Dojo.require("hello.world"); //引入自定義控件
</script>
</head>
<body>
<div DojoType="hello.world">
</div>
</body>
</html>
modulePaths的具體作用和用法，請google即可。接下來，我們將控件參數(shù)化，我們可以在寫標(biāo)簽的時候，將名字作為參數(shù)傳進(jìn)去，然后控件顯示HELLO XXX，首先將html文件改成：
<html>
<head>
<title>Hello World</title>
<!-- 首先引入Dojo.js，modulePaths用來定義包含控件的js目錄，類似于jsp的自定義tag引入的機(jī)制-->
<script type="text/javascript" src="./Dojo/Dojo.js" djConfig="parseOnLoad:true,modulePaths:{hello:'../hello'}">
</script><script type="text/javascript">
Dojo.require("Dojo.parser");
Dojo.require("hello.world");
</script></head><body>
<div DojoType="hello.world" yourName="jinxfei"></div>
</body>
</html>
大家注意到，我們在標(biāo)簽上增加了“yourName”屬性，在控件中如何使用該屬性呢？可以在construtctor方法中接收此屬性的值，將值賦給控件類自身的變量，然后在postCreate中使用，JavaScript代碼如下：
Dojo.provide("hello.world");
Dojo.require("dijit._Widget");
Dojo.require("dijit._Templated");
Dojo.declare("hello.world",[dijit._Widget,dijit._Templated],
{ yourName:'world',
constructor:function(params,node)
{
this.yourName=params.yourName;
},
postCreate:function()
{
this.domNode.innerHTML="hellow "+this.yourName;
}
}
);
接下來，我們將進(jìn)一步增加控件進(jìn)的復(fù)雜性，增加一個輸入框，在這個輸入框中輸入文本的同時，動態(tài)更新hello XXX，這就要用到Dojo的事件綁定機(jī)制，最常用的模式為：Dojo.connect(node,event,obj,method);表示將obj的method方法作為domNode的event事件處理函數(shù)，例如：
Dojo.connect(inputText,"onkey",this,"updateHello");
這次先改控件，在postCreate的時候，動態(tài)增加一個輸入框，并為輸入框動態(tài)綁定事件：
Dojo.provide("hello.world");
Dojo.require("dijit._Widget");
Dojo.require("dijit._Templated");
Dojo.declare("hello.world",[dijit._Widget,dijit._Templated],
{ yourName:'world',
typeIn:null,
echoDiv:null,
constructor:function(params,node)
{ this.yourName=params.yourName;
},
postCreate:function(){
this.typeIn=document.createElement("input");
this.typeIn.type="text";
this.domNode.appendChild(this.typeIn);
this.echoDiv=document.createElement("div");
this.domNode.appendChild(this.echoDiv);
Dojo.connect(this.typeIn,"onkeyup",this,"updateHello");//動態(tài)綁定事件
this.updateHello();//調(diào)用方法初始化一下，先顯示一個空的hello
} ,
updateHello:function()
{
this.echoDiv.innerHTML="hello "+this.typeIn.value;
}
}
);
而HTML文件中對控件的引用，不用做任何改變(嚴(yán)格來講，你需要刪除yourName="jinxfei"這個屬性）。從這個稍微有一點(diǎn)點(diǎn)復(fù)雜的控件，我們已經(jīng)可以看出Dojo的優(yōu)勢：真正的面向?qū)ο?！控件管理范疇?nèi)的DOM元素，都可以放在類中作為屬性來使用（直接用this.xxx引用)，這樣，避免了document.getElementByID()滿天飛，控件是內(nèi)聚的。響應(yīng)事件的方法也是類的方法，免得在頁面中聲明大量的離散function，不好管理。
相關(guān)文章
Ajax一統(tǒng)天下之Dojo整合篇...2007-03-03
dojo隨手記 gird組件引用實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-02-02
dojo學(xué)習(xí)第二天 ajax異步請求之綁定列表
在上一篇《dojo學(xué)習(xí)第一天 Tab選項(xiàng)卡》，我們學(xué)到了，怎么用dojo的選項(xiàng)卡插件來制作更易于用戶使用的表單，所有的一切都是為了使用更加方便，一切都是為了用戶的體驗(yàn)2011-08-08
Dojo是用JavaScript編寫的一款開源的DHTML工具箱。Dojo解決了DHTML部分歷史遺留問題，這些問題曾讓大量動態(tài)web程序開發(fā)無法實(shí)現(xiàn)，但Dojo的優(yōu)點(diǎn)和缺點(diǎn)都很突出。2010-09-09
dojo學(xué)習(xí)第一天 Tab選項(xiàng)卡 實(shí)現(xiàn)
可能很多人都對dojo只聞其名，覺得有了jquery、prototype、YUI等這些優(yōu)秀的js庫了，dojo還有它存在的必要嗎？2011-08-08
Dojo 學(xué)習(xí)要點(diǎn)學(xué)習(xí)dojo的朋友可以參考下2010-09-09
利用Dojo和JSON建立無限級AJAX動態(tài)加載的功能模塊樹
2007-03-03
dojo 之基礎(chǔ)篇(二)之從服務(wù)器讀取數(shù)據(jù)
dojo 之基礎(chǔ)篇(二)之從服務(wù)器讀取數(shù)據(jù)...2007-03-03
Dojo 學(xué)習(xí)筆記入門篇 First Dojo Example
Dojo學(xué)習(xí)筆記入門篇，第一個小例子， 剛開始學(xué)習(xí)dojo的朋友可以參考下。2009-11-11
dojo 之基礎(chǔ)篇...2007-03-03