麻雀雖小五臟俱全 Dojo自定義控件應(yīng)用
現(xiàn)在Javascript框架、控件庫(kù)有很多，jQuery、Ext、prototype、MooTools、Dojo等等，這些都是在Google上搜索“javascript+framework”列在***頁(yè)的。其中，除了MooTools，其它的都有所了解，但只在項(xiàng)目中用過(guò)Ext和Dojo。但一直不太喜歡Ext，性能有問(wèn)題，新的版本還收費(fèi)了。
另外，Ext官方提供的例子都是用JavaScript來(lái)創(chuàng)建和初始化控件，一個(gè)JavaScript配套一個(gè)HTML來(lái)用，這樣管理起來(lái)很混亂。而且官方例子是Best Practice，所以不太接受這種模式。Dojo在本人眼里是一個(gè)缺點(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、是一個(gè)很優(yōu)秀的控件開發(fā)框架；
2、完全體現(xiàn)了javascript面向?qū)ο蟮囊幻妗?/p>
EXT和Dojo比起來(lái)，本人覺(jué)得EXT是一個(gè)控件庫(kù)，而Dojo是一個(gè)框架。***次接觸Dojo，當(dāng)時(shí)版本0.3.X，今天項(xiàng)目中又有需求想用Dojo，版本是1.3.1，對(duì)比0.3和1.3，發(fā)現(xiàn)核心的思路并沒(méi)有太大變化，但出廠提供的控件卻有翻天覆地的變化，不過(guò)已經(jīng)先入為主的對(duì)它的控件有成見(jiàn)，導(dǎo)致現(xiàn)在也沒(méi)有興趣再去研究，還是講講如何拿Dojo做自定義的控件吧。Dojo很復(fù)雜，但我們可以簡(jiǎn)單的認(rèn)為它分三層：
1、***層的是核心API
核心API提供的方法簡(jiǎn)化了DOM、字符串、CSS、事件等相關(guān)的操作。核心API還實(shí)現(xiàn)了類似于Java的package概念和import機(jī)制，方便了代碼組織和依賴管理。
2、基于核心API，創(chuàng)造了“控件生命周期”概念
這是Dojo的亮點(diǎn)，允許第三方以規(guī)范的方式開發(fā)控件。基于Dojo開發(fā)的控件具有很強(qiáng)的內(nèi)聚性和面向?qū)ο蟮奶匦浴?/p>
3、基于2所開發(fā)的各類控件
Dojo自己提供的控件也比較全了，只是由于歷史原因，沒(méi)有深入研究過(guò)。
Dojo的控件統(tǒng)稱DIJIT，要寫出Dojo版的Hello World控件，你需要了解的知識(shí)并不太多：
◆一個(gè)控件就是一個(gè)JS類；
◆所有的控件都繼承自_Widget或其子類，_Widget類提供了控件的生命周期管理函數(shù)；
◆可以同時(shí)繼承_Templated，繼承該類，可以為控件綁定模板來(lái)描述控件的展示。
#p#
關(guān)于_Widget基類的介紹
1、生命周期方法
_Widget提供了一系列方法稱為“生命周期方法”，Dojo框架在初始化一個(gè)控件的時(shí)候，會(huì)依次調(diào)用它們，我們的自定義控件，可以重寫特定的方法來(lái)加入自己的初始化邏輯，方法調(diào)用順序及說(shuō)明：
- JScript code
- <
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- >preamble(/*Object*/ params, /*DOMNode*/node)
- //這是一個(gè)通常不會(huì)用到的方法，這個(gè)方法的返回值，作為constructor的輸入?yún)?shù)param
- constructor(/*Object*/ params, /*DOMNode*/node)
- // 這個(gè)方法相當(dāng)于java類的構(gòu)造函數(shù)
- // 在這個(gè)類中執(zhí)行初始化動(dòng)作
- postscript(/*Object*/ params, /*DOMNode*/node)
- //實(shí)際的控件創(chuàng)建過(guò)程，依次調(diào)用如下方法（都可以被重寫）
- _Widget.create(/*Object*/params, /*DOMNode*/node)
- _Widget.postMixInProperties( )
- _Widget.buildRendering( )
- _Widget.postCreate( )
- //我用得最多的是postCreate方法，這個(gè)方法中，控件已經(jīng)初始化完畢，界面上也已經(jīng)顯示出來(lái)了，
- //通常在這個(gè)方法中啟動(dòng)業(yè)務(wù)相關(guān)的處理
2、該類的幾個(gè)重要屬性（控件可以通過(guò)this訪問(wèn)）
◆id:控件被授予的唯一編號(hào)，如果用戶不指定，則Dojo隨機(jī)創(chuàng)建一個(gè)。
◆domNode:該控件在HTML中對(duì)應(yīng)的DOM節(jié)點(diǎn)。
最基本的自定義控件示例：
js文件：./hello/world.js（以下涉及到文件名，都用相對(duì)路徑，其中./代表和"Dojo,dijit,Dojox"同級(jí)目錄）。
- JScript code
- <
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- >//聲明自己輸出的類名
- Dojo.provide("hello.world");
- //聲明自己依賴的類名Dojo.require("dijit._Widget");
- Dojo.require("dijit._Templated");
- //Dojo.declare定義控件類，***個(gè)參數(shù)：類名，第二個(gè)參數(shù)：父類數(shù)組，第三個(gè)參數(shù)：類的prototype
- Dojo.declare("hello.world",[dijit._Widget,dijit._Templated],
- {
- postCreate:function(){
- this.domNode.innerHTML="hellow world";
- }
- }
- );
該控件的行為極其簡(jiǎn)單，在postCreate方法中，將自己在HTML頁(yè)面中對(duì)應(yīng)的DOM節(jié)點(diǎn)的內(nèi)容設(shè)置為hellow world。
- HTML code
- <
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- ><html>
- <head>
- <title>Hello World</title>
- <!-- 首先引入Dojo.js，modulePaths用來(lái)定義包含控件的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的具體作用和用法，請(qǐng)google即可。接下來(lái)，我們將控件參數(shù)化，我們可以在寫標(biāo)簽的時(shí)候，將名字作為參數(shù)傳進(jìn)去，然后控件顯示HELLO XXX，首先將html文件改成：
- HTML code
- <
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- >
- <html>
- <head>
- <title>Hello World</title>
- <!-- 首先引入Dojo.js，modulePaths用來(lái)定義包含控件的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>
大家注意到，我們?cè)跇?biāo)簽上增加了“yourName”屬性，在控件中如何使用該屬性呢？可以在construtctor方法中接收此屬性的值，將值賦給控件類自身的變量，然后在postCreate中使用，JavaScript代碼如下：
- JScript code
- <
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- >
- 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;
- }
- }
- );
接下來(lái)，我們將進(jìn)一步增加控件進(jìn)的復(fù)雜性，增加一個(gè)輸入框，在這個(gè)輸入框中輸入文本的同時(shí)，動(dòng)態(tài)更新hello XXX，這就要用到Dojo的事件綁定機(jī)制，最常用的模式為：Dojo.connect(node,event,obj,method);表示將obj的method方法作為domNode的event事件處理函數(shù)，例如：
- Dojo.connect(inputText,"onkey",this,"updateHello");
這次先改控件，在postCreate的時(shí)候，動(dòng)態(tài)增加一個(gè)輸入框，并為輸入框動(dòng)態(tài)綁定事件：
- JScript code
- <
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- >
- 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");//動(dòng)態(tài)綁定事件
- this.updateHello();//調(diào)用方法初始化一下，先顯示一個(gè)空的hello
- } ,
- updateHello:function()
- {
- this.echoDiv.innerHTML="hello "+this.typeIn.value;
- }
- }
- );
而HTML文件中對(duì)控件的引用，不用做任何改變(嚴(yán)格來(lái)講，你需要?jiǎng)h除yourName="jinxfei"這個(gè)屬性）。從這個(gè)稍微有一點(diǎn)點(diǎn)復(fù)雜的控件，我們已經(jīng)可以看出Dojo的優(yōu)勢(shì)：真正的面向?qū)ο?！控件管理范疇?nèi)的DOM元素，都可以放在類中作為屬性來(lái)使用（直接用this.xxx引用)，這樣，避免了document.getElementByID()滿天飛，控件是內(nèi)聚的。響應(yīng)事件的方法也是類的方法，免得在頁(yè)面中聲明大量的離散function，不好管理。
【編輯推薦】
