思洋互动网站建设学前班

近年来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的：

1. <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个属性值：

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

而在使用HTML5标准属性data-dojo-props之后，我们则只需要设置三个属性：

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

更值得注意是，这样的声明方法和使用JavaScript动态创建一个CheckBox非常相似：

1. new dijit.form.CheckBox({  
2. id: "cb1",  
3. name: "cb1",  
4. value: "foo",  
5. onclick: function(){console.log("clicked cb1")},  
6. }, "cb1"); 

这是因为dojo.parser会将data-dojo-props中的内容作为一个散列参数表来初始化控件。这使得标签和代码两种形式的初始化代码可以最大程度上的保持一致。

可见，HTML5的自定义属性在dojo中得到了充分的利用，带来了很好的效果。不过在dojo1.6中，这样的自定义属性还不能使用在dojox.mobile包中的控件上。不过可以预见，在以后的版本中，dojox.mobile包中的控件也将支持这一实用的特性。

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

在HTML5众多特性之中，Canvas可能是带给大家感受最深的一个了。众多基于Canvas的应用充分展示了它强大的绘图功能。其基本绘图流程如下：

1. // 获取canvas元素  
2. var canvasElement= document.getElementById("canvas");  
3. // 默认浏览器支持Canvas，获取canvas元素对应的2D上下文环境  
4. var canvasContext = canvasElement.getContext("2d");  
5. If(canvasContext){  
6.     canvasContext.fillStyle = "#1433FF"; //设置绘图的填充色  
7.     canvasContext.strokeStyle = "#FF1500"; //设置绘图的线条显色  
8.     canvasContext.lineWidth = 1; //设置绘图的线条宽度  
9.     canvasContext.fillRect (10, 10, 110, 110); //绘制实心矩形  
10.     canvasContext.strokeRect(10, 230, 110, 110); //绘制空心矩形  
11. } 

此外canvasContext还提供了功能齐全的绘制折线、文字、阴影、图片等API。这些内容已远远超过本文所涉及的范围，因此不再一一赘述。

对于如此强大的Canvas，dojo其实也早已经将其整合到了自己的图形模块中。由于dojox.gfx包下的dojox.gfx.canvas模块对 HTML5 Canvas API的绘图接口进行了封装，使得dojox.gfx的canvas绘图接口VML、SilverLight绘图没有任何区别。你不需要任何的 Canvas API使用经验，只需在dojo的配置选项中将图形渲染模式设置为canvas即可：

1. <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进行渲染。

1. <script type="text/javascript" data-dojo-config="gfxRenderer:'canvas,svg,vml'"    
2.     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进行很方便的操作：

1. //获取索引为some-id的记录  
2. var record =  store.get("some-id");  
3. //修改获取的记录的bar字段  
4. record.bar = newValue;  
5. //更新该记录  
6. store.put(record);  
7. //创建一条新记录  
8. var newRecord = {id: "some-new-id",   
9.     bar: "bar",  
10.     foo: "foo"  
11. };  
12. Store.add(newRecord ); 

我们可以看到使用dojo.store包实现的object store API进行数据管理就如同管理普通JavaScript Object一样方便。之后我们还将看到这套API还完美的应用到了dojo对于HTML5 localstorage的实现——dojox.storage.LocalStoragePovider上。