Dojo作為最老牌的JavaScript庫之一，近年來也一直沒有停止過對各種新技術(shù)的應(yīng)用，對新標(biāo)準(zhǔn)的融合。也許你已經(jīng)使用dojo很久，但可曾注意過dojo中對HTML5的應(yīng)用呢？

Dojo中已經(jīng)用到的HTML5特性：

（1）支持HTML5 自定義屬性的dojo.parser

（2）支持HTML Canvas的dojox.gfx和dojox.charting

（3）支持HTML5 indexed Database Object Store API 的 dojo.store API

（4）基于HTML5 localstorage的dojox.storage.LocalStorageProvider

（5）支持HTML5 multiple file input 的 dojox.form.Uploader

支持HTML5 自定義屬性的dojo.parser

如何為頁面中的一個(gè)節(jié)點(diǎn)設(shè)置一個(gè)自定義屬性來判斷該節(jié)點(diǎn)是否可以被拖拽？面對這個(gè)問題，我們可能會(huì)不假思索地為節(jié)點(diǎn)附上一個(gè)“draggable”屬性。但我們往往忽略了一點(diǎn)——這個(gè)“draggable”屬性是否會(huì)與別的屬性發(fā)生沖突？我們的經(jīng)驗(yàn)告訴我們不會(huì)。的確，在HTML5之前，我們往往會(huì)通過這種方式來實(shí)現(xiàn)拖拽功能。但不幸的是，在HTML5中，“draggbale”已經(jīng)是標(biāo)準(zhǔn)屬性之一，這也就意味著修改“draggable”屬性會(huì)修改節(jié)點(diǎn)對應(yīng)的瀏覽器行為，而這并不一定是你想要的。

其實(shí)在dojo1.5之前的版本中，我們就一直在使用這種可能存在風(fēng)險(xiǎn)的自定義屬性?；叵胍幌挛覀兪侨绾斡脴?biāo)簽聲明一個(gè)常用的dojo按鈕控件dijit.form.Button的：

<button id="button1" dojoType="dijit.form.Button">Button1</button> 

雖說dojoType并不太可能成為HTML標(biāo)準(zhǔn)屬性之一，但不可否認(rèn)這不是一種優(yōu)雅的實(shí)現(xiàn)方式。

而HTML5中已經(jīng)有了針對自定義屬性的規(guī)范。所有自定義屬性都必須以data-作為前綴。這樣就可以很方便的將HTML標(biāo)準(zhǔn)屬性與自定義屬性區(qū)分開來，不僅提供了代碼的可讀性也避免了與標(biāo)準(zhǔn)屬性沖突的風(fēng)險(xiǎn)。

在dojo1.6中，也針對HTML5的這一規(guī)范做出了相應(yīng)的改進(jìn)。你可以在dojo1.6中發(fā)現(xiàn)一系列符合標(biāo)準(zhǔn)的自定義屬性，這些屬性已經(jīng)可以被dojo.parser正確地識(shí)別出來：

（1）data-dojo-config：取代了原來的dojoConfig，用以配置dojo庫的各項(xiàng)參數(shù)

（2）ata-dojo-type：取代了原來的dojoType屬性，用以指定所用的dojo對象類型

（3）ata-dojo-props：取代了原來所有初始化dojo控件的自定義屬性。

其中data-dojo-config與data-dojo-type的使用方法與原來的dojoConfig以及dojoType沒有區(qū)別。而data-dojo-props則大大美化了初始化控件時(shí)的屬性配置代碼。

使用非HTML5標(biāo)準(zhǔn)屬性時(shí)，聲明一個(gè)簡單的CheckBox我們可能需要為節(jié)點(diǎn)單獨(dú)設(shè)置5個(gè)屬性值：

<input name="cb1" id="cb1" value="foo"   dojoType="dijit.form.CheckBox"   onClick="console.log('clicked cb1')">  

而標(biāo)準(zhǔn)屬性data-dojo-props之后，我們則只需要設(shè)置三個(gè)屬性：

<input id="cb1" data-dojo-id="cb1" data-dojotype="dijit.form.CheckBox" data-dojo-props='name:"cb1", value:"foo", onClick:function(){ console.log("clicked cb1") }'/> 

更值得注意是，這樣的聲明方法和使用JavaScript動(dòng)態(tài)創(chuàng)建一個(gè)CheckBox非常相似：

new dijit.form.CheckBox({  
id: "cb1",  
name: "cb1",  
value: "foo",  
onclick: function(){console.log("clicked cb1")},  
}, "cb1"); 

這是因?yàn)閐ojo.parser會(huì)將data-dojo-props中的內(nèi)容作為一個(gè)散列參數(shù)表來初始化控件。這使得標(biāo)簽和代碼兩種形式的初始化代碼可以***程度上的保持一致。

可見，HTML5的自定義屬性在dojo中得到了充分的利用，帶來了很好的效果。不過在dojo1.6中，這樣的自定義屬性還不能使用在dojox.mobile包中的控件上。不過可以預(yù)見，在以后的版本中，dojox.mobile包中的控件也將支持這一實(shí)用的特性。

支持HTML Canvas的dojox.gfx和dojox.charting

在HTML5眾多特性之中，Canvas可能是帶給大家感受最深的一個(gè)了。眾多基于Canvas的應(yīng)用充分展示了它強(qiáng)大的繪圖功能。其基本繪圖流程如下：

// 獲取canvas元素  
var canvasElement= document.getElementById("canvas");  
// 默認(rèn)瀏覽器支持Canvas，獲取canvas元素對應(yīng)的2D上下文環(huán)境  
var canvasContext = canvasElement.getContext("2d");  
If(canvasContext){  
canvasContext.fillStyle = "#1433FF"; //設(shè)置繪圖的填充色  
canvasContext.strokeStyle = "#FF1500"; //設(shè)置繪圖的線條顯色  
canvasContext.lineWidth = 1; //設(shè)置繪圖的線條寬度  
canvasContext.fillRect (10, 10, 110, 110); //繪制實(shí)心矩形  
canvasContext.strokeRect(10, 230, 110, 110); //繪制空心矩形  
} 

此外canvasContext還提供了功能齊全的繪制折線、文字、陰影、圖片等API。這些內(nèi)容已遠(yuǎn)遠(yuǎn)超過本文所涉及的范圍，因此不再一一贅述。

對于如此強(qiáng)大的Canvas，dojo其實(shí)也早已經(jīng)將其整合到了自己的圖形模塊中。由于dojox.gfx包下的dojox.gfx.canvas模塊對 HTML5 Canvas API的繪圖接口進(jìn)行了封裝，使得dojox.gfx的canvas繪圖接口VML、SilverLight繪圖沒有任何區(qū)別。你不需要任何的 Canvas API使用經(jīng)驗(yàn)，只需在dojo的配置選項(xiàng)中將圖形渲染模式設(shè)置為canvas即可：

<script type="text/javascript" data-dojo-config="gfxRenderer:'canvas'" src="dojo.js"></script> 

借助于dojox.gfx對于各種繪圖方式一直的接口，dojox.charting下的所有圖表也都支持canvas模式。只需將渲染模式設(shè)置為canvas，你便獲得了一套完全基于HTML5 Canvas API的圖表庫。

此外，你還可以通過為gfxRenderer配置候補(bǔ)選項(xiàng)來使dojox.gfx在不支持HTML5的環(huán)境下自動(dòng)使用其他渲染器。如下列代碼就指定優(yōu)先使用HTML5 Canvas進(jìn)行圖形渲染，如果瀏覽器不支持canvas的話會(huì)依次嘗試svg和vml進(jìn)行渲染。

<script type="text/javascript" data-dojo-config="gfxRenderer:'canvas,svg,vml'"   
src="dojo.js"></script> 

支持HTML5 indexed Database Object Store API 的 dojo.store API
在HTML5中提出了一套基于鍵值對的數(shù)據(jù)存儲(chǔ)API。使用者可以簡單透明地通過使用以下方法來對存儲(chǔ)的數(shù)據(jù)進(jìn)行查詢、更新、添加、刪除：

（1）get(index): 根據(jù)索引值獲取數(shù)據(jù)。

（2）put(value, /*可選*/ index): 更新數(shù)據(jù)記錄。

（3）add(value,/*可選*/ index): 添加數(shù)據(jù)記錄。若索引指向位置已存在記錄，則添加失敗。

（4）remove(index): 根據(jù)索引值移除數(shù)據(jù)記錄。

dojo 1.6中的dojo.store很好的實(shí)現(xiàn)了這一套接口，更加簡化了原有的dojo.data包所提供的數(shù)據(jù)存儲(chǔ)API。dojo.store包下有三種已實(shí)現(xiàn)的store：

（1）Memory：簡單、輕量級的store，適合處理小數(shù)據(jù)集。

（2）JsonRest：專門為REST API服務(wù)的store，適合處理大數(shù)據(jù)集。

（3）DataStore：用于為原有dojo.data包下的store提供object store api的store

這三種store雖然初始化方法和使用場景各有不同，但都提供了符合HTML5標(biāo)準(zhǔn)的get，put，remove方法（除了DataStore之外，也都提供了add方法）。用戶可以通過如下的流程對這些store進(jìn)行很方便的操作：

//獲取索引為some-id的記錄  
var record = store.get("some-id");  
//修改獲取的記錄的bar字段  
record.bar = newValue;  
//更新該記錄  
store.put(record);  
//創(chuàng)建一條新記錄  
var newRecord = {id: "some-new-id",   
bar: "bar",  
foo: "foo" 
};  
Store.add(newRecord ); 

我們可以看到使用dojo.store包實(shí)現(xiàn)的object store API進(jìn)行數(shù)據(jù)管理就如同管理普通JavaScript Object一樣方便。之后我們還將看到這套API還***的應(yīng)用到了dojo對于HTML5 localstorage的實(shí)現(xiàn)——dojox.storage.LocalStoragePovider上。

基于HTML5 localstorage的dojox.storage.LocalStorageProvider

HTML5 在數(shù)據(jù)存儲(chǔ)方面不僅僅提供了方便的indexed Database Object Store API，還提供了十分有用的Local Storage。 Local Storage也被稱作Web Storage、Dom Storage。簡單地說其本質(zhì)就是以鍵值對保存的Web頁面信息。和以前我們常用的cookies一樣，可以保存頁面相關(guān)信息，哪怕用戶離開當(dāng)前頁面甚至直接關(guān)閉了瀏覽器。相較于cookies，Local Storage***的特點(diǎn)就是可以儲(chǔ)存更多的信息——cookies***只能保存4KB數(shù)據(jù)。同時(shí)Local Storage中的數(shù)據(jù)并不會(huì)被傳遞到服務(wù)器端（cookies則會(huì)隨著http請求被發(fā)送）。

LocalStorage的使用方法也十分簡便，從LocalStorage獲取一個(gè)值可以通過

var value = localstorage.getItem("bar"); 

或更加簡便的

localstorage["bar"]; 

方式獲得。而向localstorage寫一個(gè)值可以通過

localstorage.setItem("bar", "newValue"); 

或更加簡便的

localstorage["bar"] = "newValue"; 

來實(shí)現(xiàn)。

dojo 的dojox.storage 包提供了各類常用的數(shù)據(jù)存儲(chǔ)工具：適用于cookies的CookieStorageProvider，適用于Google gears的GearsStorageProvider，適用于Adobe Air的AirDBStorageProvider、AireFileStorageProvider、 AireEncryptedLocalStorageProvider等。

其中dojo也專門針對HTML5 local storage特性提供了LocalStorageProvider。LocalStorageProvider完全兼容簡便的Object Store API，其接口及其主要功能如下：

put: function( /*string*/ key, /*object*/ value, /*function*/ resultsHandler,/*string?*/ namespace)

用以保存一對鍵值。***個(gè)參數(shù)為所要保存的數(shù)據(jù)的索引。第二個(gè)參數(shù)是所要保存的數(shù)據(jù)。第三個(gè)參數(shù)用以處理數(shù)據(jù)保存結(jié)果的回調(diào)函數(shù)（數(shù)據(jù)保存可能失?。?**一個(gè)參數(shù)為可選的命名空間名。dojo為了更好的管理存儲(chǔ)內(nèi)容，提供了命名空間這一參數(shù)，其本質(zhì)是將命名空間和索引組成一個(gè)形為 “__namespace_key”的新索引值，而命名空間的默認(rèn)值為“default”。

get: function(/*string*/ key, /*string?*/ namespace)

用以獲取指定命名空間下的所給索引指向的數(shù)據(jù)。

***個(gè)參數(shù)為所要獲取的數(shù)據(jù)的索引。第二個(gè)參數(shù)為可選的命名空間名，默認(rèn)值為“default”。

remove: function(/*string*/ key, /*string?*/ namespace)

用以刪除指定命名空間下的所給索引指向的數(shù)據(jù)

***個(gè)參數(shù)為所要獲取的數(shù)據(jù)的索引。第二個(gè)參數(shù)為可選的命名空間名，默認(rèn)值為“default”。

clear: function(/*string?*/ namespace)

用以清空指定命名空間下的所有數(shù)據(jù)。參數(shù)為可選的命名空間名，默認(rèn)值為“default”。

這些API不僅僅與dojox.storage包下的其余provider保持一致，還與dojo.store包中提供的store對象的接口兼容。因此 dojox.storage.LocalStorageProvider和dojo.store包為HTML5的存儲(chǔ)體系提供了完整的支持。

支持HTML5 multiple file input 的 dojox.form.Uploader

HTML5 中對各種標(biāo)簽都進(jìn)行了增強(qiáng)，其中也不乏對于各類HTML控件的改進(jìn)。其中input標(biāo)簽就獲得了名為multiple的新屬性。以前HTML中的 input標(biāo)簽只能選擇單個(gè)文件，而有了multiple屬性之后，你可以使用input標(biāo)簽一次性選擇多個(gè)文件。如有一個(gè)input控件：

<input multiple="multiple" id="uploadfile" type="file" name="uploaddfile"></div> 

你可以點(diǎn)擊瀏覽按鈕之后在文件選擇窗口中一次性選擇多個(gè)需要的文件。并且可以通過如下代碼獲取選擇的文件信息：

var files = document.getElementById("uploadfile").files; 

input標(biāo)簽的文件選擇功能往往被應(yīng)用于文件的上傳中。而dojo 1.6中的dojox.form.uploader則很好的利用了HTML5這一新特性實(shí)現(xiàn)了基于HTML5的多文件上傳。

首先dojox.form.Uploader會(huì)判斷當(dāng)前的瀏覽器是否支持HTML5的增強(qiáng)版input標(biāo)簽，如果支持，那么dojox.form.Uploader將會(huì)使用帶有multiple屬性的input標(biāo)簽。

dojx.form.Uploader提供了以下API對HTML5的多文件上傳進(jìn)行支持：

getFileList: function()

用以獲取當(dāng)前選擇的文件信息。本質(zhì)是獲取對應(yīng)的input標(biāo)簽下的files數(shù)據(jù)進(jìn)行整理，并為每個(gè)文件添加索引。

upload: function(/*Object ? */formData)

用以上傳指定數(shù)據(jù)（文件），dojox.form.uploader.plugins.HTML5具體實(shí)現(xiàn)了該方法的HTML5版本（還有Flash和 Iframe兩種版本可選，分別由其余兩個(gè)插件實(shí)現(xiàn)）。該方法會(huì)判斷當(dāng)前的瀏覽器是否支持FormData（Firefox 4以上和Webkit內(nèi)核的瀏覽器基本都支持），若支持則使用該方式上傳，否則使用binary格式上傳。

submit: function(/* form Node ? */form)

用于當(dāng)dojox.form.Uploader處于一個(gè)form表單之中時(shí)，同時(shí)上傳文件及表單內(nèi)其他信息。

reset: function()

用以清除當(dāng)前選擇的所有文件，還不支持清除單個(gè)指定的文件。

有了dojox.form.Uploader，你可以很方便的創(chuàng)建一個(gè)基于HTML5的多文件上傳控件，并使用其API對其進(jìn)行控制。當(dāng)然，dojo也為不支持HTML5這一新特性的瀏覽器提供了其他解決方案。你可以發(fā)現(xiàn)在dojox.form.uploader.plugins包下除了HTML5之外還有 IFrame和Flash兩種插件。如果瀏覽器不支持HTML5的多文件選擇功能，那么dojox.form.Uploader會(huì)自動(dòng)嘗試使用這兩個(gè)插件來實(shí)現(xiàn)多文件上傳。你無需為了讓代碼可以跨平臺(tái)而花費(fèi)任何精力。

總結(jié)

現(xiàn)在我們可以發(fā)現(xiàn)，在Dojo中，HTML5其實(shí)早已應(yīng)用在各個(gè)方面，從數(shù)據(jù)存儲(chǔ)到圖形繪制，從代碼風(fēng)格到具體控件。相信在將來的版本中，Dojo會(huì)一如既往的融入各種新技術(shù)、兼容各種新標(biāo)準(zhǔn)，提供更好的用戶體驗(yàn)！

【編輯推薦】

1. 拖拽：從 Dojo 到 HTML5
2. 用Dojo實(shí)現(xiàn)Ajax請求：XHR、跨域、及其他
3. 2.3　把Dojo和Dijit添加到網(wǎng)頁
4. HTML 5的革新：結(jié)構(gòu)之美