基于 HTML5 的 Dojo Widget 开发.docx

基于 HTML5 的 Dojo Widget 开发.docx

《基于 HTML5 的 Dojo Widget 开发.docx》由会员分享，可在线阅读，更多相关《基于 HTML5 的 Dojo Widget 开发.docx（14页珍藏版）》请在冰豆网上搜索。

基于HTML5的DojoWidget开发

基于HTML5的DojoWidget开发

简介：

 当前的Web开发存在着两种趋势，一是基于HTML、CSS和JavaScript技术，比如以Dojo工具包、jQuery等为基础的HTML页面；另一种是基于浏览器端运行时，如基于Flash、Silverlight等技术的RIA应用。

前者占用的资源少，不需在浏览器上安装插件支持，后者界面更为美观，且便于实现一些较为复杂的展现功能。

而且，因为JavaScript和Flash等平台之间的交互功能很受局限，基于这两类技术开发的页面内容很难做深度的集成。

HTML5作为新一代的HTML标准，不但对JavaScript的支持更加完善，同时还包含了丰富的绘图功能，这等同于兼具上面提到的两类技术的各自的优势。

本文主要介绍基于HTML5来扩展DojoWidget，它不仅具有强大的JavaScript逻辑控制，而且具有丰富的页面展现和良好的运行性能。

前言

若干年前，很少有人会想到一家生产电脑的公司会凭借一款功能设计上存在着不少缺陷的手机在市场上取得巨大的成功。

也很少有人会想到一家曾经占据着智能手机大部分市场份额的厂商会落入今天这样举步维艰的局面。

人们不禁惊讶的发现，精美的界面、方便的操作对于消费者的吸引力要大于完善的功能及稳定的系统。

用户体验的优劣在一定的程度上决定了一个面向终端用户的产品能否在市场上生存。

移动设备的设计如此，互联网应用的设计亦如此。

现在，互联网上充斥着各种精美的CSS式样、JavaScript特效、Flash动画等等，来吸引大众的眼球以获得更多的用户关注和经济收益。

这其中存在着两种流行的设计趋势。

一种是以高级的JavaScript技术和CSS技术为基础的DHTML，以此来实现美观和交互性强的用户界面。

这种技术的优势是浏览器能够提供天然的支持而不依赖于任何插件而且能够很灵活的访问页面上的内容，但是这种技术的不足是浏览器自身的局限使得一些功能实现起来很困难。

比如若要实现网页上的矢量绘图，虽然有VML、SVG等技术，但是它们不是广泛支持的标准，需要在不同的浏览器上做不同的处理。

另一种是在浏览器上面安装某种包含运行环境的插件来运行某些RIA的应用，如Flash、Silverlight、JavaFX等，这些技术都是基于矢量绘图，能够呈现绚丽的用户界面和灵活多变的用户交互。

但它们的缺点就是需要在浏览器上再安装插件，而且运行效率往往也会存在着一定的问题。

新一代的Web页面标准HTML5则可以帮助我们很好的解决这一问题，它不但提供了很多诸如Web套接字、Web存储等技术，而且提供了Canvas以便在Web页面上直接进行矢量绘图。

作为HTML5标准的一部分，Canvas将天然地被各种浏览器支持，而且便于与JavaScript进行交互。

从某种意义上说可以作为当前流行的Flash技术的替代品。

所以，HTML5与Flash技术孰优孰劣的争论这两年就一直不断。

现在Web前端开发领域流行着不少JavaScript类库，如YUILibrary、ExtJS、DojoToolkit等，其中一些封装了各种前端控件。

这些控件的实现是基于HTML4的标准和复杂的JavaScript及CSS技术。

但随着HTML5技术的发展，它的各种强大特性为这些控件的结构和功能提供新的设计和实现方式。

因此，如何将HTML5的特性灵活的运用到前端控件开发就是本文的关注点。

由于HTML5的特性很多，而流行性的JavaScript库中的前端控件也五花八门，本文只能举例说明。

读者可以根据自身的需求结合HTML5中的特性开发出各种强大的前端页面控件。

新一代Web标准——HTML5

HTML5是新一代的HTML标准，它里面包含了很多HTML4中没有的新标签和应用程序接口，如audio标签、video标签、矢量绘图、Web套接字、离线数据存储等。

这些新特性可以使Web页面具有更丰富的功能和更好的用户体验，其中的很多都可以用在网页控件设计上，从而使得网页上的内容更加丰富。

在HTML5众多的功能中，有一个功能非常重要，它不仅是一项被众多网页设计人员期待已久的功能，而且为网页的功能和外观设计留下了巨大的空间，它就是HTML5中的矢量绘图。

现在，不仅不少的业内人士将HTML5的矢量绘图视作Flash的挑战者，甚至连Flash的支持厂商Adobe都推出了基于HTML5矢量绘图的动画制作工具。

本文后面将会介绍借助HTML5的矢量绘图技术实现DojoWidget。

在此之前，为了帮助读者能够更好的理解本文的内容，这里先对HTML中的矢量绘图做一些简要的说明。

HTML5的矢量绘图的功能由Canvas标签和各种绘图API构成。

在JavaScript的脚本中，通过Canvas节点可以获得绘图上下文，通过它调用API就可以绘制各种矢量图，如下所示。

清单1.利用HTML5Canvas绘制的矩形和三角形

图1.HTML5的Canvas绘制的矩形和三角形 

在上面的例子中，我们在一个HTML的文档中加入了一个Canvas标签，利用基于JavaScript的API来获得绘图上下文（Context），并在上面绘制了我们所要的图形。

除了绘制2D图形，HTML5还支持3D矢量绘图，它与2D的使用方式类似，此处不再详述。

值得注意的是，HTML5还是一个发展的标准，至今并没有被所有主流浏览器全面支持。

但是，即使是曾经是对HTML5支持较少的IE浏览器也会在新版本IE9中支持Canvas绘图等HTML5关键标签技术。

所以相信在不久的将来，HTML5的普及就会实现。

DojoWidget

近些年，页面设计的易用性、功能性和交互性已经成为了业界的主流趋势。

网页的功能越来越丰富，用户体验也越来越舒适。

这一切都离不开前端以JavaScript和CSS为基础的DHTML技术的迅猛发展。

但是，前端大规模的JavaScript和CSS开发的复杂度比较高，而且还要支持不同的浏览器平台，于是诞生了很多JavaScript库用来帮助前端开发者完成较为复杂的页面逻辑同时屏蔽浏览器的差异，如jQuery、YUILibrary、ExtJS等。

另外，越来越多的互联网公司也将自己的JavaScript库发布出来，如淘宝的KISSY、豆瓣的Do等等。

每种库都支持封装前端复杂的控件，如jQureyUI、DojoWidget等，但方式却不相同。

本文选取DojoToolkit作为控件实现的基础来介绍基于HTML5的控件的设计思想，当然，这种设计并不是只能在DojoToolkit上得到实现，其它的类库也可以作为实现基础。

DojoToolkit是当前页面前端开发领域流行的DHTML库，它不但包括丰富的页面基础功能，如CSS选择器、DOM节点操作、动画效果等，还包括良好的面向对象的封装结构和以此为基础的Dojo控件技术DojoWidget（简称Dijit）。

DojoWidget中包含了对网页控件的生命周期管理，包括初始化渲染、属性映射、事件绑定、控件销毁等。

清单2中给出了一个简单的DojoWidget的实现。

清单2.一个简单的DojoWidget

dojo.declare（"com.shy.widget.MyWidget",[dijit._Widget,dijit._Templated],{

templateString:

"

onClick\">${text}