Dojo1.6新特性：HTML5進(jìn)行時(shí)
Dojo作為最老牌的JavaScript庫之一，近年來也一直沒有停止過對(duì)各種新技術(shù)的應(yīng)用，對(duì)新標(biāo)準(zhǔn)的融合。也許你已經(jīng)使用dojo很久，但可曾注意過dojo中對(duì)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)是否可以被拖拽？面對(duì)這個(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)對(duì)應(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)有了針對(duì)自定義屬性的規(guī)范。所有自定義屬性都必須以data-作為前綴。這樣就可以很方便的將HTML標(biāo)準(zhǔn)屬性與自定義屬性區(qū)分開來，不僅提供了代碼的可讀性也避免了與標(biāo)準(zhǔn)屬性沖突的風(fēng)險(xiǎn)。
在dojo1.6中，也針對(duì)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對(duì)象類型
（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è)簡(jiǎn)單的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元素對(duì)應(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)超過本文所涉及的范圍，因此不再一一贅述。
對(duì)于如此強(qiáng)大的Canvas，dojo其實(shí)也早已經(jīng)將其整合到了自己的圖形模塊中。由于dojox.gfx包下的dojox.gfx.canvas模塊對(duì) 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對(duì)于各種繪圖方式一直的接口，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中提出了一套基于鍵值對(duì)的數(shù)據(jù)存儲(chǔ)API。使用者可以簡(jiǎn)單透明地通過使用以下方法來對(duì)存儲(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)了這一套接口，更加簡(jiǎn)化了原有的dojo.data包所提供的數(shù)據(jù)存儲(chǔ)API。dojo.store包下有三種已實(shí)現(xiàn)的store：
（1）Memory：簡(jiǎn)單、輕量級(jí)的store，適合處理小數(shù)據(jù)集。
（2）JsonRest：專門為REST API服務(wù)的store，適合處理大數(shù)據(jù)集。
（3）DataStore：用于為原有dojo.data包下的store提供object store api的store
這三種store雖然初始化方法和使用場(chǎng)景各有不同，但都提供了符合HTML5標(biāo)準(zhǔn)的get，put，remove方法（除了DataStore之外，也都提供了add方法）。用戶可以通過如下的流程對(duì)這些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對(duì)于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。簡(jiǎn)單地說其本質(zhì)就是以鍵值對(duì)保存的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請(qǐng)求被發(fā)送）。
LocalStorage的使用方法也十分簡(jiǎn)便，從LocalStorage獲取一個(gè)值可以通過
- var value = localstorage.getItem("bar");
或更加簡(jiǎn)便的
- localstorage["bar"];
方式獲得。而向localstorage寫一個(gè)值可以通過
- localstorage.setItem("bar", "newValue");
或更加簡(jiǎn)便的
- localstorage["bar"] = "newValue";
來實(shí)現(xiàn)。
dojo 的dojox.storage 包提供了各類常用的數(shù)據(jù)存儲(chǔ)工具：適用于cookies的CookieStorageProvider，適用于Google gears的GearsStorageProvider，適用于Adobe Air的AirDBStorageProvider、AireFileStorageProvider、 AireEncryptedLocalStorageProvider等。
其中dojo也專門針對(duì)HTML5 local storage特性提供了LocalStorageProvider。LocalStorageProvider完全兼容簡(jiǎn)便的Object Store API，其接口及其主要功能如下：
put: function( /*string*/ key, /*object*/ value, /*function*/ resultsHandler,/*string?*/ namespace)
用以保存一對(duì)鍵值。***個(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對(duì)象的接口兼容。因此 dojox.storage.LocalStorageProvider和dojo.store包為HTML5的存儲(chǔ)體系提供了完整的支持。
支持HTML5 multiple file input 的 dojox.form.Uploader
HTML5 中對(duì)各種標(biāo)簽都進(jìn)行了增強(qiáng)，其中也不乏對(duì)于各類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對(duì)HTML5的多文件上傳進(jìn)行支持：
getFileList: function()
用以獲取當(dāng)前選擇的文件信息。本質(zhì)是獲取對(duì)應(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對(duì)其進(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)！
【編輯推薦】
