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