Dojo1.6新特性：HTML 5進行時
近年來HTML5的關注度越來越高。雖然該規范還在緊鑼密鼓地制定中，但是相信很多HTML5的概念大家已經耳熟能詳，如具有強大繪圖功能的canvas、有望替代Flash播放器的視頻(vedio)音頻(audio)標簽、得到增強的各種表單元素、為提供大數據存儲而設計的Web Storage、統一的標簽自定義屬性設計、內置的元素拖拽功能等。這些新特性無疑將為用戶帶來更酷的用戶體驗，同時也將為廣大Web開發者提供更廣闊的平臺。
Dojo作為最老牌的JavaScript庫之一，近年來也一直沒有停止過對各種新技術的應用，對新標準的融合。也許你已經使用dojo很久，但可曾注意過dojo中對HTML5的應用呢?本文將就此為大家介紹一些Dojo中已經用到的HTML5特性!
◆ 支持HTML5 自定義屬性的dojo.parser
◆ 支持HTML Canvas的dojox.gfx和dojox.charting
◆ 支持HTML5 indexed Database Object Store API 的 dojo.store API
◆ 基于HTML5 localstorage的dojox.storage.LocalStorageProvider
◆ 支持HTML5 multiple file input 的 dojox.form.Uploader
◆ 支持HTML5 自定義屬性的dojo.parser
如何為頁面中的一個節點設置一個自定義屬性來判斷該節點是否可以被拖拽?面對這個問題，我們可能會不假思索地為節點附上一個“draggable”屬性。但我們往往忽略了一點——這個“draggable”屬性是否會與別的屬性發生沖突?我們的經驗告訴我們不會。的確，在HTML5之前，我們往往會通過這種方式來實現拖拽功能。但不幸的是，在HTML5中，“draggbale”已經是標準屬性之一，這也就意味著修改“draggable”屬性會修改節點對應的瀏覽器行為，而這并不一定是你想要的。
其實在dojo1.5之前的版本中，我們就一直在使用這種可能存在風險的自定義屬性?；叵胍幌挛覀兪侨绾斡脴撕灺暶饕粋€常用的dojo按鈕控件dijit.form.Button的：
- <button id="button1" dojoType="dijit.form.Button">Button1</button>
雖說dojoType并不太可能成為HTML標準屬性之一，但不可否認這不是一種優雅的實現方式。
而HTML5中已經有了針對自定義屬性的規范。所有自定義屬性都必須以data-作為前綴。這樣就可以很方便的將HTML標準屬性與自定義屬性區分開來，不僅提供了代碼的可讀性也避免了與標準屬性沖突的風險。
在dojo1.6中，也針對HTML5的這一規范做出了相應的改進。你可以在dojo1.6中發現一系列符合標準的自定義屬性，這些屬性已經可以被dojo.parser正確地識別出來：
◆ data-dojo-config：取代了原來的dojoConfig，用以配置dojo庫的各項參數
◆ data-dojo-type：取代了原來的dojoType屬性，用以指定所用的dojo對象類型
◆ data-dojo-props：取代了原來所有初始化dojo控件的自定義屬性。
其中data-dojo-config與data-dojo-type的使用方法與原來的dojoConfig以及dojoType沒有區別。而data-dojo-props則大大美化了初始化控件時的屬性配置代碼。
使用非HTML5標準屬性時，聲明一個簡單的CheckBox我們可能需要為節點單獨設置5個屬性值：
- <input name="cb1" id="cb1" value="foo"
- dojoType="dijit.form.CheckBox"
- onClick="console.log('clicked cb1')">
而在使用HTML5標準屬性data-dojo-props之后，我們則只需要設置三個屬性：
- <input id="cb1" data-dojo-id="cb1" data-dojo-type="dijit.form.CheckBox"
- data-dojo-props='name:"cb1", value:"foo",
- onClick:function(){ console.log("clicked cb1") }'/>
更值得注意是，這樣的聲明方法和使用JavaScript動態創建一個CheckBox非常相似：
- new dijit.form.CheckBox({
- id: "cb1",
- name: "cb1",
- value: "foo",
- onclick: function(){console.log("clicked cb1")},
- }, "cb1");
這是因為dojo.parser會將data-dojo-props中的內容作為一個散列參數表來初始化控件。這使得標簽和代碼兩種形式的初始化代碼可以最大程度上的保持一致。
可見，HTML5的自定義屬性在dojo中得到了充分的利用，帶來了很好的效果。不過在dojo1.6中，這樣的自定義屬性還不能使用在dojox.mobile包中的控件上。不過可以預見，在以后的版本中，dojox.mobile包中的控件也將支持這一實用的特性。
支持HTML Canvas的dojox.gfx和dojox.charting
在HTML5眾多特性之中，Canvas可能是帶給大家感受最深的一個了。眾多基于Canvas的應用充分展示了它強大的繪圖功能。其基本繪圖流程如下：
- // 獲取canvas元素
- var canvasElement= document.getElementById("canvas");
- // 默認瀏覽器支持Canvas，獲取canvas元素對應的2D上下文環境
- var canvasContext = canvasElement.getContext("2d");
- If(canvasContext){
- canvasContext.fillStyle = "#1433FF"; //設置繪圖的填充色
- canvasContext.strokeStyle = "#FF1500"; //設置繪圖的線條顯色
- canvasContext.lineWidth = 1; //設置繪圖的線條寬度
- canvasContext.fillRect (10, 10, 110, 110); //繪制實心矩形
- canvasContext.strokeRect(10, 230, 110, 110); //繪制空心矩形
- }
此外canvasContext還提供了功能齊全的繪制折線、文字、陰影、圖片等API。這些內容已遠遠超過本文所涉及的范圍，因此不再一一贅述。
對于如此強大的Canvas，dojo其實也早已經將其整合到了自己的圖形模塊中。由于dojox.gfx包下的dojox.gfx.canvas模塊對 HTML5 Canvas API的繪圖接口進行了封裝，使得dojox.gfx的canvas繪圖接口VML、SilverLight繪圖沒有任何區別。你不需要任何的 Canvas API使用經驗，只需在dojo的配置選項中將圖形渲染模式設置為canvas即可：
- <script type="text/javascript" data-dojo-config="gfxRenderer:'canvas'" src="dojo.js"></script>
借助于dojox.gfx對于各種繪圖方式一直的接口，dojox.charting下的所有圖表也都支持canvas模式。只需將渲染模式設置為canvas，你便獲得了一套完全基于HTML5 Canvas API的圖表庫。
此外，你還可以通過為gfxRenderer配置候補選項來使dojox.gfx在不支持HTML5的環境下自動使用其他渲染器。如下列代碼就指定優先使用HTML5 Canvas進行圖形渲染，如果瀏覽器不支持canvas的話會依次嘗試svg和vml進行渲染。
- <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中提出了一套基于鍵值對的數據存儲API。使用者可以簡單透明地通過使用以下方法來對存儲的數據進行查詢、更新、添加、刪除：
◆ get(index): 根據索引值獲取數據。
◆ put(value, /*可選*/ index): 更新數據記錄。
◆ add(value,/*可選*/ index): 添加數據記錄。若索引指向位置已存在記錄，則添加失敗。
◆ remove(index): 根據索引值移除數據記錄。
dojo 1.6中的dojo.store很好的實現了這一套接口，更加簡化了原有的dojo.data包所提供的數據存儲API。dojo.store包下有三種已實現的store：
◆ Memory：簡單、輕量級的store，適合處理小數據集。
◆ JsonRest：專門為REST API服務的store，適合處理大數據集。
◆ DataStore：用于為原有dojo.data包下的store提供object store api的store
這三種store雖然初始化方法和使用場景各有不同，但都提供了符合HTML5標準的get，put，remove方法(除了DataStore之外，也都提供了add方法)。用戶可以通過如下的流程對這些store進行很方便的操作：
- //獲取索引為some-id的記錄
- var record = store.get("some-id");
- //修改獲取的記錄的bar字段
- record.bar = newValue;
- //更新該記錄
- store.put(record);
- //創建一條新記錄
- var newRecord = {id: "some-new-id",
- bar: "bar",
- foo: "foo"
- };
- Store.add(newRecord );
我們可以看到使用dojo.store包實現的object store API進行數據管理就如同管理普通JavaScript Object一樣方便。之后我們還將看到這套API還完美的應用到了dojo對于HTML5 localstorage的實現——dojox.storage.LocalStoragePovider上。
#p#
基于HTML5 localstorage的dojox.storage.LocalStorageProvider
HTML5 在數據存儲方面不僅僅提供了方便的indexed Database Object Store API，還提供了十分有用的Local Storage。 Local Storage也被稱作Web Storage、Dom Storage。簡單地說其本質就是以鍵值對保存的Web頁面信息。和以前我們常用的cookies一樣，可以保存頁面相關信息，哪怕用戶離開當前頁面甚至直接關閉了瀏覽器。相較于cookies，Local Storage最大的特點就是可以儲存更多的信息——cookies最大只能保存4KB數據。同時Local Storage中的數據并不會被傳遞到服務器端(cookies則會隨著http請求被發送)。
LocalStorage的使用方法也十分簡便，從LocalStorage獲取一個值可以通過
- var value = localstorage.getItem("bar");
或更加簡便的
- localstorage["bar"];
方式獲得。
而向localstorage寫一個值可以通過
- localstorage.setItem("bar", "newValue");
或更加簡便的
- localstorage["bar"] = "newValue";
來實現。
dojo 的dojox.storage 包提供了各類常用的數據存儲工具：適用于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)
用以保存一對鍵值。第一個參數為所要保存的數據的索引。第二個參數是所要保存的數據。第三個參數用以處理數據保存結果的回調函數(數據保存可能失敗)。最后一個參數為可選的命名空間名。dojo為了更好的管理存儲內容，提供了命名空間這一參數，其本質是將命名空間和索引組成一個形為 “__namespace_key”的新索引值，而命名空間的默認值為“default”。
get: function(/*string*/ key, /*string?*/ namespace)
用以獲取指定命名空間下的所給索引指向的數據。
第一個參數為所要獲取的數據的索引。第二個參數為可選的命名空間名，默認值為“default”。
remove: function(/*string*/ key, /*string?*/ namespace)
用以刪除指定命名空間下的所給索引指向的數據
第一個參數為所要獲取的數據的索引。第二個參數為可選的命名空間名，默認值為“default”。
clear: function(/*string?*/ namespace)
用以清空指定命名空間下的所有數據。參數為可選的命名空間名，默認值為“default”。
這些API不僅僅與dojox.storage包下的其余provider保持一致，還與dojo.store包中提供的store對象的接口兼容。因此 dojox.storage.LocalStorageProvider和dojo.store包為HTML5的存儲體系提供了完整的支持。
支持HTML5 multiple file input 的 dojox.form.Uploader
HTML5 中對各種標簽都進行了增強，其中也不乏對于各類HTML控件的改進。其中input標簽就獲得了名為multiple的新屬性。以前HTML中的 input標簽只能選擇單個文件，而有了multiple屬性之后，你可以使用input標簽一次性選擇多個文件。如有一個input控件：
- <input multiple="multiple" id="uploadfile" type="file" name="uploaddfile"></div>
你可以點擊瀏覽按鈕之后在文件選擇窗口中一次性選擇多個需要的文件。并且可以通過如下代碼獲取選擇的文件信息：
- var files = document.getElementById("uploadfile").files;
input標簽的文件選擇功能往往被應用于文件的上傳中。而dojo 1.6中的dojox.form.uploader則很好的利用了HTML5這一新特性實現了基于HTML5的多文件上傳。
首先dojox.form.Uploader會判斷當前的瀏覽器是否支持HTML5的增強版input標簽，如果支持，那么dojox.form.Uploader將會使用帶有multiple屬性的input標簽。
dojx.form.Uploader提供了以下API對HTML5的多文件上傳進行支持：
getFileList: function()
用以獲取當前選擇的文件信息。本質是獲取對應的input標簽下的files數據進行整理，并為每個文件添加索引。
upload: function(/*Object ? */formData)
用以上傳指定數據(文件)，dojox.form.uploader.plugins.HTML5具體實現了該方法的HTML5版本(還有Flash和 Iframe兩種版本可選，分別由其余兩個插件實現)。該方法會判斷當前的瀏覽器是否支持FormData(Firefox 4以上和Webkit內核的瀏覽器基本都支持)，若支持則使用該方式上傳，否則使用binary格式上傳。
submit: function(/* form Node ? */form)
用于當dojox.form.Uploader處于一個form表單之中時，同時上傳文件及表單內其他信息。
reset: function()
用以清除當前選擇的所有文件，還不支持清除單個指定的文件。
有了dojox.form.Uploader，你可以很方便的創建一個基于HTML5的多文件上傳控件，并使用其API對其進行控制。當然，dojo也為不支持HTML5這一新特性的瀏覽器提供了其他解決方案。你可以發現在dojox.form.uploader.plugins包下除了HTML5之外還有 IFrame和Flash兩種插件。如果瀏覽器不支持HTML5的多文件選擇功能，那么dojox.form.Uploader會自動嘗試使用這兩個插件來實現多文件上傳。你無需為了讓代碼可以跨平臺而花費任何精力。
總結
現在我們可以發現，在Dojo中，HTML5其實早已應用在各個方面，從數據存儲到圖形繪制，從代碼風格到具體控件。相信在將來的版本中，Dojo會一如既往的融入各種新技術、兼容各種新標準，提供更好的用戶體驗!
【編輯推薦】
