Dojo自定義控件應(yīng)用，大家了解多少呢？其實在JavaScript開發(fā)中，Dojo解決了很多問題，下面是錯新技術(shù)頻道小編帶來的麻雀雖小五臟俱全 Dojo自定義控件應(yīng)用，一起來學(xué)習(xí)吧！
現(xiàn)在Javascript框架、控件庫有很多，jQuery、Ext、prototype、MooTools、Dojo等等，這些都是在Google上搜索“javascript+framework”列在第一頁的。其中，除了MooTools，其它的都有所了解，但只在項目中用過Ext和Dojo。但一直不太喜歡Ext，性能有問題，新的版本還收費了。
另外，Ext官方提供的例子都是用JavaScript來創(chuàng)建和初始化控件，一個JavaScript配套一個HTML來用，這樣管理起來很混亂。而且官方例子是Best Practice，所以不太接受這種模式。Dojo在本人眼里是一個缺點和優(yōu)點都很突出的家伙：
缺點：
1、文檔非常之差；
2、CodeBase非常之大（優(yōu)點乎，缺點乎?）；
3、版本演進快，且每次版本演進，都有大量的API發(fā)生變化，還不夠成熟。
優(yōu)點：
1、是一個很優(yōu)秀的控件開發(fā)框架；
2、完全體現(xiàn)了javascript面向?qū)ο蟮囊幻妗?/p>
EXT和Dojo比起來，本人覺得EXT是一個控件庫，而Dojo是一個框架。第一次接觸Dojo，當(dāng)時版本0.3.X，今天項目中又有需求想用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還實現(xiàn)了類似于Java的package概念和import機制，方便了代碼組織和依賴管理。
2、基于核心API，創(chuàng)造了“控件生命周期”概念
這是Dojo的亮點，允許第三方以規(guī)范的方式開發(fā)控件。基于Dojo開發(fā)的控件具有很強的內(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)
//實際的控件創(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隨機創(chuàng)建一個。
◆domNode:該控件在HTML中對應(yīng)的DOM節(jié)點。
最基本的自定義控件示例：
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é)點的內(nèi)容設(shè)置為hellow world。
?
?
?
<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即可。接下來，我們將控件參數(shù)化，我們可以在寫標(biāo)簽的時候，將名字作為參數(shù)傳進去，然后控件顯示HELLO XXX，首先將html文件改成：
?
?
?
<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>
大家注意到，我們在標(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;
}
}
);
接下來，我們將進一步增加控件進的復(fù)雜性，增加一個輸入框，在這個輸入框中輸入文本的同時，動態(tài)更新hello XXX，這就要用到Dojo的事件綁定機制，最常用的模式為：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"這個屬性）。從這個稍微有一點點復(fù)雜的控件，我們已經(jīng)可以看出Dojo的優(yōu)勢：真正的面向?qū)ο?！控件管理范疇?nèi)的DOM元素，都可以放在類中作為屬性來使用（直接用this.xxx引用)，這樣，避免了document.getElementByID()滿天飛，控件是內(nèi)聚的。響應(yīng)事件的方法也是類的方法，免得在頁面中聲明大量的離散function，不好管理。
以上就是錯新技術(shù)頻道小編和大家分享的麻雀雖小五臟俱全 Dojo自定義控件應(yīng)用，我們可以在生活工作中都能運用自如。
